Skip to main content

Accessibility rule: Color contrast does not meet requirement, explained

Modified on: Fri, 3 Feb, 2023 at 12:04 PM

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 might be a background image despite being one-colored to the eye,

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.