WCAG Contrast Checker

Contrast checker for WCAG AA and AAA compliance

This contrast checker measures the contrast ratio between a text color and a background color and tells you whether the pair passes WCAG 2.2 level AA and AAA. You get the ratio, a pass or fail result for each text size, an APCA score and suggested fixes. 66Colorful runs it in your browser for free, with no signup.

How to check color contrast step by step

You can test a color pair in under a minute. The results update as you type, so there is no submit button.

1. Type a value into Text color (foreground), or use the color picker next to it. HEX, RGB, HSL and CSS color names all work.
2. Type a value into Background color the same way.
3. Read the large ratio at the top of WCAG and APCA Contrast Results, plus the badges for AA normal, AAA normal, AA large and UI 3:1.
4. Check the table below it for the exact criterion, level, minimum and Pass or Fail result.
5. If something fails, open Suggested Accessible Color Fixes and click a suggestion to apply it.
6. Use Swap colors to test the reverse pairing, such as light text on a dark background.

Want a quick start? The Common color pairs buttons load examples such as Black on white, AA gray text, Dark mode and White on amber.

WCAG contrast ratio requirements at a glance

WCAG 2.2 uses three minimum ratios in everyday design: 3:1, 4.5:1 and 7:1. Which one applies depends on text size and on whether you target level AA or AAA. The W3C explanation of Contrast (Minimum) covers the AA rule in detail.

What counts as large text for WCAG contrast?

Large text is at least 24px regular, or at least 18.66px (14pt) bold. Anything smaller is normal text and needs the higher ratio. The live preview in the tool shows 12px, 16px, 19px bold and 24px samples so you can see where your pair holds up.

How is the WCAG contrast ratio calculated?

The ratio compares the relative luminance of two colors: (lighter + 0.05) divided by (darker + 0.05). Results range from 1:1 (identical colors) to 21:1 (black on white). The formula is defined in the WCAG 2.2 definition of contrast ratio.

Contrast ratio worked example with #767676 on white

Relative luminance weights red, green and blue after converting each sRGB channel to linear light. For #767676 that gives about 0.181, and white is 1.0. The ratio is (1.0 + 0.05) / (0.181 + 0.05), which is about 4.54:1, so the pair passes AA for normal text but fails AAA.

Now compare #777777 on white. That ratio is about 4.48:1, which fails AA. One step in the hex value flips the result, so check exact values instead of judging by eye.

The checker shows the ratio rounded down, so 4.499:1 appears as 4.49:1 and fails AA. This avoids a misleading pass from rounding up.

Contrast checker features you can use

• Flexible color input: type HEX, RGB, HSL or a CSS name, use the native color picker, or use the eyedropper where your browser supports it.
• AA and AAA results: normal text, large text and UI components are each marked Pass or Fail.
• Text opacity slider: test translucent text, covered below.
• APCA Lc score: a second opinion marked Draft.
• Color blindness contrast check: the ratio is recalculated for Normal, Protanopia, Deuteranopia, Tritanopia and Achromatopsia.
• Live preview: body text, headings, buttons, a tag, an input, icons and a link, with a vision-type switch.
• Color values: HEX, RGB, HSL, OKLCH and CMYK for both colors, each with a copy button. CMYK is approximate, so use a printer profile for print work.
• Export options: Copy results, Copy CSS, Export JSON, Download report and Share link.

How does the contrast checker handle transparent text?

Move the Text opacity slider below 100% and the tool blends the text with the background first, the way a browser draws it. The ratio is then measured on that blended color, and a note shows the blended HEX value. You can also paste an 8-digit HEX, rgba() or hsla() value and the slider sets itself.

APCA contrast score and why it is marked draft

APCA (Accessible Perceptual Contrast Algorithm) reports a signed Lc value instead of a ratio. Positive values mean dark text on a light background, and negative values mean light text on dark. It is a candidate for a future WCAG version, not a WCAG 2 requirement, so treat it as a reference next to the WCAG ratio.

Fixing a failing color contrast pair, keeping the hue

When a pair fails, the tool offers new text colors, new background colors and sometimes a higher text opacity that reach the next level. Each color suggestion keeps the original hue and changes lightness only as far as needed, using the smallest CIEDE2000 color difference. That keeps your brand color recognizable.

Each suggestion lists the resulting ratio, the level it reaches and its Delta E. Click one to apply it, then check the result in the preview. If no lightness-only change reaches the next level, the tool says so and suggests trying another hue or a higher opacity.

You can also adjust a color yourself with the interactive color wheel, or convert values first with the color converter.

Color contrast tips for buttons, dark mode and links

Accessible color contrast depends on the role a color plays, not only on the text. The same palette can pass in one place and fail in another, so test each role separately.

• Solid buttons: test the label against the button fill. Also check the button fill against the page background, because a button whose edge cannot be seen may fail the 3:1 UI rule.
• Dark mode: pure white on pure black can feel harsh. The Dark mode preset, #E5E7EB on #111827, gives about 14.3:1 and still reads comfortably.
• Links: the Link blue preset, #2563EB on white, gives about 5.1:1. Links inside body text should also be distinguishable from the surrounding text, for example with an underline.
• Brand colors: a color that fails as text can still work as a large fill. White on #3273DC is about 4.54:1, a narrow AA pass for normal text.

How to read the color blindness contrast check

The Color Blindness Contrast Check panel shows your pair as it would appear under four types of color vision deficiency, each with its recalculated ratio and an AA badge at 4.5:1. The simulation uses the Machado et al. (2009) model at full severity.

A pair that passes under Normal but fails under Protanopia or Deuteranopia usually relies on a red and green difference instead of a lightness difference. Increase the lightness gap between the two colors. The tool's fixes do exactly that.

Common color contrast mistakes to avoid

• Judging by eye: mid-tones such as gray on white or white on amber look fine on a bright monitor. White on #F59E0B is only about 2.14:1.
• Forgetting hover, disabled and placeholder states: test every state. Placeholder text needs 4.5:1 too, and the preview input shows it.
• Ignoring text over images: measure against the lightest and darkest area behind the text, not an average.
• Skipping UI elements: icons, input borders and focus rings need 3:1 under Non-text Contrast.
• Relying on color alone: contrast does not replace labels, underlines or icons for people who cannot tell certain hues apart.
• Treating AAA as mandatory: most policies reference AA. Aim for AAA on long reading text where you can.

Who uses a color contrast checker?

Designers use a color contrast checker to approve palettes before handoff. Developers use it to confirm CSS variables and component states. Content teams and accessibility auditors use it to document a pass or fail result.

The Download report and Export JSON actions create a record with the ratio, the AA and AAA results, APCA, Delta E and color vision ratios. Share link copies a URL that restores the same colors, so a teammate sees exactly what you tested.

Next steps after running the contrast checker

For a whole palette, run the palette contrast grid or the palette accessibility audit. To compare vision types in more depth, open the color blindness simulator. For keyboard focus rings, use the focus indicator checker, and to start with safe colors, try the color safe palette builder.