Accessibility Contrast Test - WCAG Checker
Verify color combinations against WCAG 2.1 accessibility guidelines. Ensure your text is readable for all users by checking contrast ratios.
Contrast Ratio: 21 : 1
This is how your text looks on the background.
"The power of the Web is in its universality." - Tim Berners-Lee
Why Color Contrast Matters
Color contrast isn't just a design choice—it's a critical component of web accessibility. Millions of users have visual impairments, including color blindness and low vision. If your text doesn't stand out sufficiently against its background, these users cannot consume your content.
WCAG 2.1 Guidelines Explained
The Web Content Accessibility Guidelines (WCAG) set the standard for contrast ratios:
- Level AA (Minimum): Requires a ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt+). This is the standard most websites must legally meet (ADA/Section 508).
- Level AAA (Enhanced): Requires a ratio of 7:1 for normal text. This is the gold standard for text-heavy reading apps.
How Contrast Ratio is Calculated
The ratio represents the difference in luminance (brightness) between the foreground and background colors. Pure black on pure white yields the maximum ratio of 21:1. Identical colors yield the minimum ratio of 1:1.
Design Tips for Accessibility
- Avoid light gray text on white backgrounds. It's often unreadable on mobile screens in sunlight.
- Don't rely on color alone to convey meaning (e.g., green for go, red for stop). Use icons or text labels too.
- When using buttons with text, check the hover state color as well.