Back to Info and Examples for Accessibility Insights for Web
color-contrast
Text elements must have sufficient contrast.
Why it matters
Most people find it easier to read text when it has a sufficiently high contrast against its background.
People with visual disabilities, low vision, limited color perception, or presbyopia are likely to find text unreadable when contrast is too low.
How to check
Use Accessibility Insights for Windows (or the Colour Contrast Analyser if you're testing on a Mac) to manually verify that the text has sufficient contrast against the background. If the background is an image or gradient, test an area where contrast appears to be lowest.
If the text has sufficient contrast against all areas of the background, then no changes are needed.
If the element is an icon or other non-text content, then this requirement does not apply.
For detailed test instructions, go to Assessment > Adaptable content > Contrast.
How to fix
If the text has a contrast ratio of 1:1 and is intended to be hidden, mark the element with aria-hidden="true".
If the text is intended to be visible, adjust its foreground color and/or background color to provide sufficient contrast.
-
A minimum contrast ratio of 3:1 is required for large text, defined as:
- 18pt (24 CSS pixels)
- OR bold 14pt (19 CSS pixels)
-
A minimum contrast ratio of 4.5:1 is required for smaller text.
Example
Fail
Pass
About this rule
Instances need review if ANY of the following are true:
- Element's background color can't be determined (for example, because of an image or gradient)
- Element's foreground color can't be determined (for example, because of transparency)
- Element's foreground and background have a 1:1 contrast ratio
- Element is overlapped or obscured by another element
- Element content is very short or contains non-text characters