Accessible Colour Contrast

by
,

When I started looking at accessibility and using the aXe accessibility testing tool, one of the first things that it reported was insufficient colour contrast. So, I started looking into it. The page I tested had quite a few different shades of grey (not 50, before anyone else says it) so this seemed like a good place to start.

How light can grey text be against a white background, or flipped around, how dark does a grey background need to be for white text to be clear?

And the same with black. How dark can grey text go on a black background and how light does a grey background need to be for black text to be easily legible?

The results are shown in the embedded pens below. Please share if you find this useful. :)

[codepen_embed height="1050" theme_id="dark" slug_hash="POxVQg" default_tab="result" user="chris22smith"]See the Pen Accessibility - Colour Contrast with White by Chris Smith (@chris22smith) on CodePen.[/codepen_embed]

[codepen_embed height="1050" theme_id="dark" slug_hash="XzGgpM" default_tab="result" user="chris22smith"]See the Pen Accessibility - Colour Contrast with Black by Chris Smith (@chris22smith) on CodePen.[/codepen_embed]

The next task is to find the acceptable contrast blacks and whites for pale greys, like #EEE or #F7F7F7, and dark greys, like #222.