What is Contrast Checker WCAG?

A WCAG color contrast checker that calculates the contrast ratio between foreground and background colors and reports whether the combination meets WCAG 2.1 Level AA and AAA accessibility standards for normal and large text.

The checker computes the WCAG 2.1 relative-luminance ratio between any two colours — typed as hex, rgb(), hsl(), or a CSS name — and grades the result against AA (4.5:1 for body text, 3:1 for large text) and AAA (7:1 and 4.5:1). It also evaluates the 3:1 floor for UI components like form borders and icons. When a combo fails, the suggestions panel walks toward a passing colour by darkening or lightening the foreground, offering both AA and AAA targets.

How to use

1. Enter or pick a foreground (text) color and a background color — paste hex, rgb(), hsl(), or a CSS color name, or use the color pickers.
2. View the contrast ratio and pass/fail results for WCAG AA and AAA compliance across normal text, large text, and UI components.
3. If the contrast fails, use the suggested color adjustments to find the nearest accessible color combination.

When to use

• Auditing brand colours against a white or dark background before shipping a landing page.
• Picking accessible button states for default, hover, and disabled.
• Checking placeholder text and disabled inputs that often slip below 4.5:1.

Result

A UI designer checks their brand blue #3B82F6 on white #FFFFFF — the 4.5:1 ratio passes AA for large text but fails AAA for normal text. They darken to #2563EB (5.3:1) to pass both.

FAQ

What ratio do I need for body text to pass WCAG AA?

4.5:1 against its background. Large text (at least 18pt regular or 14pt bold) drops to 3:1. AAA bumps those to 7:1 and 4.5:1 respectively. UI components like input borders only need 3:1.

Why does my dark grey on white fail when it looks fine to me?

Personal readability and measured contrast diverge fast. A 4:1 ratio looks crisp on a calibrated screen in good light but breaks down for users with low vision, glare, or older monitors. WCAG sets the bar for the worst case, not the best.

Do icons and form borders need the same contrast as text?

No. WCAG 2.1 added a 3:1 rule for non-text components — borders, icons, focus indicators, chart elements. Decorative graphics are exempt, but anything that conveys information has to meet the 3:1 floor against adjacent colours.

How do I fix a failing combination without changing my brand?

Adjust the background instead of the foreground when the brand colour is fixed. Darken or lighten it until the ratio passes. The suggestions panel here moves the foreground in tiny steps; you can take the same approach for the background if needed.

Does WCAG include rules for transparent text or text over images?

WCAG asks you to evaluate the worst-case pixel under the text. For text on photos, that usually means adding a tinted scrim or solid plate behind the words. Test the actual rendered colours, not just the hex values you started with.

Related Tools