.net

Accessibility and site colours – WCAG 2.0 Recommendations 1.4.3 and 1.4.6

Testing your webpages for accessibility isn’t easy – although there are a few automated different tools out there which are helpful to identify some obvious violations and that’s a good starting point. My personal favourite all-rounder is HTML_CodeSniffer – it is a JavaScript bookmarklet which means I’m able to test my webpages while they’re still hosted on my local environment, and that makes testing a lot easier.

screenshot-1487011484

But even with this tool, I find it difficult to understand any warnings about colour, which relate to the WCAG 2.0 Recommendation 1.4.3 (which is needed for AA compliance) and Recommendation 1.4.6 (which is needed for AAA compliance).

For AA compliance, the visual presentation of text and images of text has a contrast ratio of at least 4.5:1 (with certain exceptions). For the stricter AAA compliance, this contrast ratio is increased to 7:1.

Fortunately, there’s a Firefox plugin which is helpful at this location called “WCAG Contrast Checker”.

screenshot-1487013057

So as an example, let’s look at the Components page for the “Tachyons” css library at http://tachyons.io/components/.

After installing the plugin from the location linked to above, you can initiate the “WCAG Contrast Checker” by hitting the keyboard combination of Alt+C. This opens a panel on the left side of Firefox, which shows the results of contrast tests against the WCAG standards. S0 in this case, there’s apparently one failure against the AAA level, where there’s a luminosity of only 2.46

screenshot.1487013371.png

We can also click on the error and scroll down the page to find where the error is – it’s actually in the Twitter logo – the text which doesn’t contrast well against the background is highlighted by a red-dotted line (I’ve put a red arrow next to the issue to highlight it in the image below).

screenshot.1487014876.png

I think this is one of the exceptions allowed by the WCAG standard (defined by “Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement“).

So instead of just listing potential violations, this Firefox plugin allows us to specifically identify the foreground and background contrasts, show the different colours, and even highlights the text which is being tested. This plugin is a lot more useful for testing foreground/background contrasts than the HTML_Codesniffer plugin.

Hopefully this will help you write pages which are more accessible.