This means
Text, symbols, and controls must stand out clearly from the background. The color contrast between the foreground and background must be sufficient to ensure that content is easily readable even by people with impaired vision, color blindness, or in bright environments.
According to WCAG 1.4.3 (AA), the following applies:
- Normal text: minimum contrast ratio of 4.5:1
- Large text (18 pt or 14 pt bold): minimum 3:1
- Non-text elements (symbols, icons): should also be clearly recognizable
Impact
If the contrast is too low, content is difficult or impossible to read. Users overlook important information, navigation, or buttons.
This impairs both accessibility and conversion and violates WCAG 1.4.3 (AA) Contrast (Minimum).
Recommendation
- Check color contrasts regularly with our Contrast Checker.
- If necessary, increase the text color (darker) or the background (lighter) until the ratio reaches at least 4.5:1.
- Avoid light gray tones on white or pastel backgrounds.
- Ensure that links, buttons, and icons differ from the rest of the content not only in color but also in style.
- Do not use semi-transparent colors or overlays that reduce contrast.
Examples
Problematic:
<p style="color:#dcdbdb; background:#EBF5FF;">This text is difficult to read.
</p
Light gray text on a white background falls short of the required contrast value.
Better:
<p style="color:#1f2937; background:#ffffff;">This text meets WCAG requirements.</p>
A dark gray tone provides significantly better contrast and readability.
Alternative:
<p style="color:#ffffff; background:#111827;">Here is the text</p>
White text on a dark background – also provides sufficient contrast.
Note
Sufficient color contrast is one of the most important factors in visual accessibility. It not only improves accessibility, but also the user experience on mobile devices and in bright environments.
Related WCAG criterion:
WCAG 1.4.3 – Contrast (Minimum)