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

Accessibility handoff

Turn a color pair into a design-system decision

Check the contrast ratio, then copy a short report or CSS tokens for a ticket, style guide, or pull request. The result is calculated locally from the WCAG relative-luminance formula.

  • AA normal text needs at least 4.5:1; AA large text needs at least 3:1.
  • AAA normal text needs at least 7:1; AAA large text needs at least 4.5:1.
  • WCAG says computed ratios should not be rounded up to pass a threshold.
  • Still test hover, disabled, focus, borders, icons, charts, dark mode, mobile brightness, and real fonts.

Sources & verification: WCAG 2.2 contrast minimum. Disclaimer: this tool follows WCAG contrast math for text color pairs only. It does not audit the whole page, non-text contrast, focus appearance, disabled states, icons, charts, images of text, or all WCAG 2.2 criteria.

#000000 on #FFFFFF gives 21:1 and passes AA normal text.
About WCAG Contrast

Understanding WCAG Color Contrast

The Web Content Accessibility Guidelines (WCAG) 2.2 define minimum contrast ratios so text and images of text have enough contrast against their background. The contrast ratio ranges from 1:1 to 21:1.

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. The formula uses relative luminance as defined in the WCAG 2.2 guidance, and threshold comparisons should use the computed value rather than a rounded display value.

For related tools: Color Picker and CSS Gradient Generator.

This color contrast checker helps designers and developers test foreground and background color pairs against WCAG 2.2 text contrast thresholds. Enter or pick colors to calculate AA and AAA results for normal and large text, then copy a report or CSS tokens for review. Use the result as one accessibility check, not a full-page audit.

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?
Sufficient luminance contrast helps text remain readable for people with low vision, contrast sensitivity loss, color vision differences, and bright-screen conditions.