4

According to the W3C (and another question on this site), the contrast ratio between body text and text background should be at least 7:1 for good legibility. Google takes this up in their typography guidelines, but they also maintain that

Text with too much contrast can also be hard to read.

Unfortunately, they don't state what is "too much contrast", and I was unable to find anything definite on the web.

What is the optimal contrast ratio for best readability?

Please provide sources, not opinion.

3 Answers 3

2

There is no one optimal contrast. Readability depends on a combination of contrast, font size, line height, font used, and audience's preference.

Pulling from this great answer by Multicon on choosing colors for web design type:

While a designer's eye should always be a part of the final equation when making design decisions, there is room to maneuver away from gray.

Contrast can be achieved in all dimensions: hue, saturation or brightness. Brightness contrast is visually the strongest so guide your decisions primarily by that (having dark text on a bright background or vice versa) since it ensures type is readable regardless of hue or sat contrast (having same brightness text but of different hue or sat will most likely be insufficient contrast for enough readability).

Guideline

Use compound contrast to achieve desired readability.

A slight reduction in brightness contrast can be compensated for by increase in hue/sat contrast. eg. having a dark brown wood background (30 deg hue) would require bright type, but the brightness of type could be pulled back a bit if we set its hue to say 210 degree blue which is a direct complement of 30 deg brown wood background. The sat contrast can be strong or one may only nudge the saturation ever so slightly away from gray, just enough to give it a slight blue hint. How far we take it is where our individuality as designers comes into play.

The required contrast also depends on the typeface properties, thicker type with a higher x-height requires less contrast to achieve sufficient readability. Monospaced type also requires less. Inversely, a condensed typeface might require slightly more contrast than a normal or wide one.


There is such a thing as too much brightness contrast too (since your scope is web), due to the nature of screens (emitted light instead of reflected light) white type on black background can look a bit too strong on a high-brightness monitor in the evening. Pulling it back a bit and reducing contrast actually improves its readability. Point being as many rules as there are, they should serve as guidelines, a designer's eye in the end is always a part of the equation.

2

According to the WCAG2 (Web Content Accessibility Guidelines), a minimum contrast ratio of 4.5:1 for text under 18pt (24px), and a contrast ratio 3:1 for text larger than 18pt (24px), is necessary to pass AA. Bold text at 14pt (18.7px) or more can use the contrast ratio of 3:1. Again, font-weight and tracking can improve/reduce readability, so use your best judgement there.

The WGAC documentation specifically mentions that color/luminance isn't reliable as a way to manipulate contrast, because of perception variance by users with color vision deficiencies.

Here's a Sketch plugin that works well, except it can't calculate contrast when backgrounds are compound/layered (e.g. gradients over images): https://github.com/getflourish/Sketch-Color-Contrast-Analyser I try to sample the area with least contrast to compensate.

WCAG2 contrast guidelines here: https://github.com/getflourish/Sketch-Color-Contrast-Analyser

0

You should check out the contrast ratio tool in the color picker in chrome:

The Color Picker now shows you the contrast ratio of text elements. Increasing the contrast ratio of text elements makes your site more accessible to users with low-vision impairments or color-vision deficiencies. See Color and contrast to learn more about how contrast ratio affects accessibility.

https://developers.google.com/web/updates/2018/01/devtools#contrastenter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.