Minimum contrast-ratio for text on background is too low
| Field | Value |
|---|---|
| Rule code | Text_Contrast_TooLow |
| WCAG conformance level | AA |
| WCAG success criterion | 1.4.3 Contrast (Minimum) |
| Must be fixed at source | Yes |
Description
The visual presentation of text must have a minimum color contrast-ratio (luminosity) against it's background of at least 4.5:1 for normal sized text and 3:1 for large sized text (24px and above, or 18.5px and above and emboldened). We recommend updating colors so that there is an accessible contrast between the text and its background. Changing the text color, the background color or both are solutions. AudioEye's Color Contrast Checker can be utilized to verify contrast ratios: https://www.audioeye.com/color-contrast-checker/
How to fix
Update colors so there is always good contrast between the text and its background. You could change the text color, the background color, or both. Contrast can be described as a ratio between two colors. The standard contrast ratio between text and the background is 4.5:1. Text should be 4.5:1 or higher to be legible. If the text is large or bold, it can sometimes use a lower 3:1 contrast ratio. This only applies to text that's bold and 14 pt (18.66 px) or larger, or 18 pt (24 px) or larger. If you aren't sure, stick with 4.5:1 contrast. You don't have to do any math yourself, though. There are lots of tools that can calculate the contrast ratio between colors. A few examples are:
- Online tools such as WebAIM's color checker
- Browser inspectors such as the Chrome developer tools or Firefox developer tools
- Design tools such as the Stark extension for Sketch, Figma, and Adobe XD
- Desktop apps such as TPGi's Colour Contrast Analyser.