Using colour
Contrast and accessibility
Text needs enough difference in lightness from its background to be read. Web guidelines set a minimum ratio of 4.5 to 1.
Presented by ClearTrust Free for designers, students and the curious.
Text is readable when it is much lighter or much darker than what lies behind it. The Web Content Accessibility Guidelines, known as WCAG, put a number on this. Normal text should have a contrast ratio of at least 4.5 to 1 against its background, and large text at least 3 to 1. Meeting it helps people with poor sight, and everyone reading a phone in sunlight.
#595959Text #767676 on white: 4.5#767676Text #999999 on white: 2.8, fails#999999White background#FFFFFFThe contrast ratio
The ratio compares the brightness of two colours, using a measure called relative luminance that weights green most and blue least, as the eye does. It runs from 1 to 1, for two identical colours, to 21 to 1, for black on white. Hue does not enter into it. Red on green can have a ratio near 1 and be close to unreadable, however different the two look in a colour picker. Mid grey text on white, a long-running fashion in web design, often fails. Free online checkers work it out from two hex codes.
The levels
WCAG is published by the World Wide Web Consortium and has three levels of conformance. Level AA, the usual legal and professional target, asks for 4.5 to 1 for body text and 3 to 1 for large text, meaning about 24 pixels, or 19 pixels if bold. Icons, form borders and other essential graphics also need 3 to 1. The stricter level AAA asks for 7 to 1 for body text. Many countries refer to these guidelines in law for public websites, and India's guidelines for government websites draw on them too.
Beyond the number
Passing the ratio does not guarantee comfort. Thin type needs more contrast than bold. Pure white text on pure black can seem to glare, and many dark designs use an off-white. The current formula is known to misjudge some pairs, especially with dark backgrounds, and a revised method is being developed for a future version. A second rule matters as much: colour must never be the only signal. An error should have an icon or words as well as red, and a link should be underlined or otherwise marked.
How to do it
- Take the hex codes of your text colour and background colour.
- Enter them in a contrast checker.
- For body text, aim for 4.5 to 1 or more. For large headings and icons, 3 to 1.
- If it fails, darken the darker colour or lighten the lighter one. Changing hue alone rarely helps.
- Check the page in greyscale and in bright light on a phone.
Sources and further reading
- Web Content Accessibility Guidelines on Wikipedia
- W3C: Understanding Success Criterion 1.4.3, Contrast (Minimum)
- WebAIM: Contrast and Color Accessibility
- WebAIM: Contrast Checker
- Guidelines for Indian Government Websites and Apps (GIGW)
Original text by the Rang desk, written with AI assistance and checked against the sources above. Meanings of colour vary from place to place and person to person. If we have something wrong, tell us.