Colour Contrast Checker
Check whether a text colour is readable on a background colour under the WCAG accessibility standard. Nothing is uploaded — the maths runs in your browser.
Contrast ratio: —
How the WCAG contrast ratio is calculated
The Web Content Accessibility Guidelines define contrast as the ratio between the relative luminance of two colours, from the lighter to the darker. First each sRGB channel is linearised, then a relative luminance L is formed as 0.2126 R + 0.7152 G + 0.0722 B; the ratio is (Llighter + 0.05) / (Ldarker + 0.05). A ratio runs from 1:1 (identical colours) up to 21:1 (black on white).
Which threshold applies?
- Normal text — AA needs at least 4.5:1; AAA needs 7:1.
- Large text (roughly 18pt, or 14pt bold, and above) — AA needs 3:1; AAA needs 4.5:1.
- UI components and graphical objects (WCAG 1.4.11) need 3:1 against adjacent colours.
This is the same rule set used by the accessibility audits behind our own page colours. When you are preparing a document photo or a print sheet, colour and lighting matter for a different reason — the photo size chart and the passport photo checker cover the photographic side.
Frequently asked questions
Is my colour data sent anywhere?
No. The conversion and the ratio are computed in your browser with built-in JavaScript; no colour you enter leaves your device.
Why does a colour pair pass for large text but fail for normal text?
Large text has a lower minimum ratio because thicker strokes are easier to read at low contrast, so a pair that fails the 4.5:1 normal-text rule can still satisfy the 3:1 large-text rule.
Does a passing ratio guarantee my page is accessible?
No — contrast is one requirement. Text size, font, focus states and alternative text are checked separately; this tool only measures the colour-pair ratio.
Can I use any colour format?
Enter six-digit hex values such as #1a1a1a (the leading # is optional). Three-digit shorthand like #abc is expanded automatically.
What is the highest possible contrast?
Black on white, at 21:1. Because the formula adds 0.05 to each luminance before dividing, you cannot reach a higher value with any pair of sRGB colours.