WCAG Color Contrast Checker

Calculate the WCAG 2.x contrast ratio between foreground and background HEX colors and test AA or AAA for normal and large text.

Enter colors

Select foreground (text) and background colors or enter HEX values.

Foreground (text)

Background

Contrast result

Contrast ratio and WCAG 2.x pass status.

Large text preview

Use this preview sentence to check readability at normal text size.

Contrast ratio17.40:1

Normal text

WCAG AA

Minimum 4.5:1

Pass

WCAG AAA

Minimum 7:1

Pass

Large text (18pt+ or bold 14pt+)

WCAG AA

Minimum 3:1

Pass

WCAG AAA

Minimum 4.5:1

Pass

Key features

Accepts three- or six-digit HEX foreground and background colors or native color input.
Calculates a 1:1–21:1 ratio using WCAG 2.x sRGB relative luminance.
Tests normal text against AA 4.5:1 and AAA 7:1 thresholds.
Tests large text against AA 3:1 and AAA 4.5:1 with a live color preview.
Swaps foreground and background and copies either HEX value.

Check body-text color pairs
Calculate the ratio between text and background colors and review AA or AAA results for normal text.
Compare design-token candidates
Swap foreground and background or revise HEX values while looking for palette choices that meet a contrast threshold.

Color conversion and contrast calculations run in your browser.

This checks WCAG 2.x color contrast only; it does not replace review of font size, weight, state communication, or overall usability.

Are the thresholds different for large and normal text?: Yes. The tool shows AA 4.5:1 and AAA 7:1 for normal text, and AA 3:1 and AAA 4.5:1 for large text.
Can I enter three-digit HEX values such as #fff?: Yes. Both three- and six-digit HEX values are normalized before the contrast ratio is calculated.