How to Check WCAG Color Contrast for Your Website (Free Tool)

Color contrast is one of the most commonly overlooked accessibility requirements in web design — and one of the easiest to fix once you know what to look for. Whether you are building a landing page, choosing a brand palette, or reviewing a design before launch, checking contrast ratios takes less than a minute and prevents real problems for real users.

This guide covers what WCAG contrast ratios actually mean, how to check any combination with a free browser tool, and what to do when your colors fail.

Why Color Contrast Matters

Around 300 million people worldwide have some form of color vision deficiency. Many more experience reduced contrast sensitivity due to age, bright ambient light, or low-quality screens. When text and background colors are too similar, content becomes hard or impossible to read for a significant portion of your audience.

Beyond accessibility, contrast is also a legal and compliance consideration. WCAG — the Web Content Accessibility Guidelines — defines contrast requirements that are referenced in accessibility laws in the US, EU, UK, and many other jurisdictions. Failing these requirements can expose organizations to audits, complaints, or legal risk.

The good news is that contrast compliance is one of the most straightforward accessibility requirements to test and fix. You do not need specialized software. You just need to know the ratio and check it.

How WCAG Contrast Ratios Work

WCAG defines contrast as a ratio between the relative luminance of two colors. The scale runs from 1:1, which means no contrast at all — for example, black text on a black background — to 21:1, which is the maximum contrast between pure black and pure white.

The guidelines define two compliance levels for text contrast:

• AA (minimum) — requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Large text is generally defined as 18pt regular or 14pt bold.
• AAA (enhanced) — requires at least 7:1 for normal text and 4.5:1 for large text. This is the stricter standard, often used for critical interfaces like government, healthcare, or financial applications.

AA is the standard target for most websites. AAA is worth aiming for in content-heavy areas where readability is critical, but it is more of a best-practice goal than a hard requirement for every element.

Non-text elements like icons, borders, and interactive components have their own requirement: a contrast ratio of at least 3:1 against adjacent colors. This is part of WCAG 1.4.11 (Non-text Contrast), which was introduced in WCAG 2.1.

How to Check Contrast with the DecoToolkit Color Picker

The DecoToolkit Color Picker and Converter includes a built-in WCAG contrast checker. Here is how to use it.

Open the Color Picker tool and enter your foreground color — typically the text color — in any format: HEX, RGB, or HSL. Then enter your background color. The tool calculates the contrast ratio instantly and displays whether the combination passes AA or AAA for both normal and large text.

If you are working from a design file, you can use the color picker component to sample the exact value from your palette. The tool also shows conversions across all common formats, so you can verify colors regardless of how they are defined in your CSS or design system.

For quick spot-checks during development, this is much faster than opening a dedicated accessibility tool or waiting for a full audit. You can check every text-background combination in a layout in a few minutes.

Common Contrast Failures and Why They Happen

Most contrast failures are not intentional design choices. They happen for a few predictable reasons.

• Light gray text on white — A popular minimal aesthetic, but light gray on white often falls well below 4.5:1. The combination looks clean in mockups on calibrated design screens but becomes hard to read on mobile devices, in direct sunlight, or for users with reduced contrast sensitivity.
• Brand colors used for body text — Many brand palettes are built around distinctive, memorable colors, not readability. A medium-saturation brand color that works well for logos or CTAs can fail badly when used as paragraph text.
• Colored text on colored backgrounds — Combinations like blue on purple, yellow on white, or green on teal are common in UI designs. Many of these look fine to designers in the moment but fail contrast checks.
• Placeholder text in forms — Placeholders are frequently styled at reduced opacity or in a deliberately lighter color to visually distinguish them from user input. This is fine as a convention, but placeholder contrast still needs to meet 4.5:1 under WCAG 1.4.3.

The fix is usually a small adjustment. Darkening a light text color by one or two steps on the luminance scale is often all it takes to move from failing to passing without changing the visual impression significantly.

Fixing Colors That Fail

When a color combination fails the contrast check, you have several paths forward.

The simplest approach is to darken the foreground color or lighten the background color until the ratio reaches 4.5:1. The Color Picker tool lets you adjust HSL values interactively and see the contrast ratio update in real time, which makes this process fast.

If the color is part of a brand palette and cannot be changed, consider using the problematic color only for large text, decorative elements, or non-critical UI components — areas where the stricter 4.5:1 requirement does not apply.

Another option is to add a text shadow, border, or background to improve local contrast. This is a common approach for overlaid text on images or gradients, where the underlying colors vary and a static ratio check is not sufficient.

For gradients, the DecoToolkit CSS Gradient Generator can help you visualize and design gradients where the start and end points maintain acceptable contrast against overlaid content. This is especially relevant for hero sections, banners, and call-to-action buttons with gradient fills.

Contrast Beyond Text

Once you have your text contrast sorted, it is worth checking non-text elements too. Buttons, icons, input borders, focus indicators, and charts all have contrast requirements under WCAG 1.4.11.

Focus indicators deserve special attention. They are often styled with light outlines that disappear against certain backgrounds. A good focus indicator should have at least 3:1 contrast against the adjacent UI and be visible enough to guide keyboard and switch-access users through the interface.

Icons used as the sole indicator of meaning — for example, a close button with no label — also need 3:1 contrast against their background. If an icon is purely decorative and accompanied by a text label, contrast requirements are more relaxed.

Frequently Asked Questions

What contrast ratio do I need to pass WCAG AA?

For normal-sized body text, you need a contrast ratio of at least 4.5:1 between text and background. For large text — defined as 18pt or 14pt bold — the minimum is 3:1. AA is the standard compliance target for most websites and applications.

Does contrast apply to images?

WCAG contrast requirements apply to text and user interface components, not to photographs or decorative images. However, if text is overlaid on an image, the text must have sufficient contrast against the portion of the image it sits on. This is where semi-transparent backgrounds, text shadows, and gradient overlays are useful.

Is a 3:1 ratio ever enough for body text?

A 3:1 ratio meets the minimum for large text under WCAG AA but does not meet the 4.5:1 requirement for normal body text. If your body text is consistently at 18pt or larger, 3:1 is technically sufficient for AA, but most sites use a mix of text sizes, so targeting 4.5:1 across all text is the safest approach.

Do placeholder colors need to pass contrast checks?

Yes. Under WCAG 1.4.3, placeholder text in form inputs must meet the same 4.5:1 contrast requirement as regular text. A common mistake is styling placeholders with reduced opacity or a very light gray, which often fails the check. The WCAG Understanding document recommends treating placeholder text the same as any other visible text.

What is the contrast ratio for pure black on white?

Pure black (#000000) on pure white (#FFFFFF) has the maximum possible contrast ratio of 21:1. This combination will always pass both AA and AAA requirements. Near-black text on near-white backgrounds typically still passes comfortably, which is why dark gray body text on white backgrounds is both readable and compliant.

Conclusion

Color contrast is one of the most accessible (in every sense) parts of web accessibility to get right. It requires no specialized tooling, no complex code changes, and no deep accessibility expertise — just a few minutes with a contrast checker and a willingness to tweak a few values.

The DecoToolkit Color Picker gives you instant contrast ratios for any color combination, directly in your browser. Use it during design, during development, and before launch. A quick pass over your text and background combinations is one of the fastest ways to make your site more usable for more people.