A high colour contrast ratio between a text and its background makes said text easier to read for colour blind and partially sighted users. Many users also use mobile devices (a smartphone or tablet) with small screens to surf the web, often in situations with bad lighting. This makes contrast important to everyone.
What does sufficient colour contrast mean?
Colour contrast is the difference in brightness between two colours. WCAG 2.1 recommends a minimum value of 4,5:1 for texts of an average size, and 3,0:1 for larger texts (larger than 18pt or 14pt bold).
This example shows the same paragraph using different contrast ratios.
Bad: the blue word AnySurfer has a contrast of 3,0:1 compared to the black background.
Good: the orange word AnySurfer has a contrast of 8,4:1 compared to the black background.
Colour contrasts can be objectively measured with the free Colour Contrast Analyser tool. Use the analyser's dropper to select a foreground and a background colour on your screen. The resulting contrast ratio must be at least 4,5:1 for texts of an average size. Larger texts (28pt or 14pt bold) need a contrast ratio of at least 3,0:1.
- Colour Contrast Analyzer Tool
- Tanaguru Contrast-Finder generates accessible colour palettes
- Google Chrome extension: Accessibility Developer Tools
- We are colorblind examples and solutions
- NoCoffee – Vision Simulator for Chrome
Colour blindness and contrast ratios
Colour blindness is a disability that effects an individual's perception of colour. Our eyes perceive colour based on a set of primary colours: red, green, and blue. If an individual experiences difficulties in perceiving one or more of these colours, this will result in a deviating colour view. As many as 1 in 12 men are colour blind, as opposed to 1 in 250 women. A complete inability to perceive colour is also possible (achromatopsy), but is very rare.
Due to the many types of colour disorders, we recommend avoiding the following color combinations:
- Red - green
- Black - red
- White - yellow
- Green - blue
The Colour Contrast Analyser allows users to simulate different types of colour blindness.
Links in texts
The following screenshot shows red links among black text.
When the same paragraph is shown in shades of grey, the red links become hard to distinguish from the black text.
A colourful background results in multiple colour contrasts. Make sure contrast ratio is sufficient for every colour combination. When this is impossible, replace the colourful background by an opaque one.
Colourful backgrounds can also cause issues for dyslexic users. Because of this, it is best to avoid them.
When seen in greyscale, almost none of our example's colours have a sufficient contrast ratio.