Tools
Color Contrast Checker
Check foreground and background color combinations against WCAG 2.1 accessibility standards.
Sample text
This is how your text will look on this background.
Requires 4.5:1 — Pass
Requires 3:1 — Pass
Requires 7:1 — Pass
Requires 4.5:1 — Pass
WCAG 2.1 — the four contrast criteria
The Web Content Accessibility Guidelines define four contrast levels — depending on text size and compliance level required.
AA — Normal text (4.5:1)
The legal minimum for body text in most accessibility regulations. Required by EN 301 549, BITV 2.0 (Germany) and the ADA (USA). Applies to text below 18pt or 14pt bold.
AA — Large text (3:1)
Applies to text at 18pt or 14pt bold and above. The lower bar is justified because larger text is inherently easier to read, even at lower contrast.
AAA — Normal text (7:1)
Enhanced standard. Recommended for publicly funded websites in Germany (BITV 2.0) and any site targeting users with visual impairments.
AAA — Large text (4.5:1)
The highest standard for large-format text. Only required for full AAA conformance. A sensible goal for websites with a strong accessibility commitment.
Common contrast mistakes in web design
These combinations regularly fail WCAG — and are still used on millions of websites.
Light grey on white
One of the most common failures. #999999 on #FFFFFF gives only 2.85:1 — well below the AA minimum. Designers call it subtle. WCAG calls it non-compliant.
Placeholder text in forms
Input placeholder text is often styled with low contrast. WCAG applies to placeholders too — most design tool templates fail this check and it gets overlooked consistently.
White text on light imagery
Hero sections with text over photos are risky — depending on the image region, contrast can shift from pass to fail. Always back text with a solid colour or overlay.
Low text-to-background contrast is one of the most common and most overlooked accessibility failures on the web. WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal text (AA standard) and 7:1 for enhanced accessibility (AAA). This tool checks any foreground and background colour combination against all four WCAG 2.1 criteria — AA and AAA for both normal and large text. Useful for designers validating brand colours and developers reviewing component states before release.
Frequently asked questions about colour contrast
What is the difference between WCAG AA and AAA?+
Does colour contrast affect Google rankings?+
What counts as "large text" under WCAG?+
Do icons and graphics also need to meet contrast requirements?+
Are there browser tools to check contrast directly in developer tools?+
This tool provides an automated analysis for orientation purposes only. Results may be incomplete or inaccurate. This does not constitute legal, technical, or professional advice of any kind. NEXITO MEDIA LLC accepts no liability for decisions made based on tool results.