Color Contrast Checker — test any two colors against WCAG AA and AAA
Live WCAG 2.2 verdicts for text and UI components, the nearest color that passes, APCA, color-blind previews, and a matrix for your whole palette.
How it works
-
Pick two colors
Type any CSS color — hex, rgb(), hsl(), oklch() or a name — use the picker, or grab a color from your screen with the eyedropper.
-
Read every verdict
The ratio updates as you type, with pass or fail for normal text, large text and UI components at AA and AAA, plus APCA and color-blind previews.
-
Fix it and share
One click applies the nearest passing color that keeps your hue. Copy a link to the exact pair, or test every pair in a palette at once.
What a contrast checker tells you
Contrast is the difference in brightness between text and what sits behind it. Too little, and words blur into the background for people with low vision, for the roughly 1 in 12 men and 1 in 200 women with a color-vision deficiency, for older eyes, and for anyone reading a phone in sunlight. The Web Content Accessibility Guidelines (WCAG) turn "readable" into a number — the contrast ratio — and that number is what auditors, procurement checklists and courts use. This checker calculates it exactly the way WCAG defines it, tells you which levels a pair passes, and shows you the smallest change that fixes a failing one.
WCAG contrast requirements at a glance
| What it applies to | Level AA | Level AAA | Success criterion |
|---|---|---|---|
| Normal text (under 24px, or under 18.7px bold) | 4.5:1 | 7:1 | 1.4.3 · 1.4.6 |
| Large text (24px and up, or 18.7px bold and up) | 3:1 | 4.5:1 | 1.4.3 · 1.4.6 |
| UI components and graphics (input borders, focus rings, icons, chart lines) | 3:1 | — | 1.4.11 |
Level AA is the bar almost every law points to: the ADA in the United States, Section 508 for US federal sites, and EN 301 549, the standard behind the European Accessibility Act that has applied to most consumer-facing businesses in the EU since June 2025. Logos, disabled controls and purely decorative text are exempt. Placeholder text and error messages are not.
How to fix a failing pair with the smallest change
Change lightness, keep the hue
When a pair fails, the checker searches for the closest color that passes — for the text and, separately, for the background. It moves only the OKLCH lightness, a perceptual scale where equal steps look equally different, so your brand indigo stays indigo and just gets darker or lighter. Pick whichever side of the pair is easier to change in your design system; often a single text token fixes dozens of screens.
Check every state, not just the default
Most contrast failures in audits are not the body copy designers checked. They are the states nobody looked at: link and button hover colors, focus rings, visited links, light grey placeholders, error messages in red on pink, captions over photos, and text on gradients, where the weakest point of the gradient is the one that counts. Run each of those through the checker before you ship.
Be careful with "large text"
The 3:1 threshold only applies at 24px regular or about 18.7px bold. A 20px heading in a regular weight is still normal text and needs 4.5:1. And the formula only sees color, not stroke width: a thin, light-weight font at the minimum ratio reads worse than a sturdy one, so leave headroom for delicate typefaces.
Beyond the ratio: APCA and color blindness
WCAG 2's ratio is the legal standard, but it has known blind spots — it overrates some light-on-dark pairs and underrates mid-tones, which matters for dark mode. APCA, the method being developed for WCAG 3, models perception more closely and reports a lightness contrast value (Lc) with a sign for polarity. The checker shows it as a second opinion: roughly Lc 75 and above for body text, 60 for larger content text, 45 for headings.
The color-vision previews simulate protanopia, deuteranopia, tritanopia and achromatopsia with the same model browser devtools use. Contrast usually survives, because it is about brightness rather than hue — but a red error and a green success state can become the same brown. That is why WCAG 1.4.1 asks that color is never the only way information is shown: add an icon, a label or an underline.
Test a whole palette at once
Switch to Palette matrix, paste up to eight colors — your design tokens, a brand guide, a client's style sheet — and every text-on-background combination is scored in one grid for the level you choose. It is the quickest way to write down which pairs a team may use, and the link you copy reopens the exact palette for a colleague or a client.
From one pair to every page
A checker answers "do these two colors pass?" Real pages raise harder questions: text over images, colors a CMS editor picked, a stylesheet a release changed. Our free SEO & AI visibility audit includes a structural accessibility pass with axe-core, and the accessibility checker runs the full rule set in a real browser. Monity goes one step further: it renders your pages in a real browser with their real CSS on a schedule, runs the same WCAG checks every time, and alerts you in Slack, Teams or email when a deploy introduces new contrast failures — only the new ones, so the alert means something.
FAQ
Common questions
What contrast ratio does WCAG AA require?
For WCAG 2.2 level AA: 4.5:1 for normal text, 3:1 for large text (success criterion 1.4.3), and 3:1 for user-interface components and meaningful graphics such as input borders, focus indicators and icons (1.4.11). Level AAA raises text to 7:1, or 4.5:1 for large text (1.4.6). AA is the level the ADA, Section 508, EN 301 549 and the European Accessibility Act point to.
What counts as large text?
WCAG defines large text as at least 18 point regular or 14 point bold. In CSS pixels that is 24px regular or about 18.7px bold. Anything smaller is normal text and needs the higher ratio. Very thin or decorative typefaces can need more contrast than the minimum, because the formula only looks at color, not stroke width.
How is the contrast ratio calculated?
Each color is converted to its relative luminance — how bright it looks, from 0 for black to 1 for white, weighted for how sensitive the eye is to red, green and blue. The ratio is (lighter + 0.05) ÷ (darker + 0.05), which runs from 1:1 (same color) to 21:1 (black on white). This tool truncates rather than rounds, so a ratio of 4.499 shows as 4.49 and fails, exactly as an auditor would count it.
What is APCA, and should I use it instead?
APCA (Accessible Perceptual Contrast Algorithm) is the method being developed for WCAG 3. It models perception more closely, handles dark mode better, and gives a lightness contrast value (Lc) instead of a ratio. It is not part of any law or standard yet, so use it as a second opinion: pass WCAG 2.2 for compliance, and look at APCA when a pair passes on paper but still reads poorly.
Do logos, disabled buttons and placeholder text need to pass?
Logos and brand names are exempt, as are disabled (inactive) controls and purely decorative text. Placeholder text is not exempt: if it carries information, it needs 4.5:1 like any other text — a frequent audit failure, because placeholders are usually light grey.
Are my colors sent anywhere?
No. Every calculation runs in your browser; nothing is uploaded and there is no account. The only place your colors go is the page address, so that "Copy link" can share the exact pair or palette.
How do I check contrast across my whole website?
This tool checks the colors you give it. Real pages add hover and focus states, text over images, and CSS that changes between releases. Monity runs axe-core on your live pages in a real browser, with their real stylesheets, and alerts you in Slack, Teams or email when a deploy introduces new contrast or accessibility failures. The free plan includes 3 monitors.
Your colors pass today.
Monity checks them after every deploy.
Monity checks your real pages with their real CSS and alerts you in Slack, Teams or email when a release introduces new contrast or accessibility failures.
- Free 7-day trial
- No credit card
- 3 monitors free, forever