Color Contrast Checker

Enter a text color and a background color — as hex, rgb(), hsl(), or a CSS name — and the checker scores the pair against every WCAG 2.2 contrast requirement at once: AA and AAA for normal text, AA and AAA for large text, and the 3:1 non-text contrast rule for UI components like input borders, icons, and focus indicators. A live preview shows the pair at body, large, and fine-print sizes next to an outlined button and a field border, so you can judge it by eye as well as by number.

When a pair fails, the checker doesn't just say so. It finds the nearest passing color for the level you pick — once by changing the text color and once by changing the background — adjusting only lightness, so the hue and saturation of your brand color survive. Click Use to apply a suggestion and keep tweaking.

Transparency is measured the way it renders

Translucent colors (#00000080, rgba(), hsla(), or the opacity sliders) are blended before measuring, exactly as a browser paints them: the background onto the page behind it (white unless you change it in Options), then the text onto that result. Many checkers ignore alpha or treat it as opaque, which overstates the contrast of semi-transparent text — a common source of failed audits on "muted" grey labels.

WCAG 2.2 and APCA

The pass/fail results use the WCAG 2.x contrast ratio, which is what WCAG 2.2, the ADA, Section 508, and the European Accessibility Act audits measure today. Ratios are compared unrounded and displayed truncated, so a failing 4.497:1 shows as 4.49:1 rather than a misleading 4.50:1.

The APCA Lc value is shown alongside for reference. APCA (Accessible Perceptual Contrast Algorithm) is the method proposed for WCAG 3: it models how perceived contrast depends on polarity and lightness, so dark-on-light and light-on-dark pairs with the same ratio can score differently. Its sign tells you the polarity (negative means light text on a dark background). It isn't a conformance requirement yet, but it is a useful second opinion — especially for dark themes, where the WCAG 2 ratio is known to be generous.

Common uses

• Check brand colors before they go into a design system, and find the closest accessible variant of a failing one
• Fix grey placeholder, caption, and disabled-looking text that fails AA
• Verify button, input border, and icon colors against the 3:1 non-text rule
• Audit translucent overlays and text on tinted cards in dark mode

Example

Text:       #999999
Background: #ffffff

2.84:1 — fails AA (4.5:1) and AA large (3:1)
APCA Lc 54.6
Nearest AA text color: #767676 (4.54:1)

Text:       rgba(0, 0, 0, 0.5)
Background: #ffffff

Blended text: #808080 on #ffffff
3.97:1 — passes AA large text and UI components only

Limitations

• Contrast is one part of readable text. Font weight, size, letter spacing, and anti-aliasing matter too, and a thin font can fail in practice while passing on paper.
• Text over images or gradients has no single background color; check it against the lightest and darkest areas behind the text.
• Suggestions change HSL lightness only. If no lightness reaches the target (a mid-grey background can't reach 7:1 with any text color), the checker says so and you need to change the other color.

What contrast ratio does WCAG 2.2 require?

Level AA needs at least 4.5:1 for normal text and 3:1 for large text, plus 3:1 for UI components and meaningful graphics (success criterion 1.4.11). Level AAA raises text to 7:1 for normal text and 4.5:1 for large text. Most laws and accessibility policies point to level AA.

What counts as large text for WCAG?

Text that is at least 18 point (24 CSS pixels) at a regular weight, or at least 14 point (about 18.66 CSS pixels) when bold. Everything smaller is normal text and needs the higher 4.5:1 ratio at level AA.

Is 4.49:1 close enough to pass AA?

No. WCAG thresholds are minimums with no rounding, so 4.49:1 — or even 4.499:1 — fails the 4.5:1 requirement. This checker truncates the displayed ratio rather than rounding it, so it never shows a passing-looking number for a failing pair.

How do I fix a color that fails contrast without changing my brand color?

Change its lightness, not its hue. The suggestions here keep the hue and saturation and move lightness by the smallest amount that reaches your target, either on the text or on the background. Many design systems keep the original brand color for large headings and buttons and use the darker suggested variant for body-size text.

How is contrast calculated for transparent or semi-transparent colors?

The colors are blended first, the way a browser draws them: a translucent background is blended onto the page color behind it, then translucent text is blended onto that. The ratio is measured between the two resulting solid colors. Black text at 50% opacity on white, for example, becomes #808080 and only reaches 3.97:1.

What is APCA and should I use it instead of the WCAG ratio?

APCA is the contrast method proposed for WCAG 3. It accounts for text polarity and how contrast perception changes with lightness, and reports a lightness contrast value (Lc) instead of a ratio — around Lc 75 is the guideline minimum for body text. WCAG 3 is still a draft, so use the WCAG 2.2 ratio for compliance and APCA as an extra check, particularly for dark themes.

Do placeholder text, disabled buttons, and logos need to meet contrast?

Disabled controls and logos are exempt from WCAG contrast requirements, and so is purely decorative text. Placeholder text is not exempt — it is real text, so it needs 4.5:1 (or 3:1 if large) like any other text, which is why light grey placeholders so often fail audits.