WCAG Contrast Checker
Check WCAG 2.1 color contrast ratio for accessibility compliance. Test foreground vs background colors against AA and AAA standards.
Sample Heading Text
This is sample paragraph text to preview the color contrast between foreground and background.
Small text for checking readability at smaller sizes.
How to Check Color Contrast
Enter your text color (foreground) and background color as HEX codes. The tool calculates the WCAG 2.1 contrast ratio and tells you whether the pair passes AA and AAA standards for both normal and large text. A live preview shows real text in your chosen colors so you can judge readability visually.
Understanding the Contrast Math
WCAG contrast is calculated using a precise formula: (L1 + 0.05) ÷ (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 of the darker. Luminance itself comes from a weighted RGB calculation that accounts for the human eye being more sensitive to green than red or blue. You do not need to memorize this — the tool handles it.
What Passes and What Fails
Body text (under 18pt): needs 4.5:1 for AA, 7:1 for AAA. Large text (18pt+ or 14pt+ bold): needs 3:1 for AA, 4.5:1 for AAA. UI components and graphical objects: need 3:1 minimum. The most common failure: pale gray text on white. The classic "trendy" #999 on #FFF only hits 2.85:1 — failing every WCAG threshold.
Fixing Failing Contrast
If your brand color fails, do not switch the color — switch how you use it. Use the brand color for icons, buttons (white text on the brand fill usually passes), and decorative elements. Use a darker variant (try shade 700+ from our shades generator) for body text. For long-form reading, near-black (#1A1A1A) on near-white (#FAFAFA) gives 17:1 and minimizes eye strain.