Colour contrast

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.

Testing methods

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.

Other tools:

• 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.

Examples

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.

Colourful backgrounds

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.

More information

• Atypical colour response: an article about colour blindness.
• Vischeck's Daltonize: an application that allows users to simulate multiple types of colour blindness.
• A list of tools regarding colour contrast.