Color Accessibility Checker

Check WCAG contrast ratio between two colors for accessibility compliance.

Text Color*

Background Color*

Your result will show up here

Copied

How To Use Color Accessibility Checker

Pick your text color

Enter the foreground (text) color as a hex code or use the color picker.

Pick your background color

Enter the background color the text will sit on.

Read the contrast ratio

The tool calculates the exact WCAG 2.1 contrast ratio between the two colors.

Check pass/fail badges

See at a glance whether the pair passes AA, AA Large, and AAA thresholds.

Adjust if needed

If a threshold fails, darken or lighten one color and re-check until it passes.

Frequently Asked Questions

1. What contrast ratio do I need to pass WCAG AA?

WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt+, or 14pt+ bold). This tool checks your foreground/background pair against both thresholds automatically.

2. What's the difference between AA and AAA?

AAA is the stricter standard, requiring 7:1 contrast for normal text and 4.5:1 for large text. AA is the baseline most legal accessibility requirements (like ADA and Section 508) reference; AAA is recommended but not always mandatory.

3. Does this check colorblind accessibility too?

Contrast ratio and color-vision-deficiency safety are related but different checks. For how a color pair looks to someone with protanopia, deuteranopia, or tritanopia specifically, use the Color Blindness Simulator alongside this tool.

4. What counts as "large text" for the 3:1 threshold?

WCAG defines large text as at least 18pt (24px) regular weight, or at least 14pt (18.66px) bold. Anything smaller needs to meet the stricter 4.5:1 normal-text ratio.