Preview
21 : 1Large heading text (24px)
Normal body text at 16px. The quick brown fox jumps over the lazy dog - readable copy is the whole point of getting contrast right.
Test any text and background color pair against WCAG 2.2 AA and AAA. Get the exact ratio, pass/fail per use case, and one-click accessible alternatives.
Large heading text (24px)
Normal body text at 16px. The quick brown fox jumps over the lazy dog - readable copy is the whole point of getting contrast right.
These tools are built by Webteqno, a web design and SEO studio with 9+ years and 200+ websites behind it. We help US small businesses look credible and get found on Google and in AI search.
Serving small businesses, service firms and SBA-certified federal contractors across the US.
Roughly 1 in 12 men and 1 in 200 women have some form of color vision deficiency, and everyone struggles with pale gray text on white in sunlight. WCAG contrast ratios exist so text stays readable for real people on real screens - and meeting them is increasingly a legal expectation for business websites in the US, UK and EU.
Most brand palettes have at least one color that fails on white - typically a light blue, orange, or green. You don't have to abandon it: use it for large headings, backgrounds, and decorations, and use the suggested darkened variant (this tool computes one automatically) for body text and links. Extract your palette first with the Palette Extractor, then test every text/background pair you actually use.
Not directly as a named ranking factor, but low contrast raises bounce rates, fails Lighthouse accessibility audits, and degrades the page experience signals Google does measure. It also exposes you to accessibility complaints.
Test against the lightest and darkest area the text can sit on. If either fails, add a solid or semi-opaque backing panel behind the text.
Webteqno runs full accessibility, SEO and performance audits - then fixes what it finds. Readable, rankable, fast websites for small businesses.
Request a free site audit from WebteqnoContrast ratio compares the relative luminance of two colours on a scale from 1:1 (identical) to 21:1 (black on white). The Web Content Accessibility Guidelines (WCAG) set minimums so text and interface elements are readable for people with low vision or colour-vision deficiencies — and for everyone reading a phone in sunlight.
| Element | AA minimum | AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (≈24 px regular or ≈19 px bold and above) | 3:1 | 4.5:1 |
| Icons, form borders, focus indicators and meaningful graphics | 3:1 | — |
| Logos and brand names | Exempt | Exempt |
WCAG excludes logotypes from contrast requirements, so a pale logo does not fail an audit. It can still fail your customers. Aim for at least 3:1 between a logo and its background, and use white or black versions where the colour logo does not reach it.
Keep the brand hue and adjust lightness: darken the colour for text on white, or use it as a background with dark text instead of white. The one-click suggestions here find the nearest passing shade. Reserve the original bright brand colour for large headings, illustrations and decorative elements, where the requirements are lower.