WCAG Contrast Checker
Check color contrast ratios for WCAG 2.1 AA and AAA compliance. Ensure your designs are accessible to everyone.
Colors
Common Color Combinations
Contrast Ratio
Preview
Heading Text
This is body text at normal size. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
This is smaller text that might be used for captions or footnotes.
This is a linkWCAG 2.1 Quick Reference
| Level | Ratio | Use Case |
|---|---|---|
| AA Normal | 4.5:1 | Body text, links, labels |
| AA Large | 3:1 | Headings (18pt+ or 14pt bold) |
| AAA Normal | 7:1 | Enhanced accessibility |
| AAA Large | 4.5:1 | Enhanced large text |
| UI Components | 3:1 | Borders, icons, focus indicators |
What is This Tool?
A contrast checker calculates the contrast ratio between foreground and background colors to verify compliance with WCAG (Web Content Accessibility Guidelines) standards. Enter any two colors and instantly see if they meet AA (4.5:1) or AAA (7:1) requirements for normal and large text.
WCAG 2.1 defines minimum contrast ratios to ensure text is readable by people with moderately low vision. Level AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). Level AAA requires 7:1 and 4.5:1 respectively for the highest accessibility standard.
Common Use Cases
Web Accessibility Audit
Test every text/background color combination on your site against WCAG 2.1 requirements for ADA, Section 508, and EN 301 549 compliance.
Design System Development
Build accessible color palettes for your design system by verifying all token combinations meet minimum contrast requirements.
Brand Color Validation
Check if your brand colors can be used for text on various backgrounds while maintaining WCAG compliance.
Client Presentations
Demonstrate accessibility compliance to clients with clear pass/fail results and specific WCAG criteria references.
Frequently Asked Questions
What contrast ratio do I need?
WCAG AA: 4.5:1 for normal text, 3:1 for large text (18pt+). WCAG AAA: 7:1 for normal text, 4.5:1 for large text. Most regulations require at least AA compliance.
What counts as large text?
Text that is at least 18 point (24px) regular weight or 14 point (18.66px) bold. Large text has lower contrast requirements because it is inherently more legible.
How is contrast ratio calculated?
Using the WCAG relative luminance formula: (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color's luminance and L2 is the darker. Maximum possible ratio is 21:1 (black on white).