👁️ Color Contrast Checker
Check WCAG color contrast ratio between two colors. Verify accessibility compliance for AA and AAA — all in your browser, no upload, instant results.
About the Color Contrast Checker
This color contrast checker runs entirely in your browser. Pick a foreground (text) color and a background color, and the tool computes the WCAG contrast ratio and tells you whether the combination passes AA and AAA levels for both normal and large text. Nothing is uploaded to a server — all calculations happen locally with JavaScript.
WCAG conformance levels
- AA Normal text — Requires a contrast ratio of at least 4.5:1.
- AA Large text — At least 18pt (24px) or 14pt (18.66px) bold. Requires 3:1.
- AAA Normal text — Requires a contrast ratio of at least 7:1.
- AAA Large text — Requires a contrast ratio of at least 4.5:1.
How contrast is calculated
- Convert each color from sRGB to a linear RGB value (gamma decoding).
- Compute the relative luminance:
L = 0.2126·R + 0.7152·G + 0.0722·B. - Contrast ratio =
(L1 + 0.05) / (L2 + 0.05)where L1 is the lighter of the two.
How to use
- Use the foreground color picker to choose your text color.
- Use the background color picker to choose your background color.
- Read the contrast ratio and the WCAG pass/fail badges.
- Adjust either color until the desired conformance level is met.
Frequently asked questions
Does this tool upload my colors? No. All calculations happen locally in your browser.
What counts as "large text"? Per WCAG, large text is at least 18pt (24px) regular, or 14pt (18.66px) bold.
Does this verify full WCAG compliance? It checks color contrast only. Full WCAG compliance involves many other criteria (text resize, focus indicators, etc.).
Are non-text elements covered? For non-text UI components (icons, borders), WCAG requires 3:1 against adjacent colors. You can use this tool to check that too.