WCAG Contrast Checker
Check colour contrast against WCAG AA and AAA, and fix failing pairs.
Runs entirely in your browser.
Your data never leaves this device and is never sent to our servers.
Large heading text
Body copy at the default size. If this is hard to read, the ratio is telling you the truth.
—
contrast ratio
Contrast is the accessibility rule most often broken, and the easiest to verify. WCAG requires a ratio of at least 4.5:1 for body text and 3:1 for large text or interface components.
This checker computes the ratio from relative luminance, shows the pass or fail for each level, and can nudge one of the colours until it passes.
How to use it
- Enter your foreground and background colours.
- Read the ratio and the AA and AAA results.
- Use the fix suggestion if a combination fails.
Not working as you expect? Report a problem with this tool.
Frequently asked questions
What ratio do I need?
4.5:1 for normal body text at AA, 3:1 for text 18pt or larger and for UI components, and 7:1 for AAA.
Does this apply to placeholder text?
Yes. Low-contrast placeholder text is one of the most common failures, and it is text users genuinely need to read.
Do logos need to pass?
No. Logotypes are explicitly exempt from the contrast requirement.