Free Tool

Brand Color Accessibility Checker

Check any text + background color pair against real WCAG 2.1 contrast rules — get the exact ratio, AA/AAA pass-fail, a live preview, and accessible color suggestions, instantly in your browser.

Real WCAG 2.1 math Runs in your browser AA & AAA

Your contrast report will appear here. Pick two colors and click Check contrast — or just change a color to see it update live.

Aa — The quick brown fox

Sample body text jumps over the lazy dog. 0123456789

— Contrast ratio

Need a brand and UI that's beautiful and accessible to everyone? Parix.ai designs inclusive, on-brand experiences.

See branding & UI/UX →

Why color contrast matters

Color contrast is one of the most common — and most easily fixed — accessibility problems on the web. If your text doesn't stand out enough from its background, people with low vision, color blindness, or anyone reading on a glary phone screen will struggle to read it. The Web Content Accessibility Guidelines (WCAG) 2.1 set clear, measurable contrast ratios so you don't have to guess.

How the contrast ratio is calculated

This tool uses the exact WCAG formula. Each color channel is converted from sRGB to linear light, combined into a relative luminance, and the ratio is computed as (L_lighter + 0.05) / (L_darker + 0.05). The result ranges from 1:1 (no contrast) to 21:1 (pure black on pure white).

WCAG 2.1 thresholds

Normal text (below 18pt / 24px): AA requires at least 4.5:1, AAA requires 7:1.
Large text (18pt / 24px and up, or bold 14pt / 18.66px and up): AA requires 3:1, AAA requires 4.5:1.

Tips for accessible brand colors

Aim for AA as a minimum; target AAA for body text where you can.
Keep an accessible variant of each brand color for text use — your logo color often won't pass on white.
Never rely on color alone to convey meaning; pair it with text or icons.

Fails AA? Use the suggested darker or lighter versions of your text color above — they keep your hue while reaching a compliant ratio on the same background.

More free tools