Developer tools
Color contrast checker
Pick a text color and a background color and see the WCAG contrast ratio, with AA and AAA pass or fail badges for normal and large text. Everything runs in your browser - nothing is uploaded.
Normal text sample
Large text sample
How it works
Check whether two colors have enough contrast to be readable, the way the Web Content Accessibility Guidelines (WCAG) measure it. Pick a text color and a background color and the tool computes the contrast ratio between them, a number from 1:1 (identical) to 21:1 (black on white), and shows a live preview of real text so you can see the result as well as read the figure.
The ratio is checked against the WCAG thresholds and pass or fail badges light up for each level: AA needs at least 4.5:1 for normal text and 3:1 for large text, while the stricter AAA needs 7:1 and 4.5:1. Large text means roughly 18.66px bold or 24px and up. Everything runs in your browser using the official relative-luminance formula, so nothing you enter is uploaded.
Example. Mid-grey text (#777777) on white scores about 4.48:1 - it just fails AA for normal text but passes for large text. Darken it to #595959 and the ratio rises to about 7:1, which passes AA and AAA for normal text, so the badges flip to pass.
FAQ
What contrast ratio do I need to pass WCAG?
For normal body text, WCAG AA requires a contrast ratio of at least 4.5:1 and the stricter AAA requires 7:1. For large text - about 18.66px and bold, or 24px and larger - the thresholds drop to 3:1 for AA and 4.5:1 for AAA. User interface components and meaningful graphics need at least 3:1. This tool shows a pass or fail badge for each of these levels.
How is the contrast ratio calculated?
It is based on relative luminance, a measure of how light each color appears once its red, green, and blue channels are gamma-corrected and weighted for human vision. The ratio is (lighter luminance + 0.05) divided by (darker luminance + 0.05), which ranges from 1:1 for two identical colors up to 21:1 for black on white. It is the exact formula defined by WCAG.
What counts as large text?
WCAG defines large text as at least 18 point (about 24px) for regular weight, or at least 14 point (about 18.66px) when bold. Large text is given a lower contrast requirement because bigger, heavier letterforms stay legible at a lower ratio. If your text is below those sizes, use the normal-text thresholds.
Is my color data sent anywhere?
No. The luminance and ratio are simple math that runs entirely in your browser. Nothing you pick or type is uploaded, logged, or stored, so the checker works offline once the page has loaded.