WCAG Colour Contrast Checker

Check foreground and background colour contrast against WCAG 2.1 AA and AAA accessibility standards.

Choose Colours
Live Preview

Small text (14px): The quick brown fox jumps over the lazy dog.

Normal text (16px): The quick brown fox jumps over the lazy dog.

Large bold (18.66px bold): The quick brown fox.

Large text (24px): The quick brown fox.

Heading text (32px)

Contrast Results

21.00:1

contrast ratio

Use caseRequired ratioAAAAA
Normal text (< 18pt / 14pt bold)4.5:1 (AA), 7:1 (AAA)
Large text (≥ 18pt or 14pt bold)3:1 (AA), 4.5:1 (AAA)
UI components & graphics3:1—
Suggested Fixes

If the current pair fails, here are the nearest accessible alternatives (adjusting lightness of the foreground):

Frequently Asked Questions

WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt regular or 14pt bold) to meet Level AA. For Level AAA, the requirements are 7:1 for normal text and 4.5:1 for large text. UI components and graphical objects need 3:1.

Contrast ratio is calculated using relative luminance from WCAG 2.x: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter colour and L2 is the darker. Relative luminance uses the sRGB gamma-corrected linear RGB values weighted by 0.2126 R + 0.7152 G + 0.0722 B. The result ranges from 1:1 (no contrast) to 21:1 (black on white).

WCAG defines large text as at least 18pt (approximately 24px) regular weight, or at least 14pt (approximately 18.66px) bold. Large text only needs 3:1 contrast at AA, or 4.5:1 at AAA.

Yes. WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast) requires UI components (form borders, buttons, focus indicators) and graphical objects required for understanding to have at least 3:1 contrast against their adjacent colours.

APCA (Accessible Perceptual Contrast Algorithm) is a newer perceptual contrast model being explored for WCAG 3. It uses lightness contrast rather than luminance ratios and gives different results, especially for dark mode. WCAG 2.x ratio is still the standard for legal compliance.
WCAG Quick Reference

AA (legal minimum):

  • Normal text: 4.5:1
  • Large text: 3:1
  • UI components: 3:1

AAA (enhanced):

  • Normal text: 7:1
  • Large text: 4.5:1
Related Tools