WCAG Color Contrast Checker
Check foreground and background color contrast ratios against WCAG AA and AAA accessibility standards.
How ZeroData protects your privacy
- ✓ No Uploads: Processing happens entirely via client-side JavaScript.
- ✓ No Storage: We do not have a database. We physically cannot save your data.
- ✓ No Tracking: We don't log what you process or track your inputs.
- ✓ Verifiable: Check your DevTools Network tab. You will see 0 outbound requests.
How to Use the WCAG Color Contrast Checker
- Select a Foreground Color (the color of your text) using the visual color picker or by typing a HEX code.
- Select a Background Color (the color behind your text) using the visual color picker or by typing a HEX code.
- View the live text preview to visually assess the readability of your color combination.
- Check the Contrast Ratio output to see the exact mathematical score (e.g., 4.5:1 or 7.1:1).
- Review the Pass/Fail badges for WCAG AA and AAA standards across both normal and large text sizes.
Common Use Cases
- Verifying website body text against background colors to ensure legal accessibility compliance.
- Testing primary and secondary button colors before handing off UI designs to developers.
- Checking alert and notification banners to guarantee that text is readable against warning backgrounds.
- Auditing a legacy web application's color palette to identify contrast failures.
- Experimenting with dark mode styling to ensure light text has enough contrast on dark backgrounds.
Frequently Asked Questions
What is a good color contrast ratio?
For normal text, the WCAG AA standard requires a minimum contrast ratio of 4.5:1. For large text (18pt or 14pt bold), the requirement is 3.0:1. The stricter AAA standard requires 7.1:1 for normal text and 4.5:1 for large text.
How is the contrast ratio calculated?
The ratio is calculated using the relative luminance of the colors, based on the sRGB color space. The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color.
What counts as 'large text' in WCAG?
WCAG defines large text as at least 18 point (typically 24px) or 14 point bold (typically 18.66px bold). If your text meets this criteria, you can follow the slightly more lenient contrast requirements for large text.
Is my color data sent to a server?
No. All contrast calculations are performed locally in your browser using JavaScript. Your color selections remain completely private and are never uploaded.
Why does my color combination pass for large text but fail for normal text?
Large text is inherently easier to read, so the WCAG guidelines allow for a lower contrast ratio (3.0:1) compared to normal text (4.5:1). This gives designers more flexibility for headings and large UI elements.