Color Contrast Checker
Check if your text and background color combination meets WCAG 2.1 accessibility guidelines. See contrast ratio and AA/AAA pass/fail status for normal text, large text, and UI components.
Frequently Asked Questions
What is WCAG and why does contrast ratio matter?
WCAG (Web Content Accessibility Guidelines) is the international standard for web accessibility, developed by the W3C. Contrast ratio requirements exist because low contrast between text and background makes content difficult or impossible to read for people with low vision, color blindness, or when viewing screens in bright sunlight. WCAG 2.1 Level AA is the legally required standard in many jurisdictions including the European Union's EN 301 549 standard and the US Section 508 requirements. Designing with sufficient contrast isn't just about compliance — it improves readability for everyone, including aging users and those using low-brightness screens.
What counts as "large text" in WCAG?
WCAG defines large text as 18pt (approximately 24px) or larger, or 14pt (approximately 18.67px) bold or larger. Large text has a lower contrast threshold — 3:1 for AA and 4.5:1 for AAA — because bigger type is inherently easier to read at lower contrast. Normal body text requires the stricter 4.5:1 ratio for AA compliance. When checking a design, consider each text element separately: a large bold headline might pass at a 3.5:1 ratio while the body copy beneath it at the same color combination would fail. The size threshold applies to the rendered size on screen, not the CSS value.
How do I fix a failing contrast ratio without changing my brand colors?
The most reliable fix is adjusting the lightness of one color while keeping the hue intact. If your brand blue (#1e40af) on white already has strong contrast, the issue is often with lighter tints used for secondary text. Darken gray text from #9ca3af (which fails at 2.6:1) to #6b7280 (4.6:1) or #4b5563 (7.0:1) to achieve compliance while preserving the visual hierarchy. Alternatively, increase the background color's contrast rather than the text color — a slightly darker background card (#f3f4f6 instead of #f9fafb) can push a borderline ratio over the threshold. This tool's suggestions section shows specific adjusted hex values to try.