Contrast Checker

Check WCAG accessibility contrast ratio between foreground and background colors

What is it and how does it work?

A contrast checker measures the contrast ratio between a foreground colour and a background colour, and tells you whether it meets the WCAG accessibility standards for readable text. Contrast ratio is a number from 1:1 (identical colours, invisible) to 21:1 (black on white), and the higher it is, the easier text is to read — especially for people with low vision, colour deficiencies, or anyone using a screen in bright sunlight. You enter two colours and get the exact ratio plus a clear pass or fail against the recognised thresholds.

This matters because light-grey-on-white and other low-contrast combinations look elegant in a design but are genuinely hard to read for a large share of users, and contrast is one of the most common and most checkable accessibility failures. The WCAG guidelines set specific minimums — 4.5:1 for normal text and 3:1 for large text at the AA level — so a checker turns "is this readable?" from a guess into a verifiable answer. This tool computes the ratio in your browser as you adjust the colours.

Common use cases

• Checking body text: verify that your text colour on its background meets at least 4.5:1 for normal-size reading.
• Designing accessible UI: test button and label colours against their backgrounds before shipping a component.
• Fixing a failing combination: adjust a foreground or background colour until the ratio passes the required level.

Frequently asked questions

What contrast ratio do I need?

Under WCAG AA, normal text needs at least 4.5:1 and large text (roughly 18pt, or 14pt bold) needs 3:1. The stricter AAA level asks for 7:1 and 4.5:1 respectively. The checker shows your ratio against these thresholds so you know exactly which it passes.

Why does contrast matter for accessibility?

Low contrast text is hard or impossible to read for people with reduced vision, colour vision deficiencies, or anyone in poor lighting. Sufficient contrast is one of the most impactful and easily measured accessibility requirements, which is why WCAG sets explicit minimums.

Does the rule differ for large text?

Yes. Larger and bolder text is more legible at lower contrast, so the standard relaxes the requirement for it — 3:1 at AA instead of 4.5:1. The checker accounts for this distinction so large headings are judged by the correct threshold.

What is the highest possible contrast ratio?

The maximum is 21:1, which is pure black on pure white. The minimum is 1:1, two identical colours with no contrast at all. Every real colour pair falls somewhere between, and the goal is to clear the threshold for your text size.

Color

Color Palette Generator · CSS Gradient Generator · Color Mixer · Color Name Finder