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.

How to use

1. Enter or pick a foreground (text) color and a background color using the color pickers or hex inputs.
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.

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.

Related Tools