Color Contrast Checker
Enter a text and a background color to see their WCAG contrast ratio — and, if it fails, the nearest colors that pass AA or AAA.
- WCAG 2.2
- Suggests fixes
- Color-blind preview
- APCA
Large text — 24 px or 19 px bold
Normal body text. The quick brown fox jumps over the lazy dog, and everyone should be able to read about it without effort.
The text color is partly transparent: the ratio is measured after blending it with the background.
Closest colors that pass
APCA — perceptual contrast
APCA is the contrast method proposed for WCAG 3. It reads the pair as text on background, so swapping the colors changes the value. Treat it as additional guidance: WCAG 2 ratios remain the legal reference today.
Color vision deficiencies
How the pair looks with the most common forms of color blindness, and the contrast ratio that remains.
How to check color contrast
Two colors, one verdict.
- 1
Enter both colors
Any CSS format works: HEX, rgb(), hsl(), oklch() or a color name. You can also use the picker.
- 2
Read the ratio
See at once which WCAG levels pass for normal text, large text and UI components, with a live preview.
- 3
Fix what fails
Apply one of the suggested colors — same hue, slightly lighter or darker — or drag the lightness sliders.
Not just pass or fail
It also shows you the way out.
Exact WCAG math
Relative luminance and ratio as defined in WCAG 2.2, shown with two decimals and never rounded up over a threshold.
Nearest passing color
For each failing level you get the closest text or background color that reaches it, keeping hue and saturation.
APCA score
The lightness contrast (Lc) of the newer perceptual method, with guidance on what text sizes it is good for.
Color-vision simulation
The pair as seen with protanopia, deuteranopia, tritanopia and without color vision, each with its remaining ratio.
Transparent text
A text color with alpha is blended with the background first, exactly as the browser draws it.
Realistic preview
Large and body text, a filled button, an outline button and icons in your two colors.
Shareable link
Copy a link that opens the tool with the same content. The data sits in the part of the address after #, which browsers do not send to servers.
Private by design
Everything runs in your browser. What you type or open is not sent to a server.
What the contrast ratio means
The WCAG contrast ratio compares the relative luminance of two colors on a scale from 1 : 1 (identical) to 21 : 1 (black on white). The Web Content Accessibility Guidelines require at least 4.5 : 1 for normal text and 3 : 1 for large text at level AA — the level referenced by most laws, including the ADA case law in the US, Section 508 and the European Accessibility Act via EN 301 549.
Large text means at least 24 px, or 18.66 px (14 pt) when bold. Level AAA raises the bar to 7 : 1 and 4.5 : 1. Since WCAG 2.1, user-interface components and meaningful graphics — input borders, icons, chart lines, focus indicators — also need 3 : 1 against their surroundings. Logos, decorative elements and disabled controls are exempt.
The ratio is a simple model and has known blind spots: it overrates dark color pairs and ignores font weight. APCA, a candidate method for the future WCAG 3, models perception more closely and depends on which color is the text. It is shown here as additional guidance. For compliance today, the WCAG 2 ratio is what counts — and good contrast helps everyone, not only the roughly 1 in 12 men with a color-vision deficiency: think of a phone screen in sunlight.
WCAG 2.2 contrast requirements
| Content | Level AA | Level AAA |
|---|---|---|
| Normal text (below 24 px, or below 18.66 px bold) | 4.5 : 1 | 7 : 1 |
| Large text (24 px+, or 18.66 px+ bold) | 3 : 1 | 4.5 : 1 |
| Icons, input borders, UI components | 3 : 1 | not defined |
| Logos and purely decorative elements | no requirement | no requirement |
Tips
- Convert a color to HEX, RGB or OKLCH first with the Color Converter.
- Check a whole palette pair by pair in the contrast grid of the Palette Generator.
- Pick the real colors from a screenshot with the Pixel Picker.
- Do not rely on color alone: links inside text should also be underlined, and error states need an icon or message besides the red.
Frequently asked questions
Can’t find your answer? Contact us — we reply quickly.
What contrast ratio do I need for WCAG AA?
At least 4.5 : 1 for normal text and 3 : 1 for large text (24 px, or 18.66 px bold). Icons and interface components such as input borders also need 3 : 1.
What counts as large text?
Text of at least 18 pt (24 px), or at least 14 pt (about 18.66 px) when it is bold. Everything smaller is normal text.
Is a ratio of 4.49 : 1 enough?
No. The thresholds are exact, so 4.49 : 1 fails AA for normal text. This checker never rounds a ratio up, to avoid false passes.
What is APCA?
The Accessible Perceptual Contrast Algorithm, a newer method being evaluated for WCAG 3. It gives a lightness contrast value (Lc) that tracks readability better, especially for dark themes. It is not yet a legal standard.
How do I fix a failing color pair?
Make the darker color darker or the lighter one lighter. The suggestions show the smallest lightness change that reaches AA or AAA while keeping the hue, and one click applies them.
Is my data sent to a server?
No. The tool runs entirely in your browser. Your input is not uploaded, logged or stored on our servers.
More free developer tools
Encode, format, test, convert and generate — small tools that run in your browser and keep your data on your device.