Free Color Contrast Checker

Test your text and background color combinations for WCAG 2.1 accessibility compliance. Get instant pass/fail results for AA and AAA standards — no signup required.

94,217+ contrast checks performed

Contrast Ratio

17.06:1

Large Text Preview (24px)

Normal body text preview (16px). The quick brown fox jumps over the lazy dog. This sample shows how your color combination looks at typical body copy size.

Small text (14px) — often used for captions, footnotes, and metadata.

Reversed: background on text color (17.06:1 — same ratio)

AA Normal Text

Requires 4.5:1

PASS

AA Large Text

Requires 3:1

PASS

AAA Normal Text

Requires 7:1

PASS

AAA Large Text

Requires 4.5:1

PASS

Ready to build an accessible website with these colors?

Build with these colors

What Is a Color Contrast Checker?

A color contrast checker is a tool that measures the luminance difference between two colors — typically foreground text and its background — and calculates a contrast ratio according to the Web Content Accessibility Guidelines (WCAG). This ratio determines whether your color combination is readable for people with visual impairments, including color blindness and low vision.

Kleap's contrast checker instantly calculates the WCAG 2.1 contrast ratio and tests it against all four compliance levels: AA Normal Text (4.5:1), AA Large Text (3:1), AAA Normal Text (7:1), and AAA Large Text (4.5:1). If your colors fail, the tool suggests the nearest accessible alternative so you can fix accessibility issues without redesigning your entire palette.

WCAG Contrast Levels Explained

AA Normal Text

4.5:1 minimum

Requires a minimum contrast ratio of 4.5:1. This is the most common compliance target and applies to body text under 18pt (or 14pt bold).

AA Large Text

3:1 minimum

Requires a minimum contrast ratio of 3:1. Applies to text that is at least 18pt (24px) or 14pt bold (18.66px bold).

AAA Normal Text

7:1 minimum

The highest standard, requiring 7:1 contrast ratio. Ensures readability for users with moderately low vision (approximately 20/80).

AAA Large Text

4.5:1 minimum

Requires 4.5:1 for large text at the AAA level. Provides enhanced readability for headers and display text.

Tips for Accessible Color Design

1

Start with contrast

Choose your text and background colors with contrast in mind from the beginning. Retrofitting accessibility is much harder than building it in from the start.

2

Don't rely on color alone

Use icons, patterns, underlines, or labels alongside color to convey meaning. About 8% of men have some form of color blindness.

3

Test on real devices

Colors look different on monitors, phones, and in bright sunlight. Test your contrast ratios on actual devices, not just in your design tool.

4

Use dark mode too

If your site supports dark mode, verify contrast ratios for both themes. A color pair that passes in light mode may fail in dark mode.

5

Mind the font weight

Thin and light font weights reduce perceived contrast. If you use weights below 400, aim for a higher contrast ratio than the minimum.

6

Check interactive states

Hover, focus, and active states often use different colors. Make sure all interactive states meet contrast requirements, not just the default.

Contrast Checker Comparison

FeatureKleapWebAIMCoolorsAdobe Color
PriceFreeFreeFreemiumFree (with Adobe account)
Real-time PreviewYes, live text on backgroundYes, basicYesYes
Nearest Accessible ColorYes, auto-suggestedNoNoPartial
WCAG Levels TestedAA + AAA (normal + large)AA + AAAAA onlyAA + AAA
Built-in Website BuilderYes, AI-poweredNoNoNo
Swap Colors ButtonYesNoNoNo
Random Accessible PairYesNoNoNo

Frequently Asked Questions

What is a color contrast ratio?+
A color contrast ratio is a numerical value that represents the difference in luminance (perceived brightness) between two colors. It ranges from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, black on white). The ratio is calculated using the WCAG 2.1 relative luminance formula, which accounts for how the human eye perceives different wavelengths of light.
What WCAG contrast ratio do I need?+
For WCAG 2.1 Level AA compliance (the most widely required standard), normal body text needs at least 4.5:1 contrast, and large text (18pt+ or 14pt+ bold) needs at least 3:1. For Level AAA (the highest standard), normal text needs 7:1 and large text needs 4.5:1. Most legal accessibility requirements reference Level AA.
What counts as large text in WCAG?+
Large text in WCAG is defined as text that is at least 18 points (24 CSS pixels) or 14 points bold (approximately 18.66 CSS pixels bold). This corresponds to roughly heading-sized text. Large text has lower contrast requirements because its larger size makes it inherently easier to read.
Does WCAG apply to images and icons?+
Yes, WCAG 2.1 Success Criterion 1.4.11 requires that UI components (like icons, form borders, and focus indicators) and graphical objects have at least 3:1 contrast against adjacent colors. This is separate from the text contrast requirements and was introduced in WCAG 2.1.
How is contrast ratio calculated?+
The contrast ratio uses the relative luminance formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker. Relative luminance is calculated by converting sRGB values to linear light (using gamma correction) and weighting them: 0.2126*R + 0.7152*G + 0.0722*B. The weights reflect human eye sensitivity — we perceive green as brightest.
Is WCAG AA enough for my website?+
WCAG AA is the standard referenced by most accessibility laws worldwide, including the ADA (US), EAA (EU), and EN 301 549 (Europe). For most websites and apps, AA compliance is both legally sufficient and provides good readability. AAA is recommended for government sites, healthcare, and education, but is not typically required by law.
What if my brand colors fail contrast?+
You have several options: slightly adjust the shade of your brand color (often a small lightness change is enough), use your brand color for decorative elements only and a high-contrast color for text, increase font size to qualify for the large text threshold, or add a semi-transparent overlay behind text placed on colored backgrounds. Our tool suggests the nearest accessible color automatically.
Does contrast matter for dark mode?+
Absolutely. The same WCAG contrast requirements apply regardless of the color scheme. In fact, dark mode introduces unique challenges: pure white (#FFFFFF) text on a very dark background can cause halation (a glowing effect) for users with astigmatism. A slightly off-white (#E0E0E0 to #F0F0F0) on a dark gray (#1A1A1A to #2D2D2D) often provides better readability while still meeting AA standards.
Can colorblind users see enough contrast?+
High contrast ratios help colorblind users significantly, but contrast alone is not sufficient. WCAG also requires that color is not the sole means of conveying information (1.4.1). For example, don't use only red/green to indicate error/success — add icons or text labels. The contrast ratio formula accounts for luminance, not hue, so it helps across all types of color blindness.
How do I test contrast in my existing website?+
You can use browser DevTools (Chrome's Lighthouse audit includes contrast checks), browser extensions like axe or WAVE, or paste your exact HEX/RGB values into this tool. For comprehensive testing, use automated tools like Lighthouse for a full-page scan, then manually verify any flagged elements. Remember to test hover states, focus styles, and placeholder text — these are commonly missed.

Build an Accessible Website with AI

Use your accessible color combinations to build a complete, WCAG-compliant website with Kleap's AI website builder.

Start Building for Free

Related Free Tools

CSS Gradient Generator

Color Picker

Color Palette Generator

Button Generator

Free Color Contrast Checker | WCAG Accessibility Tool 2026