Color Contrast Checker
Check foreground-background color contrast against WCAG 2.1 AA and AAA thresholds for text and UI.
Tool code processes selected files and entered content in your browser and does not submit them to a TOOLGRID processing endpoint. TOOLGRID measures tool usage, not the content you enter.
- No TOOLGRID input upload
- No account
- Review before copy
Loading tool…
What this tool does
Enter two colors and instantly see the WCAG 2.1 contrast ratio plus pass/fail results for normal text, large text, and non-text UI components.
Color Contrast Checker computes the exact luminance-based contrast ratio between a foreground and background color.
It flags compliance with WCAG 2.1 AA and AAA thresholds for normal text (4.5:1, 7:1), large text (3:1, 4.5:1), and non-text UI (3:1).
Where this tool earns its place
Color Contrast Checker computes the exact luminance-based contrast ratio between a foreground and background color.
What to check before relying on the result
- Performance and maximum practical input size depend on browser memory, device speed, and the structure of the input.
- Review the generated result before replacing or publishing an original file.
Open a nearby browser tool when you need to validate, convert, or reuse the result.
How to use
01FAQ
02What's the difference between AA and AAA?
AA is the baseline required by most accessibility regulations. AAA is a stricter enhanced level. For normal text, AA is 4.5:1 and AAA is 7:1; for large text, AA is 3:1 and AAA is 4.5:1.
What counts as large text?
WCAG defines large text as at least 18pt (24px) regular, or 14pt (18.66px) bold. Anything smaller falls under the normal text thresholds.
How is the ratio calculated?
We follow WCAG 2.1's formula: convert each color to sRGB relative luminance, then compute (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter of the two. The ratio ranges from 1:1 to 21:1.