Color Contrast Checker

What is the Color Contrast Checker?

The Color Contrast Checker is a free accessibility tool that measures the contrast ratio between a foreground (text) color and a background color, then tells you whether that pair meets the WCAG 2.1 accessibility guidelines. Pick two colors and it instantly returns a ratio like 4.5:1 plus clear PASS or FAIL badges for AA and AAA at both normal and large text sizes.

Contrast is one of the most common accessibility failures on the web, and it directly affects whether people with low vision, color blindness, or aging eyes can read your content. This checker runs entirely in your browser, so nothing you enter is uploaded or stored.

How to use the color contrast checker

1. Choose a foreground color for your text using the native color picker or by typing a hex value.
2. Choose a background color the same way.
3. Read the contrast ratio and check the PASS/FAIL badges for WCAG AA and AAA.
4. Watch the live preview to see real sample text rendered in your exact colors.
5. If a combination fails, use Suggest a passing color to nudge the lightness until it clears your target level.

What is a good contrast ratio?

WCAG expresses contrast as a ratio between 1:1 (no contrast, identical colors) and 21:1 (pure black on pure white). The higher the number, the easier the text is to read. The thresholds you need to remember are:

• 4.5:1 — minimum for normal body text at WCAG AA (the level most laws and policies require).
• 3:1 — minimum for large text (about 18.66px bold or 24px regular and larger) at AA, and for UI components, icons, and focus indicators under WCAG 1.4.11.
• 7:1 — enhanced AAA level for normal text, ideal for long-form reading or users with low vision.
• 4.5:1 — AAA level for large text.

As a rule of thumb, aim for 4.5:1 on everything you can, and treat 3:1 as the floor for oversized headings and interface elements only.

How the contrast ratio is calculated

The tool uses the official WCAG relative-luminance formula. Each color's red, green, and blue channels are converted from sRGB to linear values, weighted (green counts most, blue least), and summed into a single luminance figure. The ratio is then (L_lighter + 0.05) / (L_darker + 0.05). Because the formula is perceptual rather than a simple color distance, two colors that look different to you can still fail if their luminance is close. If you want to inspect the underlying channel values, our Hex to RGB Converter breaks any hex code into its exact red, green, and blue components.

Why use a WCAG contrast checker

• Accessibility compliance: Meet WCAG 2.1, ADA, Section 508, and EN 301 549 requirements before you ship.
• Real readability: Good contrast helps everyone, including sighted users on dim screens or in bright sunlight.
• Faster design decisions: The live preview and instant badges let you test dozens of pairs in seconds.
• Private by design: All calculations happen client-side, so your brand colors never leave your machine.

When to use this instead of a color generator

This tool is built for auditing accessibility, not for inventing new palettes. If you are still choosing colors, start with the HTML Color Picker to grab exact hex codes, or generate a full scheme with the Color Palette Generator. Once you have candidate colors, bring the pairs here to confirm the text will actually be legible. The same discipline applies to backgrounds built with the CSS Gradient Generator — check text against both the lightest and darkest stops of the gradient so it stays readable across the whole surface.

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 (roughly 18.66px bold or 24px regular and above). Meeting AA is what most accessibility laws and policies require.

What counts as large text?

WCAG defines large text as 18.66px (14pt) bold or 24px (18pt) regular and larger. Large text is easier to read, so it is allowed a lower 3:1 contrast threshold instead of 4.5:1.

Does this checker send my colors anywhere?

No. Every calculation runs locally in your browser using JavaScript. No colors are uploaded, logged, or stored, so you can safely test unreleased brand colors.

Why do two colors that look different still fail the test?

Contrast depends on relative luminance, not on how different the hues appear. Two vivid colors with similar brightness (for example, medium red on medium green) can have a low ratio and fail even though they look distinct.

How does the suggest-a-passing-color helper work?

It keeps the color's hue and saturation but adjusts its lightness step by step until the pair reaches your chosen target ratio, then applies the nearest passing value. It is a fast way to fix a failing combination without redesigning your palette.

Is 3:1 ever enough for body text?

No. 3:1 only satisfies AA for large text, UI components, and graphical objects. Regular paragraph text must reach 4.5:1 for AA, and 7:1 if you are targeting the stricter AAA level.