Color Contrast Checker
Check WCAG 2.1 accessibility compliance for your text and background color combinations. Get instant AA and AAA pass/fail ratings.
Large Text Preview (24px)
Normal text preview at 16px. This is how your body copy will look with this color combination. Make sure it is easy to read.
Small text at 12px for fine print and captions.
What is Color Contrast?
Color contrast refers to the difference in perceived brightness between two colors placed next to each other. In web design and digital accessibility, contrast is measured as a ratio between the foreground (text) color and the background color. A higher contrast ratio means the text is easier to distinguish from its background.
The Web Content Accessibility Guidelines (WCAG) define specific contrast ratio thresholds to ensure that text is readable for people with various visual impairments, including color blindness and low vision. Meeting these standards is not only a legal requirement in many jurisdictions but also a best practice for creating user-friendly designs that work for everyone.
WCAG Compliance
Meet international accessibility standards required by laws like the ADA, EAA, and Section 508. Avoid lawsuits and ensure your website is legally compliant.
Better Readability
Text with sufficient contrast is easier to read for all users, not just those with visual impairments. Good contrast reduces eye strain and improves comprehension.
Inclusive Design
Around 1.3 billion people worldwide have some form of visual impairment. Proper contrast ensures your content reaches the widest possible audience.
Understanding WCAG Levels
WCAG defines two conformance levels for color contrast: Level AA and Level AAA. Level AA is the baseline standard that most accessibility laws require, while Level AAA represents the gold standard for accessibility. The requirements differ based on text size because larger text is inherently easier to read.
"Large text" is defined as text that is at least 18pt (24px) regular weight, or 14pt (approximately 18.66px) bold weight. Everything smaller is classified as "normal text" and requires a higher contrast ratio.
| WCAG Level | Normal Text | Large Text | Typical Use |
|---|---|---|---|
| AA (Minimum) | 4.5:1 | 3:1 | Required by most laws (ADA, EAA) |
| AAA (Enhanced) | 7:1 | 4.5:1 | Gold standard, ideal for maximum readability |
Frequently Asked Questions
Need Help With Accessible Web Design?
Our design and development team builds beautiful, WCAG-compliant websites that look great and work for everyone.