Color Contrast Checker (WCAG)

Check if a foreground/background colour pair meets WCAG AA and AAA accessibility standards.

Studio · neutral surround

Contrast ratio

— : 1

AA · body text ≥ 4.5

AA · large text ≥ 3.0

AAA · body text ≥ 7.0

AAA · large text ≥ 4.5

One-click fix · keeps the hue

Text color

Background

Specimen

Features

Contrast ratio display

WCAG AA/AAA status

Live text preview

Normal & large text

How to Use

1. Set the text and background colors — the specimen and WCAG verdict update live.

2. Switch specimens (type / article / interface) to judge the pair in realistic use; press S to swap the two colors.

3. If a level fails, use the one-click fix — it adjusts lightness only, keeping your hue — or copy the WCAG report.

About this tool

Text that is too close in brightness to its background is hard to read for everyone and impossible for some people. The Web Content Accessibility Guidelines (WCAG) measure this with a contrast ratio from 1:1 to 21:1, based on the relative luminance of the two colours. Level AA asks for at least 4.5:1 for body text and 3:1 for large text (24px, or about 18.66px bold); Level AAA raises that to 7:1 and 4.5:1. This checker calculates the ratio live, shows pass or fail for all four thresholds, and renders a real type specimen, article and interface so you can judge the pair in context. If a level fails, it suggests the nearest text colour that passes by changing lightness only.

Frequently Asked Questions

How is the contrast ratio calculated?

Each colour is converted to relative luminance using the sRGB formula in WCAG 2, then the ratio is (L1 + 0.05) ÷ (L2 + 0.05), where L1 is the lighter colour. Black on white gives the maximum of 21:1; identical colours give 1:1.

What counts as large text?

WCAG defines large text as at least 18 point (24 CSS pixels) regular, or 14 point (about 18.66 CSS pixels) bold. Large text only needs 3:1 for AA and 4.5:1 for AAA because bigger letterforms are easier to read.

Does passing AA mean my design is accessible?

Contrast is one requirement among many. Thin fonts, text over photos, small sizes and colour used as the only signal can still cause problems, so test real screens and pair contrast with other accessibility checks.

How does the suggested fix work?

It keeps the hue of your text colour and searches lighter or darker versions until the target ratio is reached. If no lightness value can reach it against your background, the tool says so and you need to change the background instead.

Do contrast rules apply to icons and buttons?

Yes. WCAG 2.1 asks for at least 3:1 for meaningful non-text elements such as icons, input borders and focus indicators. Purely decorative graphics and disabled controls are exempt.