Contrast ratio with WCAG 2.2 AA and AAA results for text and UI Accepts HEX, RGB, HSL, OKLCH and CSS color names, plus color pickers Handles transparent colors by blending them like the browser does Live preview with heading, body text, small print and a button Suggests the closest passing color by adjusting only lightness

Color Contrast Checker - WCAG AA & AAA Accessibility Test

What is color contrast and why does it matter?

Contrast ratio measures the difference in perceived brightness between two colors, from 1:1 (identical) to 21:1 (black on white). The Web Content Accessibility Guidelines (WCAG 2.2) require at least 4.5:1 for normal text and 3:1 for large text and interface elements at level AA, and 7:1 / 4.5:1 at level AAA. Around one in twelve men has a color vision deficiency and many people read on phones in bright sunlight, so low-contrast text excludes real users. Accessibility laws such as the European Accessibility Act and the ADA reference WCAG AA, which makes contrast a legal requirement for many sites.

Features

• Contrast ratio with WCAG 2.2 AA and AAA results for text and UI
• Accepts HEX, RGB, HSL, OKLCH and CSS color names, plus color pickers
• Handles transparent colors by blending them like the browser does
• Live preview with heading, body text, small print and a button
• Suggests the closest passing color by adjusting only lightness

Instant and private

All calculations run in your browser. The colors of unreleased designs are never sent anywhere.

WCAG 2.2 formula, 100% client-side.

How to use the Contrast Checker

1
Enter the text color and the background color, by typing any CSS color (#1e293b, rgb(), hsl(), oklch() or a name) or by using the color pickers.
2
Read the contrast ratio. The result is truncated, not rounded up, so 4.49:1 never shows as a pass.
3
Check the five WCAG results: AA and AAA for normal and large text, plus 3:1 for UI components such as input borders, icons and focus rings.
4
If a check fails, look at the suggested color with the same hue but adjusted lightness and click Use it, or swap the colors to test the inverse.

Practical examples

Gray placeholder text

Tailwind gray-400 (#9ca3af) on white is only 2.5:1 and fails AA. gray-500 (#6b7280) reaches 4.8:1 and passes for body text.

Brand color on buttons

A light brand blue may pass for large button labels (3:1) but fail for small text. Check both, or darken the button background until white text passes 4.5:1.

Dark mode palettes

Pure white on pure black (21:1) can feel harsh. Test softer pairs such as #e2e8f0 on #0f172a, which still exceed AAA at about 14:1.

Form borders and icons

WCAG 1.4.11 asks 3:1 for the boundary of inputs and meaningful icons. A #e5e7eb border on white is far below that and makes fields hard to find.

Frequently asked questions

What counts as large text?+

In WCAG, large text is at least 18pt (24px) regular, or 14pt (about 18.66px) bold. Large text only needs 3:1 at level AA because thicker strokes are easier to read.

Do I need AA or AAA?+

AA is the standard legal target for most websites and apps. AAA is stricter and recommended for long-form reading, government services and audiences with low vision.

Does contrast apply to logos and disabled buttons?+

No. WCAG exempts logos, decorative images and inactive (disabled) controls. Placeholder text, links and focus indicators are covered.

What about APCA and WCAG 3?+

APCA is a newer contrast model proposed for the future WCAG 3. It is still a draft, so WCAG 2.2 ratios remain the requirement used by laws and audits today.