What is the optimal contrast ratio for best readability?


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.

4/13/2017 12:46:00 PM

According to the WCAG2 (Web Content Accessibility Guidelines), a minimum contrast ratio of 4.5:1 for text under 18px, and a contrast ratio 3:1 for text larger than 18px, is necessary to pass AA. Bold text at 14px or more can use the 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

12/12/2016 2:35:00 AM