Colour contrast and That Dress!

This last week, social media has been taken by storm over #ThatDress, a phenomenon that is dividing tweeps and facebookers – is the dress white and gold, or black and blue?

There’s nothing new about the science of colour and how colour variations can be perceived differently by people in different circumstances. The subject has been written about by Josef Albers in his Interaction of Color, for one.

So, what’s this got to do with accessibility? Well, quite a lot…

Whilst testing against guidelines and standards is important, simply ticking a box to say you have complied with this or that guideline may not be sufficient. A degree of human judgment and common sense are also often called for.

For example, in testing, the contrast ratio of text colour against its background colour will measure the same regardless of the font weight. However, the narrower the font, the lighter its colour will seem to human eyes relative to a darker background. So, the WCAG 2.0 AA requirement for a minimum contrast ratio of 4.5:1 for normal text may be insufficient when using light and ultra-light font variants.

Similarly, the WCAG contrast ratio may be insufficient for mobile screens, which are susceptible to glare. Our users’ viewing environment is no longer as constant as we have grown to expect from desktop computers, or even laptops.

Whilst #ThatDress may be attracting lots of memes and blocking up many a Twitter feed, it’s a great way to highlight the need to go that step further than simply meeting a guideline. If #ThatDress hasn’t blown your mind enough, check out Josef Albers’ cross:

Josef Albers' cross

These two crosses are exactly the same colour.

To find out more about accessibility and how you can incorporate accessibility within your own organisation, don’t forget to check out our training.

Update to blog post September 2018 – WCAG 2.1

Please note that WCAG 2.0 has been updated and replaced with WCAG 2.1. The three levels remain the same, A, AA and AAA. Our blog post details the changes What is WCAG 2.1