a11y.skipToMainContent
1

Contrast Checker

Check color contrast ratios between foreground and background colors. Verify WCAG 2.1 AA and AAA compliance with pass/fail indicators.

Contrast Checker

Large Text (18pt+)

Normal body text (16px)

21:1
Contrast Ratio
AA Normal
AA Large
AAA Normal
AAA Large
More options
Was this tool helpful?
Send output to:
Advertisement

How to use Contrast Checker

  1. Enter or pick the foreground (text) color.
  2. Enter or pick the background color.
  3. View the contrast ratio and WCAG pass/fail results.
  4. Adjust colors until they meet your target compliance level.

What is Contrast Checker?

A contrast checker calculates the contrast ratio between two colors according to the WCAG 2.1 guidelines. It determines whether text is readable against a background color for normal text, large text, and UI components.

WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text (AA), 3:1 for large text (AA), 7:1 for normal text (AAA), and 4.5:1 for large text (AAA). This tool instantly shows pass/fail for all four criteria.

Advertisement

FAQ

What is a good contrast ratio?
WCAG 2.1 AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text.
What counts as large text?
Large text is defined as 18pt (24px) and above, or 14pt (18.66px) and above if bold.

Related tools

Author

NK
Prof. Noah Klein"The Privacy Guardian"

Cybersecurity Researcher & Privacy Advocate

Professor Klein holds a PhD in Information Security and has testified before EU parliamentary committees on data privacy legislation. He builds encryption tools for journalists, audits web applications for security flaws, and believes that privacy is not a feature but a fundamental right. His research has been cited in Wired, Nature, and The Guardian, and he advises nonprofits on responsible data stewardship.

Advertisement