Text elements must have sufficient color contrast against the background
Log in (Premium content) Request a demo
All text elements must have sufficient contrast between text in the foreground and background colors behind it in accordance with WCAG 2 AA contrast ratio thresholds.
The Algorithm, in Simple Terms
Checks all text elements to ensure that the contrast between the foreground text and the background colors meet the WCAG 2 AA contrast ratio thresholds.
This rule will not report on text elements that have a
background-image, are obscured by other elements or are images of text.
This also checks for child elements of disabled buttons so they can be ignored to avoid a false value.
Why this is Important
Some people with low vision experience low contrast, meaning that there aren't very many bright or dark areas. Everything tends to appear about the same brightness, which makes it hard to distinguish outlines, borders, edges, and details. Text that is too close in luminance (brightness) to the background can be hard to read.
How to Fix the Problem
Ensure all text elements have sufficient color contrast between the text in the foreground and background color behind it.
Use the color contrast analyzer below to find colors that pass the guidelines.
- HTML 4
- HTML 5