1. Home
  2. Docs
  3. SiteLint
  4. Accessibility Rules
  5. color-contrast-aaa

color-contrast-aaa

Print this article

    Description

    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 that may have low vision, color blindness, or are aging. It can also help mobile users still see content even if the screen is being affected by sun glare.

    The W3C Web Content Accessibility Guidelines 2.0 define specific contrast ratios that must be met in order to comply at particular levels. In order to meet the guidelines at Level AA, text or images of text must have a contrast ratio of at least 4.5:1 (or 3:1 for large text). In order to meet the guidelines at the stricter Level AAA, the contrast ratio must be at least 7:1 (or 4.5:1 for large text).

    There are some exceptions to this rule, including:

    1. Large text (defined as 14 point and bold or larger, or 18 point or larger) must have a contrast ratio of at least 3:1.
    2. 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. Text that is part of a logo or brand name has no minimum contrast requirement.

    How to fix it

    • Review the background and foreground text color to ensure it meets 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 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 has a gradient. Therefore in some cases, a manual check is required to ensure the color contrast matches the requirements.

    Was this article helpful to you? Yes No