SiteLint documentation and guidelines

The color contrast between background and foreground is not sufficient (AAA)

On this page
  1. Description
  2. What means AAA in accessibility contrast?
  3. What is the difference between AA and AAA contrast ratings?
  4. Exceptions for AAA contrast
  5. AAA perceptual contrast algorithm
  6. How to fix it
  7. Known Limitations
  8. Standard

Description

Rule ID: color-contrast-aaa

This rule determines if text and controls have enough color contrast.

Text and interactive elements need to have high contrast so that the content is readable to everyone. High contrast especially benefits site visitors who may have low vision, color blindness, or aging. It can also help mobile users still see content even if the screen is being affected by sun glare.

What means AAA in accessibility contrast?

In the context of accessibility, AAA stands for Triple A and refers to the highest level of accessibility conformance in the Web Content Accessibility Guidelines (WCAG). AAA conformance means that a website or application has met the most stringent accessibility requirements, making it easier for users with disabilities to use and understand the content.

What is the difference between AA and AAA contrast ratings?

The difference between AA and AAA is that the AAA rating requires a higher contrast ratio than the AA rating.

The WCAG guidelines recommend a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. The AA rating requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. The AAA rating requires a higher contrast ratio of 7:1 for normal text and 4.5:1 for large text. The AAA rating is intended to ensure that text is legible for people with low vision or color blindness.

Exceptions for AAA contrast

There are some exceptions to this rule, including:

  1. Large Text – Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1.
  2. Incidental – Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  3. Logotypes – Text that is part of a logo or brand name has no contrast requirement.

The contrast is calculated based on the following features:

  • Spatial properties (font weight and text size)
  • Text color (perceived lightness difference between text and background)
  • Context (ambient light, surroundings, and intended purpose of the text)

AAA perceptual contrast algorithm

This rule also displays WCAG 3.0 APCA computed contrast.

The Advanced Perceptual Contrast Algorithm (APCA) is a new way to compute contrast based on modern research on color perception. Unlike the traditional AA/AAA guidelines, APCA is more context-dependent and takes into account the specific design of the website or application. APCA is currently in public beta and is under active development.

How to fix it

  • Review the background and foreground text color to ensure it meet the requirements.
  • Use the tool Color Contrast Finder to find the closest colors that pass the color contrast ratio.
  • Use the tool Contrast text on image to check the contrast for the text that overlaps the image.

Known Limitations

Determining color contrast ratio programmatically is limited due to technical limitations (browser doesn’t provide enough information) or for certain scenarios, like the text on an image, or the background having a gradient, or mix-blend-mode is used. Therefore, in some cases, a manual check is required to ensure the color contrast matches the requirements.

Standard

Accessibility, WCAG 2.1, Success Criterion 1.4.6 Contrast (Enhanced)