Color Contrast

Check WCAG contrast ratios between foreground and background colors. See AA and AAA pass/fail for both normal and large text, so you know exactly which sizes a color pair is safe for.

Color

Check WCAG contrast between foreground and background. Use the swatches or enter hex values. You'll see AA and AAA pass/fail for normal text (4.5:1 and 7:1) and the looser large-text bars (3:1 and 4.5:1).

Colors

Foreground

Background

Preview & results

Ratio: 14.68:1

Normal textunder 18ptAA (4.5:1): PassAAA (7:1): Pass

Large text18pt+ or 14pt boldAA (3:1): PassAAA (4.5:1): Pass

What is WCAG color contrast?

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and background colors to make sure content is readable for people with visual impairments. Normal text needs at least a 4.5:1 contrast ratio for AA compliance, and 7:1 for AAA. Large text (18px+ bold or 24px+ regular) needs at least 3:1 for AA and 4.5:1 for AAA.

How to use this checker

Enter or pick your foreground (text) and background colors. The tool calculates the contrast ratio and tells you whether the combination passes WCAG AA and AAA standards for both normal and large text. Try different combinations until you find colors that look good and meet accessibility requirements.

Why contrast matters

About 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Low contrast text is harder to read in bright sunlight, on low-quality screens, or for anyone with aging eyes. Meeting WCAG contrast standards goes beyond compliance. More people can read your content on more screens.