AfroTools / Tools / Color Contrast

WCAG Contrast Checker

Test color combinations for WCAG 2.1 accessibility compliance. Check AA and AAA contrast ratios for normal and large text instantly.

WCAG 2.1AA & AAALive Preview
Contrast Checker
Normal text looks like this (16px)
Large text looks like this (24px)
21:1
Contrast Ratio
PASS
AA Normal
PASS
AA Large
PASS
AAA Normal
PASS
AAA Large
About WCAG Contrast

Understanding WCAG Color Contrast

The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum contrast ratios to ensure text is readable by people with visual impairments. The contrast ratio ranges from 1:1 (no contrast, e.g., white on white) to 21:1 (maximum contrast, black on white).

WCAG Levels

  • AA Normal Text: Minimum 4.5:1 contrast ratio
  • AA Large Text: Minimum 3:1 contrast ratio
  • AAA Normal Text: Minimum 7:1 contrast ratio
  • AAA Large Text: Minimum 4.5:1 contrast ratio

Large text is 18pt (24px) or larger regular weight, or 14pt (18.66px) bold. Most legal requirements ask for AA compliance at minimum. The formula uses relative luminance as defined in the WCAG 2.1 guidelines.

For related tools: Color Picker and CSS Gradient Generator.

Frequently Asked Questions

What is WCAG contrast ratio?
WCAG defines minimum contrast between text and background. AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively.
What counts as large text?
18pt (24px) or larger regular weight, or 14pt (18.66px) bold weight.
Why does contrast matter?
Good contrast ensures readability for people with visual impairments, color blindness, or those in bright environments. It is a legal requirement in many jurisdictions.