Accessibility rule: Color contrast does not meet requirement, explained

• Overview
• Who is impacted by this barrier?
• How does the check work?
• Common mistakes

Overview

On a surface level, the color contrast requirements in WCAG are pretty straightforward. Nevertheless, when text overlaps an image, you may need to dig a bit more into the matter.

WCAG AA criteria require a minimum contrast ratio of at least 4.5:1 between small text and background. For large text, which is easier to see, the contrast requirement is slightly lower, 3:1, which allows the use of a more varied color palette.
You can read more about the Siteimprove check for minimum color contrast in the technical documentation here.

WCAG AAA criteria require an enhanced color contrast ratio of at least 7:1, except for large text, where the requirement is 4.5.
You can read more about the Siteimprove check for enhanced color contrast in the technical documentation here.

Who is impacted by this barrier?

Good color contrast is helpful for people with moderately low vision or with color blindness. It also benefits everyone depending on the situation. For instance, imagine sitting in the back of the room at a conference trying to follow a presentation with poor color contrast between text and background, or looking at a screen in bright sunlight.

How does the check work?

The color contrast checks for AA and AAA requirements look at the contrast ratio between text and background color. In practice, this means that to be fully automated, the check needs to compare the hexadecimal color code of text with the color code of the background.

For instance, if the website has a background image, analyzing color contrast becomes more tricky as images are often multi-color. In these cases, the check becomes a Potential Issue called “Is there sufficient contrast between the text and background?”

To test the Potential Issue, the user needs to input the hexadecimal color codes of the background and/or text manually using a color picker. Siteimprove will then do the comparison of the colors for you and report if contrast requirements are met.

You can use the color picker for this check:
1. Click on the colored square to open the color picker
2. Click on the "eye dropper" icon
3. Use the magnifying tool to select a pixel with the correct color

Note: You might experience a potential color contrast issue where Siteimprove is asking about a clearly sufficient contrast ratio. For instance, black text on a white background. If this happens, it might be caused by two things:

• There may be an element on the website that is absolutely positioned, and it’s not clear if any text is on top of it. In this case, Siteimprove is asking you to verify first if the text is on top of the absolutely positioned image(s).
• The background is a solid-colored image. The automation process cannot identify whether an image is one color or more than one color. This means that, without hexadecimal color codes for reference, text placed over images must be manually reviewed.

Information about a more efficient workflow surrounding the review process for color contrast issues was included in these release notes. 

This added functionality helps identify whether elements are interfering with text. The information from it is automatically applied across the rest of the site, reducing the number of times such issues need to be manually addressed, but doesn't apply to all types of color contrast issues.

Common mistakes

Mistake: Mistaking the AAA contrast rule for the AA contrast rule.

Explanation: The AAA rule for this is more stringent than the AA rule. Most sites are required to meet the AA contrast rule but are not necessarily required to meet the AAA one.

Fix: Consider whether your organizational goals and legal requirements mean that your site must comply with the AAA standards. If you don't need to meet the AAA standards, you can disregard the AAA rule. You can either set a site target or dismiss it as a “can’t fix.” You should not dismiss it as a “false positive” in this situation.

Mistake: Mistaking a font size “18 px” instead of “18 pt," or using the wrong font size unit.

Users can think the font size is large when it isn’t. Example: mistaking “18 px” for “18 pt.” 

Explanation: Color contrast rules have lower contrast requirements for text that is large. So, the definition of what is “large” matters.

For text that isn’t bold: Large text is defined as 18 pt or larger.  That’s 18 pt, not 18 px. 18 pt equals 24 px. 

For text that is bold: Large text is defined as 14 pt or larger. 14 pt equals 18.66 px.

“Pt” is also known as “point,” and “px” is also known as “CSS pixels.” They are both valid units for the CSS font-size property, but they yield different results, like inches vs. centimeters.

This happens often, note that a content author reads the guideline and sees that it specifies “18 point.” They focus on the “18” part of that but don’t notice the “point” part, and then can mistakenly use a font size of 18 px instead. 18 px equals 13.5 point, which is smaller than the 18 point that the guideline specifies.

Fix: Check your font size carefully. If it’s 18 px (or even 19 px or 20 px) and if it’s not bold, then it isn't large. So, your color contrast needs to meet the threshold for regular-size text, rather than the threshold for large text. The thresholds are: 4.5:1 for the AA contrast rule, and 7.0:1 for the AAA contrast rule. The easiest fix is often to increase the font size to 18 pt (which equals 24 px) or larger.

Mistake: Assuming that brand colors are exempt from the contrast rules.

Explanation: There is no exception to this rule for brand colors or for any other kind of corporate color guidelines or design systems. There is an exception for logos and brand names, but that’s considered a more specific situation. The difference between logos and brand colors is documented here: "Corporate visual guidelines beyond logo and logotype are not included in the exception." - WCAG, Understanding SC 1.4.3: Contrast (Minimum)

Fix: In some cases, you can fix this by increasing the size of the text. However, in most cases the only possible fix is to change the brand colors. The necessary change might be minor, such as darkening one color slightly. But it’s not always that easy. Altering brand colors can be challenging due to organizational constraints, but such challenges do not exempt an organization from adhering to this accessibility guideline.