ColorGuard - free, no upload, runs in your browser
ColorGuard computes the contrast ratio between a text color and its background, checks it against WCAG 2.x AA and AAA thresholds for normal and large text, and suggests a compliant nearby color when the pair fails. Runs locally, instant results.
WCAG 2.x sets 4.5:1 as the minimum contrast for normal-size body text (AA) and 7:1 for the stricter AAA level. Text at least 18.66 px bold or 24 px regular counts as large and needs only 3:1.
These are not stylistic opinions - low contrast is one of the most commonly flagged accessibility failures and one of the easiest to fix before launch.
Gray-on-gray text in modern UI themes, brand colors chosen for vibrancy rather than legibility, and white text on brand-tinted buttons are the three classics. Each looks fine on a designer's calibrated monitor and fails for everyone else.
ColorGuard names the problem immediately: the ratio, the failing threshold, and the closest compliant color you can swap in.
AA (4.5:1 for normal text) is the legal-ish baseline most policies reference. AAA (7:1) is the enhanced level recommended for content where readability is critical, such as long-form reading.
Text at least 24 px regular weight, or 18.66 px bold. Large text only needs a 3:1 ratio under WCAG.
No. It evaluates solid color pairs, which covers text, buttons, badges, and backgrounds. For photos behind text, sample representative light and dark areas and check the worst case.
Yes. When a pair fails, ColorGuard suggests a nearby compliant color you can apply with one click and re-verify.
Yes. The ratio math runs in your browser; your color values are not sent anywhere.