Contrast Checker

Q: What contrast ratios do I need to pass WCAG?

Normal text: AA 4.5:1 and AAA 7:1. Large text (24px regular or 18.66px bold): AA 3:1 and AAA 4.5:1.

Q: Does transparency (alpha) affect contrast?

Yes. This checker composites foreground over background before calculating the contrast ratio.

Q: How do I know if my text counts as ‘large’?

Large text is ≥24px regular weight or ≥18.66px when bold.

Q: What if my color pair fails?

Adjust the lightness—darker text on light backgrounds or lighter on dark backgrounds—to reach the target ratio.

Q: Why do print CMYK values look different from screen colors?

CMYK is print-oriented; WCAG contrast is defined in sRGB for screens.

Q: Is this a full accessibility audit?

No. It only measures contrast. You also need good semantics, focus styles, and keyboard support.

Enter a foreground and background color (supports HEX, RGB/A, HSL/A, HSV and names). Adjust alpha, font size and weight. Get live WCAG 2.2 results for AA and AAA with a realistic preview.

Bold Font size px

The quick brown fox jumps over the lazy dog 1234567890

— AA (normal): — AAA (normal): — AA (large): — AAA (large): —

Tip: try adjusting alpha or size to see thresholds change.

Foreground—

Background—

Composite FG (over BG)—

CSS Variables--fg: #111827; --bg: #ffffff;

Contrast Checker — FAQs

What contrast ratios do I need to pass WCAG?

For normal text, AA requires 4.5:1 and AAA requires 7:1. For large text (24px regular or 18.66px bold), AA requires 3:1 and AAA requires 4.5:1. Icons and UI visuals follow the non‑text contrast rule (3:1 for key parts).

Does transparency (alpha) affect contrast?

Yes. The readable color is the composite of foreground over background. This tool blends alpha over the background before calculating the ratio so you see the real result.

How do I know if my text counts as “large”?

WCAG defines large text as ≥ 24px regular weight or ≥ 18.66px when bold. Toggle Bold and tweak Font size to see the large‑text thresholds applied automatically.

What if my color pair fails?

Try nudging the lightness: make the foreground darker on light backgrounds or lighter on dark backgrounds. Small shifts often push the ratio over the threshold without breaking your brand feel.

Why do print CMYK values look different from screen colors?

CMYK is device‑dependent and tuned for ink, while contrast standards are defined in sRGB for screens. Always test contrast in screen color spaces for web and app interfaces.

Is this a full accessibility audit?

No—contrast is one piece. Also check focus styles, hit targets, semantics, and keyboard support. But solid contrast is a big win for readability and reduces user fatigue.

Keywords: contrast checker, WCAG contrast ratio, AA AAA contrast, text accessibility, foreground background contrast, alpha transparency contrast, large text rule, UI contrast testing.