In our article for WCAG 1.4.3 we talked about the minimum color contrast ratio required to ensure that any text on your site sufficiently stands out against the background. In this post, we will discuss a higher standard for color contrast.
All of this WCAG stuff is broken down into different conformance levels, described as “A”, “AA”, and “AAA”. The standards for accessibility increase over each level, with level AAA being the highest. The ratio of 4.5:1, which we discussed in WCAG 1.4.3, is the AA standard for color contrast. In this post, we’ll talk about the AAA standard, which requires a contrast ratio of at least 7:1.
Let’s go back to that example from the New Yorker that we looked at in our post for WCAG 1.4.3. As you may recall, we used a color contrast analyser to check the ratio of the red title at the very top of the page.
The analyser detects a ratio of 4.6:1, which only just passes the AA contrast standard. Unfortunately, the good people at the New Yorker will have to choose a darker color if they want to step it up to level AAA.
The exceptions for this guideline are pretty much the same as those we described in our post for WCAG 1.4.3. Like with WCAG 1.4.3, there is no contrast requirement for logos or incidental text, such as text that’s used for purely decorative purposes or something like an infographic, where the text is a component of an image with other visual elements.
Similarly, there is a lower contrast requirement for large text. Text that is 18 point or 14 point bold must have a contrast ratio of at least 4.5:1 (the level AA standard for normal-sized text).