3.1. Make sure that there is sufficient contrast between the content and the background or propose an alternative with contrast
The contrast between the colors and the background must be sufficient for all items present (text, images, videos, etc.).
It is also important to provide a sufficient contrast between an informational icon (not completed with text) and the background colour.
Minimum contrast ratio for a AA WCAG 2.0 compliance
The minimum contrast ratio to reach the AA level requirement of WCAG 2.0 depends on the font weight.
For a non-bold text
- The colour of a non-bold text with a font size lower than 18pt should have at least a contrast ratio of 4.5 with the background colour.
- The colour of a non-bold text with a font higher or equal to 18pt should have at least a contrast ratio of 3 ratio with the background colour.
For a bold text
- The colour of a bold text with a font size lower than 14pt should have at least a contrast ratio of 4,5 with the background colour.
- The colour of a non-bold text with a font higher or equal to 14pt should have at least a contrast ratio of 3 ratio with the background colour
The kind of font used does not impact the ratios.
Colour Contrast Analyser
To test the contrast, you could use, for example, the Colour Contrast Analyser tool for Windows and Mac OS, which you can download free.
Be careful when using shading, color gradients or patterns as background for content.
Alternative style guidelines
If it is not practical to optimize the contrast, then you can create alternative style guidelines that offer sufficient contrast.
Alternative style guidelines do not necessarily push the contrast to the limits (for example, black on white, or white on black), but provide rules so that the association of colours is optimized satisfactorily.
Find out more
- Accessible Color Palette Evaluator.
- Contrast-A, to find accessible color combinations.
- Contrast Ratio, a tool to calculate color contrast ratios.
- Accessible colors, a tool to calculate color contrast ratios.
- Color Contrast Tester.
- Check My Colours, to analyse the color contrast of your web pages.
- Colour Contrast Determinator.
- WCAG Contrast checker (Firefox extension).
- Text contrasts.