Color Contrast Checker
Check color contrast ratio against WCAG AA and AAA standards. Pass/fail for normal and large text. Free browser-based tool.
Sample Text
This is how the colors look together
How Color Contrast Checker Works
Enter foreground and background colors as HEX codes. The tool calculates relative luminance using the WCAG 2.1 formula and outputs the contrast ratio with pass/fail for AA and AAA at normal and large text sizes.
This tool uses industry-standard formulas and calculations to provide accurate results instantly. All calculations happen in your browser — your data never leaves your device, ensuring complete privacy and security.
Whether you're optimizing marketing campaigns, managing finances, or processing data, this tool gives you the precision and speed you need to make informed decisions quickly.
WCAG Contrast Requirements
| Label | Meaning |
|---|---|
| 7:1 and above | WCAG AAA — government and high-accessibility standard |
| 4.5:1 – 7:1 | WCAG AA normal text — commercial and enterprise minimum |
| 3:1 – 4.5:1 | WCAG AA large text only (18pt+ or 14pt bold) |
| Below 3:1 | Fails all WCAG levels — inaccessible for low-vision users |
Frequently Asked Questions
What is WCAG color contrast?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background to ensure readability for users with low vision or colour blindness. Level AA (4.5:1 for normal text) is the standard legal requirement in many jurisdictions including ADA (US) and EN 301 549 (EU).
What counts as large text for WCAG?
WCAG defines large text as 18pt (24px) or larger, or 14pt (approximately 18.67px) bold or larger. Large text has a lower contrast requirement (3:1) because it's easier to read at lower contrast than small text.
How do I fix a contrast failure?
Darken the foreground text color or lighten the background (for light themes), or lighten the text and darken the background (for dark themes). For small adjustments, moving Lightness in HSL by 10–20% usually fixes borderline failures without changing the brand colour visually.
Is my data stored?
No.
Can I use this on mobile?
Yes.
About This Tool
Built by the Calcyo team and last updated June 2026. All calculations follow industry-standard methodology. No data leaves your browser — calculations run entirely client-side using JavaScript. If you spot an error in the formula or benchmark data, email us at support@calcyo.xyz.