Home › Color & Design › Color Contrast Checker

Color Contrast Checker

Will people actually be able to read it? Check any text/background pair against the WCAG accessibility standard.

Normal text — The quick brown fox jumps over the lazy dog
Large text — Readability matters
— : 1
Contrast ratio · —
—AA — normal text (≥ 4.5)
—AA — large text (≥ 3.0)
—AAA — normal text (≥ 7.0)
—AAA — large text (≥ 4.5)

🔒 WCAG 2.1 math in your browser — instant and offline

Ad Space · AdSense code goes here later

Contrast is not a nice-to-have

Roughly one in twelve men has some form of color vision deficiency, everyone's eyes age, and every phone gets used in sunlight — low-contrast text fails all of them. WCAG 2.1 defines the standard: 4.5:1 minimum for normal text (AA), 3:1 for large text (18pt+/14pt bold), and 7:1 for the stricter AAA level. This checker computes the exact ratio from relative luminance — the same formula auditors and Lighthouse use — with a live preview so you can see the verdict, not just read it. Accessibility lawsuits aside, higher contrast simply converts better.

FAQ

What counts as "large text"?
18pt (24px) and up, or 14pt (about 18.7px) if bold — large text is easier to read, so the required ratio drops to 3:1 (AA) or 4.5:1 (AAA).
Do I need AA or AAA?
AA is the legal/standard target for most sites and apps. AAA is the enhanced level for body text in reading-heavy contexts — aim for it where comfortable, require it for accessibility-critical products.
My brand color fails — what now?
Keep the brand color for decorative elements and darken/lighten a text variant until it passes — our Color Picker generates shades and tints to pick from.

Related Tools

🎨 Color Picker 🌈 Color Palette Generator 🎯 Image Color Picker 🌈 CSS Gradient Generator 👁️ Color Blindness Simulator Soon 🔤 Font Pairing Tool Soon