WCAG Contrast Checker

What this tool does

The Contrast Checker tests whether two colours meet accessibility contrast ratios for normal text, large text, and UI components under WCAG 2.x guidelines.

It updates live as you change foreground and background colours, so you can fix illegible buttons and body copy before launch.

Low contrast is one of the most common UI issues: pale grey on white may look sleek in a mockup but fail for readers with low vision or in bright rooms. Check primary text, secondary labels, and interactive states (hover, disabled) so the whole interface stays readable.

Pair this tool with the Color Palette Generator and the accessible colour system guide when you are defining a full theme, not only a single button.

How to use it

1. 1Enter or pick a foreground (text) colour.
2. 2Enter or pick a background colour.
3. 3Read the contrast ratio and pass/fail badges for AA and AAA levels.
4. 4Swap colours if needed and retest variations (hover states, borders).
5. 5Copy the winning pair into your stylesheet or design system.
6. 6Retest dark mode or alternate theme surfaces with the same text colour if your product supports themes.
7. 7Sample the lightest and darkest regions if text sits on a gradient, not only the average colour.

Practical tips

• AA is the common baseline; aim higher for small text on tinted backgrounds when you can.
• Test links, placeholders, and error text, not only hero headlines.
• Disabled styles can be quieter, but critical information should never rely on a failing pair.
• Never use colour alone to mean error; pair it with text or an icon.

Frequently asked questions

What contrast ratio do I need?

WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). AAA targets 7:1 and 4.5:1 respectively for stricter accessibility.

Does this check non-text elements?

UI components and graphical objects generally need at least 3:1 against adjacent colours. Use the ratio as a guide for icons and form borders too.

Is passing AA enough?

AA is the common legal and industry baseline. AAA is better when you can achieve it without harming design, especially for small text on tinted backgrounds.

Why did my Figma plugin disagree slightly?

Rounding, colour spaces, and which pixels were sampled can differ. Treat borderline scores carefully and prefer pairs that pass clearly.

Do gradients need special treatment?

Yes. Contrast changes across a wash. Check the worst region under your text, or place copy on a solid scrim instead.

Should dark mode reuse light-theme pairs?

Retest. Inverting or slightly tweaking colours often changes ratios. Keep separate tokens for dark surfaces when needed.

Related guide

Dig deeper in Build an accessible colour system for UI (palette to contrast). Choose brand colours, check WCAG contrast, and ship gradients that still keep text readable across buttons, body copy, and dark mode.

Or browse all ToolzWorx guides.