Color Contrast Checker
Check the contrast ratio between a text color and a background color against WCAG 2.2 AA and AAA, with an APCA score alongside. If a pair fails, pick one of the closest colors that pass.
This is how body copy looks in your colors. Click any text in this box to edit it and test your own words, labels, or links.
How to check color contrast
- Type or paste a hex code into Foreground color (your text) and Background color, or click a field to open the color picker.
- Read the contrast ratio and the pass or fail result for normal text, large text, and UI components.
- Check the preview. You can click the sample text to type your own words and see them in your colors.
- If the pair falls short, click one of the suggested colors to apply it, or use the swap button to flip text and background.
The page URL updates as you go (for example /contrast-checker/767676-ffffff/), so you can bookmark a pair or send it to a teammate.
WCAG contrast ratio requirements
The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratios for text and for interface elements. Level AA is the target most accessibility policies and laws point to. Level AAA is the stricter, enhanced level.
| What you’re checking | AA | AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
| UI components and graphics | 3:1 | Not defined |
- Large text means at least 18 point (24px) regular, or 14 point (about 18.66px) bold. Everything smaller counts as normal text.
- UI components and graphics covers things like input borders, icons, focus indicators, and the parts of a chart you need to understand it. They need 3:1 against the colors next to them (Success Criterion 1.4.11).
- Exceptions: logos, purely decorative text, text in inactive (disabled) controls, and incidental text inside a photo don’t have a contrast requirement.
The 4.5:1 minimum (Success Criterion 1.4.3) is meant to compensate for the contrast loss that comes with roughly 20/40 vision. The 7:1 enhanced level (Success Criterion 1.4.6) targets roughly 20/80 vision.
What the contrast ratio means
The contrast ratio compares the relative luminance (perceived brightness) of two colors: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. It runs from 1:1, for two identical colors, to 21:1, for black on white. Hue doesn’t factor in, so a red and a green with the same luminance score close to 1:1 even though they look different.
WCAG doesn’t allow rounding up. Gray #777777 on white comes out at 4.47:1, which fails AA for normal text, while #767676 reaches 4.54:1 and passes. This checker shows the ratio truncated to two decimals so a near miss never displays as a pass.
APCA contrast (Lc)
Next to the WCAG ratio, the tool shows an APCA score. APCA (Accessible Perceptual Contrast Algorithm) is the candidate contrast method for the future WCAG 3. It reports lightness contrast as an Lc value from 0 to about 105, and it accounts for polarity, so dark text on a light background can score differently from the same colors reversed.
APCA’s simple mode suggests these minimums:
- Lc 90: preferred for body text.
- Lc 75: minimum for body text.
- Lc 60: minimum for other text people need to read, such as labels and short content.
- Lc 45: minimum for large, heavy text like headlines (36px regular or 24px bold).
- Lc 30: absolute minimum for any text, including placeholder and disabled text.
WCAG 3 is still a draft, so WCAG 2.2 is the standard to meet for compliance today. APCA is useful as a second opinion, especially for dark mode designs and light text on saturated colors.
How to fix colors that fail
When a pair falls below 4.5:1, the checker suggests the closest text color and the closest background color that pass. Between 4.5:1 and 7:1 it suggests the closest colors that reach AAA. Suggestions keep the original hue and mainly change lightness, so a brand blue stays blue.
- Darken the text or lighten the background (or the reverse for dark mode). Small lightness changes often move a pair from fail to pass.
- If a brand color has to stay exact, use it for large text, icons, or backgrounds behind dark text, where the 3:1 minimum applies.
- Build a lighter and darker range of your color with the color shades generator, then test the steps here.
Check contrast from an image
Click Pick colors from an image under the color fields to upload a screenshot or mockup, paste an image URL, or choose an Unsplash photo. The image opens in the preview with two markers, one for the text color and one for the background. Drag each marker over the area you want to sample (or select it and use the arrow keys), and the ratio updates as you go. Click Done to return to the text preview.
To grab a single color from anywhere on your screen instead, use the color picker.