How to calculate colour contrast
There is a mathematical formula to calculate the contrast ratio between two colours. Using this formula for contrast evaluation is always better than relying only on your eyes.
Please note that we are keeping technical explanations simple here. If you want to read a detailed definition of the colour contrast formula, please go to contrast ratio (W3.org).
Contrast is calculated using "relative luminance", which is defined as:
The relative brightness of any point in a colorspace, normalized to
0for darkest black and
1for lightest white.
Quote: relative luminance (W3.org)
The relative luminance can be calculated from any colour code (like HEX or RGB).
To calculate the contrast ratio, the relative luminance of the lighter colour (
L1) is divided through the relative luminance of the darker colour (
(L1 + 0.05) / (L2 + 0.05)
This results in a value ranging from
1:1 (no contrast at all) to
21:1 (the highest possible contrast). While high contrast is generally good, higher is not always better. Research indicates that a moderate contrast somewhere between the extremes may be best.
As an aside: In everyday practice we don't have to do this calculation manually, there are many helper tools available. More on that on the next page.
Tone is not a key factor
For relative luminance, the tone of a colour (whether it is red, green, blue, yellow…) is not a key factor. After all, adequate contrast is also necessary for people who can't perceive certain colours or people who don't see colours at all.
This means that visually distinct colours don't automatically have a high contrast ratio. The following example demonstrates this.
- Red/blue =
- Blue/green =
- Green/red =
While visually non-impaired users might be able to easily perceive the green and red words on the blue background of the following image…
… others will have a very hard time differentiating between text and background. This is how it might look for someone who sees in grayscale:
It's therefore impotant to remember:
- Always examine contrast ratios as calculated values, don't just rely on your eyes. More on that in the next chapter "How to exampine colour contrast".
- Colour contrast has its limits, especially when multiple objects have to be clearly distinguishable not just from the background but also from each other. More on that in the chapter "Colour is not enough".