Accessibility rule: Color contrast does not meet requirement, explained

Summary

Color contrast requirements ensure that text is readable against its background by meeting minimum contrast ratios defined by WCAG. Insufficient contrast can make content difficult or impossible to read, especially for users with visual impairments.

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.

WCAG AAA criteria require an enhanced color contrast ratio of at least 7:1, except for large text, where the requirement is 4.5.

Who is impacted by this

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 this is evaluated (or how it works)

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.