Default background for a chat widget [closed]

Question

my team and i are developing a chat widget where users can customize the color eventually but what would be a good default background color in terms of user experience.

right now, im thinking just plain dark gray. what do you guys think? if i should go with a brighter and more colorful widget

Answer 1

Well your eventual design should depend on the branding guidelines depending upon the colors used in the site or application. However with regards to the part of the chat widget where the users enters the text, I would recommend going for the standard of black text on white ground. This is so because that would afford the highest readability. As per this article on Color Test Results

the most readable color combination is black text on white background; overall, there is a stronger preference for any combination containing black. The two least readable combinations were red on green and fuchsia on blue. White on blue and red on yellow were ranked fairly high, while green on yellow and white on fuchsia were ranked fairly low

Also, in every color combination surveyed, the darker text on a lighter background was rated more readable than its inverse (e.g. blue text on white background ranked higher then white text on blue background).

With regards to your preference for using a dark greyish background,that would need a white or light grey text which has some benefits and issues as highlighted in this article When to Use White Text on a Dark Background

According to the article,the best use case for white text on a black background or a greyish background is

There is a time when white text on a dark background works well. This is when users are scanning text. Users typically scan headings, titles and labels. Using white text on a dark background for these types of text is an effective way to highlight them to get the user’s attention. This is because white reflects all the colors of the visible light spectrum into the eyes.This makes the text bright and distinct. You won’t have to worry about putting stress on the user’s eyes because scanning these types of text doesn’t take long visual fixations. All it takes is a quick sweep of the eyes to scan a heading, title or label.

However the demerits of white text on a black background or grey background are highlighted below :

The kind of text that users read is paragraph text. You should avoid using white text on a dark background when displaying paragraph text to make it easier from them to read. Forcing users to fixate on the white text for a long time can strain the user’s eyes. This is because white stimulates all three types of color sensitive visual receptors in the human eye in nearly equal amounts . This makes reading white paragraph text on dark backgrounds stressful on the user’s eyes. White also reflects all wavelengths of light. Because the words and letters in paragraph text are compact and close together, when white text reflects light, the reflected light scatters and runs into neighboring words and letters. This makes the shape of the words and letters harder to perceive, which affects the user’s readability. Compare that with black text, where the black absorbs the light around each word and letter, making them easy to distinguish.

Now coming to your application, since its a chat widget it might be used for short messages but also might be used for really long lines of text. While white on grey might work for very short messages (one or two words) I doubt your users are going to be mostly monosyllabic in nature and might type much more than that hence strengthening the case for black text on white.