Color Contrast Checker

WCAG color contrast checker for text and interface colors

Use this color contrast checker to compare a foreground and background, resolve transparency over an explicit canvas, and inspect the resulting contrast ratio. The WCAG contrast checker reports AA and AAA text thresholds plus a focused 3:1 color-pair result for controls and graphics, making it useful as an accessibility color checker during interface work.

How to check foreground and background contrast

1. Enter foreground, background, and canvas colors as HEX, RGB, or HSL. Use alpha when the foreground or background is translucent, or convert a HEX code to RGB or HSL first if you only have one format.
2. Review the resolved colors, ratio, normal and large text results, and the component preview.
3. Choose a 3:1, 4.5:1, or 7:1 target, apply a suggested foreground, then copy, download, or share the CSS.

WCAG AA, AAA, large-text, and 3:1 thresholds

Use this as an AA contrast checker for normal and large text, or an AAA contrast checker when the higher targets apply. WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text; AAA raises those targets to 7:1 and 4.5:1. Large text generally means at least 18 point regular or 14 point bold. The separate 3:1 foreground and background contrast result evaluates only the tested color pair for a control or graphic; it does not by itself establish non-text conformance.

Why translucent colors need an explicit canvas

A translucent color has no final contrast until every layer behind it is known. This text contrast checker composites the opaque canvas first, then the background, then the foreground. The displayed ratio therefore describes the resolved browser colors rather than silently assuming white behind every transparent value.

High contrast colors depend on the pair and the context

What are contrast colors? They are colors whose resolved luminance difference creates a readable or distinguishable pair in a specific use. An accessible color combination for one component may fail in another state, and the best contrasting colors are not universal: black may work on a pale yellow background while a lighter gray fails. A yellow-background contrast-colour choice should still be measured against the exact yellow, text size, weight, and component state you will ship.

Find a darker or lighter accessible foreground

When the current pair misses the selected target, the checker searches deterministic darker and lighter sRGB paths for the nearest exported foreground values that pass. It preserves foreground alpha when possible and clearly labels an opaque alternative when transparency makes the target unreachable. To adjust the foreground color by hand and see tints and shades of it, open it in the color picker.

A passing color pair is not a complete accessibility audit

This calculation does not prove that a whole page conforms. Real typography, gradients, images, icons, interaction states, focus indicators, disabled controls, boundaries, and surrounding colors still need inspection in the rendered interface. Use the result as one precise measurement inside a broader accessibility review.

Private contrast checking in your browser

Parsing, alpha compositing, contrast calculation, suggestions, preview rendering, and CSS generation happen locally in this browser. Analytics exclude exact colors, ratios, pass or fail results, generated CSS, and share-state values. A share URL contains colors only when you explicitly create it.

Frequently asked questions

What contrast ratio does WCAG AA require?

WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. The checker reports both results separately because font size and weight determine which threshold applies.

What contrast ratio does WCAG AAA require?

WCAG AAA requires at least 7:1 for normal text and 4.5:1 for large text. AAA is a higher text-contrast target, not a declaration that every other accessibility requirement passes.

What counts as large text for contrast testing?

Large text generally means at least 18 point regular text or 14 point bold text. CSS pixels and rendered font metrics can vary, so verify the actual size and weight used in the interface.

Do controls and icons need 3:1 contrast?

Many meaningful controls, focus indicators, and graphical objects need a 3:1 contrast relationship against adjacent colors. This tool reports the tested pair only; whether the requirement applies depends on the element and state.

Does a passing color pair prove that my page conforms?

No. A passing pair covers one contrast calculation. Typography, images, gradients, icons, controls, hover and disabled states, focus indicators, structure, keyboard access, and the full rendered page still require review.