Colour Contrast Checker
Low contrast makes text hard to read for people with low vision, on a phone in sunlight, or on a cheap screen. The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratios, and many public bodies require them.
Everything above runs in your browser and saves to this device only. Pick a text and a background colour. The preview, the ratio, and the pass or fail results update at once.
How it works
The ratio compares the relative luminance of the lighter colour with the darker one.
L = 0.2126 R + 0.7152 G + 0.0722 B, after converting each sRGB channel to linear light
AA: 4.5 to 1 for normal text, 3 to 1 for large text and interface parts
AAA: 7 to 1 for normal text, 4.5 to 1 for large text
Large text means 24 px, or 18.66 px in bold. When a pair fails, the tool suggests the nearest text colour that passes AA, found by changing lightness only.
Frequently Asked Questions
What is a good colour contrast ratio?
WCAG 2 level AA requires a contrast ratio of 4.5 to 1 for normal text and 3 to 1 for large text and interface parts. Level AAA requires 7 to 1 for normal text.
How is the contrast ratio calculated?
The contrast ratio is (L1 + 0.05) divided by (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 that of the darker one. Ratios run from 1 to 1 up to 21 to 1.
What counts as large text in WCAG?
Large text in WCAG is 24 pixels or larger, or 18.66 pixels and bold. It needs a lower contrast ratio because it is easier to read.
Can brand colours fail contrast checks?
Yes, brand colours often fail for normal text. A failing brand colour can still be used for large headings, borders, or fills with dark or light text on top. The palette check shows which pairings are safe.
Is this Colour Contrast Checker free?
Yes. The Colour Contrast Checker is free and opens straight away in any modern browser, including on a phone. Everything you enter is processed in your browser and stays on your device.