Color Contrast Checker
This free contrast checker measures any foreground/background color pair against the WCAG 2.x contrast formula and tells you instantly whether text in that combination passes accessibility thresholds.
How to use
- Enter the foreground (text) color as a hex value, with or without the #.
- Enter the background color the text sits on, also as a hex value.
- Read the contrast ratio and the AA / AAA pass or fail badges, then adjust either color until the level you need passes.
Frequently asked questions
What do the AA and AAA thresholds mean?
They come from the W3C Web Content Accessibility Guidelines (WCAG 2.x). AA requires at least 4.5:1 for normal text and 3.0:1 for large text (roughly 18pt, or 14pt bold, and up); AAA raises the bar to 7.0:1 and 4.5:1. Meeting AA is the common legal and professional baseline.
How is the contrast ratio calculated?
With the official WCAG 2.x relative luminance formula: each channel is linearized, weighted (0.2126 red, 0.7152 green, 0.0722 blue) and combined, then the lighter color plus 0.05 is divided by the darker plus 0.05. Black on white gives (1.05)/(0.05) = 21:1, the theoretical maximum.
Does the threshold depend on text size?
Yes. Large text — roughly 18pt (24px) regular or 14pt (about 18.7px) bold and larger — only needs 3.0:1 for AA because bigger glyphs are easier to read at lower contrast. The same pair can pass for headings and fail for body text, which is exactly why the large-text threshold is shown separately.
Is a passing ratio enough for real accessibility?
Contrast is one important check, not the whole audit: focus states, hit target sizes, color-blind-safe semantics and screen-reader labels all matter too. Use this tool to eliminate the single most common failure, then test with real assistive technology before shipping.
Related tools
About this tool
This free contrast checker measures any foreground/background color pair against the WCAG 2.x contrast formula and tells you instantly whether text in that combination passes accessibility thresholds. Low-contrast text is the most common accessibility failure on the web: gray-on-gray that reads fine on your calibrated screen becomes unreadable on a cheap phone in sunlight, for low-vision readers, and for everyone over forty. Enter two hex colors — your text color and the background behind it — and the checker computes the contrast ratio using the official relative-luminance formula, then judges three thresholds: 4.5:1 for AA normal text, 7.0:1 for AAA normal text, and 3.0:1 for AA large text (18pt or 14pt bold and up). Pure black on pure white scores the maximum 21:1, so you can sanity-check the tool in one second. The calculation runs entirely in your browser: your palette never leaves your device, and nothing is uploaded or logged. Type your two colors below and tune the pair until it passes.