MIINDIGITAL

Optimize for AI. Win visibility. Drive results.

Free Color Contrast Checker

Check whether your text and background colors meet WCAG accessibility standards before you publish. Enter or pick two colors to see the exact contrast ratio, live text previews at three sizes, pass/fail results for WCAG AA and AAA, and a suggested accessible alternative if your combination fails.

21.00:1
Excellent — passes AAA for all text
Large text (24px+)
The quick brown fox jumps over the lazy dog
Normal text (16px)
The quick brown fox jumps over the lazy dog.
Small text (13px)
The quick brown fox jumps over the lazy dog.

Need a website that looks good and loads fast?

MiinDigital builds fast, SEO-ready websites for small businesses.

See our website building services

How to Use the Color Contrast Checker

  1. Pick or type your text color using the color swatch or the hex field under “Text Color”.
  2. Pick or type your background color the same way under “Background Color”.
  3. Watch the contrast ratio update instantly, along with live previews at three text sizes.
  4. Check the pass/fail results for WCAG AA and AAA at normal text, large text, and UI component levels.
  5. If your combination fails, a suggested accessible color appears automatically: click “Use this color” to apply it.
  6. Use Swap Colors to flip text and background, or Random Pair to explore new combinations.

What Is Color Contrast and Why Does It Matter?

Color contrast measures how easily text can be read against its background. The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios so that people with low vision, color blindness, or who are viewing a screen in bright sunlight can still read your content. Poor contrast is one of the most common accessibility failures on the web, and it also hurts readability and conversions for everyone, not just users with visual impairments.

  • WCAG AA is the level most accessibility laws and audits point to. It requires 4.5:1 for normal text and 3:1 for large text (24px, or about 19px bold).
  • WCAG AAA is the enhanced standard, requiring 7:1 for normal text and 4.5:1 for large text: recommended for content aimed at users with low vision.
  • UI components and graphics (buttons, form borders, icons) need at least 3:1 contrast against adjacent colors under WCAG 2.1’s non-text contrast rule.
  • Low contrast hurts conversions. Even users without a diagnosed vision impairment struggle to read low-contrast text on mobile screens, in bright light, or when tired: which means fewer completed forms and fewer sales.
  • Lighthouse flags it. Google’s Lighthouse and PageSpeed Insights both report low-contrast text in their accessibility audits.

How Contrast Ratio Is Calculated

This tool uses the WCAG formula. Each colour’s relative luminance is calculated from its sRGB values, then the contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter colour and L2 the darker one. Ratios run from 1:1 (identical colours) to 21:1 (black on white).

Frequently asked questions

What contrast ratio do I need to pass WCAG AA?

You need at least 4.5:1 for normal body text and 3:1 for large text (24px and above, or 19px and above if bold). UI components like buttons and input borders need at least 3:1 against their surrounding background.

What’s the difference between WCAG AA and AAA?

AA is the standard most laws and accessibility audits require, 4.5:1 for normal text, 3:1 for large text. AAA is a stricter, optional standard, 7:1 for normal text, 4.5:1 for large text, recommended for content targeting users with significant visual impairments, such as government or healthcare sites.

Does this tool check color blindness safety too?

This tool checks luminance-based contrast ratio, which is the primary WCAG requirement and also improves readability for most forms of color blindness. It does not simulate specific color vision deficiencies (protanopia, deuteranopia, tritanopia), for that, test your final design in a dedicated color blindness simulator.

Why did my “obviously readable” colors fail?

Contrast ratio is about luminance, not just visual difference. Some color pairs that look distinct, like a medium gray on white, or a bright yellow on white, have surprisingly low contrast ratios because both colors reflect similar amounts of light. Always check the actual number rather than relying on your eyes alone.

Is contrast checking a legal requirement?

Often, yes. Many accessibility laws and standards, including the EU’s EN 301 549 and US rules for government websites, reference WCAG 2.1 level AA. This is not legal advice, so check with a qualified professional for your market.

Sources

  1. W3C, “Understanding Success Criterion 1.4.3: Contrast (Minimum)“, accessed September 2026.
  2. W3C, “Understanding Success Criterion 1.4.11: Non-text Contrast“, accessed September 2026.

Related free tools