Color Contrast Checker

Test WCAG accessibility compliance

What Is a Color Contrast Checker?

A Color Contrast Checker is an essential accessibility tool that calculates the contrast ratio between foreground (text) and background colors, then evaluates whether the combination meets WCAG (Web Content Accessibility Guidelines) standards. The Web Content Accessibility Guidelines require a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text at the AA level, and 7:1 for normal text at the AAA level.

Color contrast is critical for readability — especially for users with visual impairments, color blindness, or those viewing screens in bright sunlight. Even users with perfect vision benefit from well-chosen color pairs: low contrast causes eye strain and makes your content harder to scan quickly.

Our free Color Contrast Checker at Knexio lets you pick foreground and background colors using a color picker or by typing hex values. It instantly calculates the contrast ratio and displays pass/fail badges for WCAG 2.1 AA and AAA compliance levels, both for normal and large text. The live preview area shows exactly how your text will look on the chosen background.

Text Color

Background Color

Sample Text Preview

Tips for Checking Color Contrast

Get accurate WCAG compliance results:

Check Both AA and AAA: AA (4.5:1) is the legal minimum for most sites. AAA (7:1) is ideal for readability but not always required.
Large Text Has Lower Bars: Text 18.66px+ bold or 24px+ regular only needs 3:1 for AA. Headings often fall into this category.
Test on Real Backgrounds: A gradient or image background can produce wildly different effective contrast — test with the actual background your text sits on.
Font Weight Matters: Thin fonts (300 weight) are harder to read than bold at the same contrast ratio. If using light weights, aim higher than the minimum.

When to Check Contrast

You should verify color contrast anytime you're making design decisions that affect text legibility:

Before launching a new page or component — catch accessibility issues before they ship.
When updating brand colors — a new palette might look great but fail WCAG on certain backgrounds.
For any text that overlays images — semi-transparent overlays and image backgrounds are notorious contrast traps.
During design handoff — give developers exact color pairs with passing ratios to avoid back-and-forth.

Free Color Contrast Checker - Test color combinations for WCAG 2.1 accessibility compliance. Check AA (4.5:1) and AAA (7:1) contrast ratios for normal and large text.

How To Use The Color Contrast Checker

Using our tool is straightforward and requires no design experience:

Choose Your Colors: Use the color picker inputs (the small color swatches) to visually select foreground and background colors. Or, if you already have specific hex values from your brand palette, type them directly into the text inputs below each color picker.
Watch Live Preview: As soon as you change either color, the "Sample Text Preview" area above the results updates instantly. This shows you exactly how white or black text will appear on your background, helping you make a visual judgment before even looking at the numbers.
Read the Contrast Ratio: The large number (e.g., "7.42:1") is the calculated contrast ratio. WCAG defines "normal text" as anything below 18pt (or 14pt bold), and "large text" as 18pt+ (or 14pt+ bold). The badges below the ratio tell you at a glance whether you pass AA and AAA for both text sizes.
Iterate: If your combination fails, try adjusting the background color darker (or lighter, for dark modes) until you see more green "pass" badges. Our tool updates in real time, so you can experiment fearlessly.

Frequently Asked Questions

What is WCAG, and why should I care?

WCAG (Web Content Accessibility Guidelines) is an internationally recognized standard for web accessibility, maintained by the W3C. Many countries (including the US, UK, EU members, and Canada) have laws referencing WCAG — meaning if your website is not compliant, you could face legal action. Beyond legal risk, accessible design simply reaches more people: roughly 1 in 12 men has some form of color blindness.

What contrast ratio do I actually need?

It depends on your compliance target. WCAG AA (the legal minimum in many jurisdictions) requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). WCAG AAA (the gold standard) requires 7:1 for normal text and 4.5:1 for large text. Our tool shows pass/fail for all four scenarios simultaneously.

My designer gave me a beautiful dark purple background with white text — why is it failing?

Pure white (#ffffff) on dark purple might seem high contrast, but the actual ratio depends on the exact hex values. White on pure black is 21:1 (the maximum). White on a medium purple might only be 3:1 — which fails AA for normal text. Always test, even if the colors "look fine" to your eye. Our preview area will reveal surprises.

Do images with text overlay need contrast checking?

Yes. Any text on your site — whether in a <p> tag or baked into a hero banner image — must meet WCAG contrast requirements. For image text, check the contrast between the text color and the portion of the image directly behind it. If the background is a photo with varying colors, you may need to add a semi-transparent overlay behind the text to ensure sufficient contrast.

Are there exceptions to the contrast rules?

Yes, a few. Inactive UI components, disabled elements, decorative text (like logos), and text that's part of a disabled control don't need to meet contrast requirements. However, body text, headings, form labels, and button text absolutely must comply. When in doubt, test it — the penalty for getting it wrong is much higher than the effort of checking.