Free accessibility tool
Check Text and Background Color Contrast
Enter two colors to calculate their contrast ratio and test the combination against WCAG 2.2 AA and AAA thresholds for normal text, large text, and interface components.
Choose your colors
Use the color pickers or enter 3- or 6-digit hex values.
Contrast result
Strong contrast for text and interface elements.
Normal text
WCAG AA requires at least 4.5:1. AAA uses the enhanced 7:1 threshold.
Large text
AA requires 3:1 for text that meets the WCAG definition of large-scale text.
Interface elements
Important controls, focus indicators, and graphical objects generally need 3:1 against adjacent colors.
How to Use This WCAG Color Contrast Checker
Choose the text color and the background immediately behind it. The calculator converts the colors to relative luminance values and reports the ratio between them. A result of 1:1 has no luminance contrast; black against white produces the maximum 21:1 ratio.
Test every real state—not only the default design. Links, buttons, hover states, keyboard focus, disabled controls, text over images, and mobile overlays can use different color combinations. A passing pair does not make an entire page accessible by itself.
What the WCAG Results Mean
The thresholds follow the W3C WCAG 2.2 contrast criteria. Normal text needs 4.5:1 for Level AA and 7:1 for Level AAA. Large text needs 3:1 for AA and 4.5:1 for AAA. Non-text interface components and focus indicators have separate requirements that often use a 3:1 threshold.
Font weight, antialiasing, transparency, gradients, background imagery, and state changes can affect the real result. Use this calculator as a precise color-pair test, then review the finished interface with keyboard and accessibility testing.
Source and limitation
Thresholds are based on the W3C WCAG 2.2 Quick Reference. This tool provides design guidance, not a certification or legal-compliance guarantee.
Need an accessible, conversion-focused website?
Avenzo can review the design system, responsive experience, and implementation details together.