Check if your color combinations meet WCAG 2.2 accessibility standards for AA and AAA compliance.
Normal text (16px)
Large text (18px+)
Bold large text
Inverted colors
How it looks reversed
WCAG Standards:
Proper color contrast ensures your website is accessible to everyone, including people with visual impairments, color blindness, or those viewing your site in bright sunlight. Meeting WCAG standards isn't just good practice: it's often legally required for government and public-facing websites.
Minimum standard for most websites. Required for legal compliance in many regions.
Enhanced accessibility. Recommended for text-heavy content and educational sites.
18pt (24px) or larger, or 14pt (18.66px) bold. Has lower contrast requirements.
If your combination fails, you don't need to abandon your brand colors. Small adjustments usually get you over the line. Darken the text color or lighten the background a step at a time and watch the ratio update live above. Moving from a mid-gray like #767676 to #595959 on white, for example, lifts the ratio from 4.5:1 to about 7:1 and clears AAA. Other reliable fixes: increase font size or weight so the large-text thresholds apply, avoid placing text over busy images or gradients, and never rely on color alone to convey meaning (pair error states with icons or text labels).
Test both normal and inverted states, and check hover, focus, and disabled variants too. WCAG 2.2 also requires 3:1 contrast for user interface components like input borders and focus indicators, not just text.
For Level AA, normal body text needs at least 4.5:1 and large text (18pt/24px or 14pt/18.66px bold) needs 3:1. For the stricter Level AAA, those thresholds rise to 7:1 and 4.5:1. Most organizations target AA as their baseline because it is the level referenced by accessibility laws in the US and EU.
The ratio compares the relative luminance of the lighter color against the darker one using the WCAG formula (L1 + 0.05) / (L2 + 0.05). Results range from 1:1 (identical colors) to 21:1 (pure black on pure white). This tool computes it instantly in your browser as you pick colors.
In many cases, yes. US courts routinely apply the ADA to websites using WCAG as the benchmark, Section 508 mandates it for federal agencies, and the European Accessibility Act (enforced since June 2025) extends WCAG-based requirements to most businesses selling to EU consumers. Checking contrast is one of the fastest ways to reduce compliance risk.
No. Everything runs entirely in your browser. Nothing you enter is sent to a server, stored, or tracked, and the checker keeps working even if you go offline after the page loads.
WCAG requires the minimum ratio against every part of the background the text touches. Sample the lightest and darkest areas behind your text and test both here. A semi-transparent overlay or a solid text backdrop is the usual fix when a photo background fails.