color contrast checker

How to use the color contrast checker

  1. Pick a foreground color — this is your text, icon, or UI element color. Use the color picker or type a hex code directly.
  2. Pick a background color — the surface behind your text. Common backgrounds include white (#ffffff), near-white (#f8fafc), dark (#1e293b), or brand colors.
  3. The contrast ratio updates instantly. WCAG compliance badges for AA Normal (4.5:1), AA Large (3:1), AAA Normal (7:1), and AAA Large (4.5:1) appear in real time.
  4. Check the live text preview — it renders actual body copy, small caption text, and buttons on your chosen background so you can judge readability visually, not just by the numbers.
  5. Use the quick presets (black on white, gray on white, white on blue, etc.) as starting points or to diagnose common problematic combos.

When to use it

Check contrast whenever you're choosing text colors for a design system, building a component library, or auditing an existing site for accessibility. Low-contrast text is the most common WCAG failure — it affects the 2.2 billion people worldwide with visual impairments including 300 million with color vision deficiency. Use this before shipping any color decision that involves text. Alternative: WebAIM's contrast checker has been the gold standard for years but requires page reloads per check — this tool updates live as you pick colors.

Example

Real-world pass/fail examples:

**Black (#000) on White (#fff):** 21:1 — passes AAA with room to spare. **Mid-gray (#767676) on White:** 4.54:1 — barely passes AA Normal, fails AAA. This is the most common accessibility trap — designers pick a gray they think looks fine but it fails WCAG by a hair. **White on Blue (#3b82f6):** 4.63:1 — passes AA Normal, good for buttons. **Light text (#94a3b8) on Dark (#1e293b):** 3.14:1 — fails AA Normal, passes only AA Large. Use brighter text for body copy.

Frequently asked questions

What's the difference between AA and AAA?
AA is the minimum acceptable level for most websites and is legally referenced in ADA/Section 508 compliance. AAA is the enhanced level — ideal for government sites, accessibility-focused products, or any site that wants to be maximally inclusive. Most commercial sites target AA for body text and AAA for large headings.
What counts as 'large text' for WCAG?
Text that is at least 18 point (24px) and bold, or at least 24 point (32px) and any weight. Large text needs only 3:1 for AA and 4.5:1 for AAA because bigger glyphs have thicker strokes that are easier to distinguish at lower contrast.
Does contrast ratio apply to icons and UI elements?
Yes — WCAG 2.1 SC 1.4.11 requires UI components (buttons, inputs, icons, focus rings) to have at least 3:1 contrast against adjacent colors. This is the 'AA UI' badge. Decorative elements and logos are exempt.
Why does my chosen color combo pass the numbers but look hard to read?
Contrast ratio measures luminance difference, not hue difference. Two colors can have sufficient luminance contrast but be chromatically unpleasant (e.g., red text on cyan). The 'Live Preview' section helps you judge the subjective experience — trust your eyes alongside the numbers.
Does this work for gradients and images?
No — WCAG contrast ratio formulas assume two solid colors. For text over gradients, measure at the lightest and darkest regions of the gradient independently. For text on images, use the WCAG Text on Background Image technique (G17) — or overlay a semi-transparent dark scrim behind text on photos.
Is contrast ratio the same as color difference?
No. The WCAG contrast ratio only considers luminance (perceived brightness), not chroma or hue. Two colors can have a huge hue difference (red vs green) but identical luminance and therefore a 1:1 ratio. The ratio tells you about visibility; color difference is about distinguishability — both matter for accessible design.

Related tools

Last updated: 2026-05-11