Frontend Stories

Color Contrast and Readability

By using appropriate colors combination you can improve user experience and readability.


The core findings of the study are that colors with a greater contrast ratio generally result in more readable text, that there is no significant difference in retention based on color combination, and that preferred colors (such as blues and chromatic colors) lead to a higher rating of aesthetic quality and intention to purchase.

The article states that for educational sites, where retention and readability are a major concern, black on white or a closely related combination of text should be used. This is because black and white have a high contrast ratio and because white on black text is less common.

The text also states that for commercial sites, where aesthetic and purchasing behavior factors are a major concern, chromatic (colored) text/background combinations should be used.

Chromatic colors are more likely to lead the viewer to see a site as more visually pleasing and stimulating. Most importantly, these colors are more likely to lead a viewer to the intention to purchase products advertised on the site.

Evidence and further readings

Here you can find a list of references to dive deeper on the subject.