Pick two colors and instantly see if they meet WCAG accessibility standards — for both normal and large text.
The Web Content Accessibility Guidelines (WCAG) define two levels of contrast compliance — AA and AAA. Here's what each level means, when it applies, and why it matters.
WCAG defines large text as 18pt (24px) or larger at regular weight, or 14pt (approximately 18.67px) or larger for bold. In practice: headings and big buttons get the more lenient threshold, body copy and captions must meet the stricter ratio. When in doubt, test at the smaller threshold.
WCAG uses relative luminance — how much light a color appears to emit, corrected for human perception. The ratio is (lighter + 0.05) ÷ (darker + 0.05), ranging from 1:1 (identical colors) to 21:1 (pure black on pure white). Green is weighted most heavily in the formula, matching how the eye sees.
AA compliance is enforceable law in many jurisdictions. The US DOJ settled over 4,000 ADA web accessibility cases in 2023. The EU Web Accessibility Directive and EN 301 549 apply to all public-sector sites. The UK Equality Act covers private sector too. Failing contrast ratios are among the most common cited violations.
Adjust lightness rather than hue — darkening raises contrast without changing color identity. Brand colors often fail on white; try them as accents on dark surfaces instead. Always test at both your lightest and darkest backgrounds. Use the tint & shade generator to find accessible variants of any hex.
For normal body text, WCAG AA requires at least 4.5:1 and AAA requires 7:1. Large text, meaning 18pt regular or 14pt bold and up, needs 3:1 for AA and 4.5:1 for AAA. Black on white is the maximum possible ratio, 21:1.
Pick a text color and a background color, or type their hex codes. The checker shows the ratio rounded to one decimal, with a pass or fail for AA and AAA at normal and large text sizes. The swap button flips text and background.
#767676. It has a contrast ratio of 4.54:1 against #FFFFFF, just above the 4.5:1 AA minimum for normal text. One step lighter, #777777, measures 4.48:1 and fails.
Yes. WCAG 2.1 success criterion 1.4.11 asks for at least 3:1 between UI components or meaningful graphics, such as icons, input borders, and focus rings, and the colors next to them. The large text AA result above uses the same 3:1 threshold.
White on #11151A measures 18.32:1 and passes AAA. Red #E63946 on the same background measures 4.4:1, enough for large text but not body text. Gray #767676 passes on white yet fails here at 4.03:1, so check each background separately.
Pick a Zaps template for your next post, story or reel, add your photos and match it to your palette.