Color Contrast Checker

About this tool

Check whether a foreground (text) and background color pair meets the WCAG accessibility contrast guidelines. Enough contrast makes text readable for people with low vision or color blindness — and is required for many accessibility compliance standards.

The formula. WCAG contrast isn't a simple RGB comparison. Each color is first converted to a relative luminance — its perceived brightness, with each channel gamma-corrected (linearized) before being weighted 0.2126 red, 0.7152 green, 0.0722 blue, reflecting how much each color contributes to how bright a color looks to the human eye. The ratio is then (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the lighter and darker luminance values. The result ranges from 1:1 (identical colors, no contrast at all) to 21:1 (pure black on pure white, the maximum possible).

Why this matters. The World Health Organization estimates over 2.2 billion people live with some degree of vision impairment, and roughly 1 in 12 men (and 1 in 200 women) have some form of color vision deficiency. Low contrast text that looks fine to a designer on a calibrated monitor can be unreadable in bright sunlight, on a cheap screen, or to someone with low vision — which is why WCAG 2.1's Success Criterion 1.4.3 (AA) and 1.4.6 (AAA) exist, and why contrast is one of the most commonly cited issues in accessibility audits and lawsuits under laws like the ADA (US) and EN 301 549 (EU).

Some reference points:

Placeholder text, disabled buttons, and light-gray "secondary" UI text are the most common places a design accidentally fails — they're deliberately muted, but muted often means low contrast too.

Contrast isn't the whole accessibility picture. A pair can pass every ratio here and still cause problems if color is the only way information is conveyed — for example, marking an error solely by turning text red. Roughly 1 in 12 men can't reliably distinguish red from green, so pair color with an icon, label, or underline. Check how a palette actually reads for color-blind visitors with the colorblind simulator, build accessible palettes from scratch with the color palette generator, or convert between color formats with the color converter.

Frequently asked questions

What's the difference between AA and AAA?

AA is the standard WCAG conformance level, requiring a 4.5:1 ratio for normal text (3:1 for large text). AAA is a stricter, enhanced level requiring 7:1 for normal text (4.5:1 for large text).

What counts as "large text"?

WCAG defines large text as 18pt (24px) or larger, or 14pt (18.66px) bold or larger — large text gets a lower contrast requirement since it's easier to read at low contrast.

How is the ratio calculated?

Using the WCAG relative luminance formula for each color, then comparing the lighter and darker luminance values — the result ranges from 1:1 (no contrast) to 21:1 (black on white).

Which level should I target — AA or AAA?

AA is the level almost every accessibility law and audit actually requires, and is achievable for nearly any design. AAA is stricter and worth aiming for on body text where possible, but can be impractical for brand colors or large decorative text — WCAG itself doesn't require AAA site-wide.

Is there a newer, more accurate model than this ratio?

Yes — APCA (Accessible Perceptual Contrast Algorithm), developed for the upcoming WCAG 3, accounts for font weight and size and is considered more perceptually accurate, especially for dark mode. It's not yet a finalized standard, so the WCAG 2.x ratio calculated here remains the one legal and audit requirements currently reference.

Does passing this check mean my design is fully accessible to color-blind users?

Not by itself. Contrast ratio treats color as brightness only, so two colors can have great contrast yet still be hard for a color-blind visitor to distinguish from each other if they're relying on hue alone (e.g., a red/green status pair at equal brightness). Use the colorblind simulator to check that separately.