Color Contrast Checker

What is Color Contrast Checker?

Color Contrast Checker is a free online WCAG and APCA contrast checker for designers, developers, and accessibility testers. It accepts colors as HEX (#rgb, #rrggbb, and 8-digit #rrggbbaa with alpha), rgb()/rgba() and hsl()/hsla(), composites a translucent foreground over the background before measuring, and reports both the WCAG 2.1 ratio (1:1 to 21:1) and the APCA Lc lightness-contrast score. It flags WCAG 2.1 Level AA (4.5:1 normal, 3:1 large) and AAA (7:1 normal, 4.5:1 large), adds a 3:1 badge for non-text UI components and graphics, and can suggest the nearest passing foreground — nudging only its lightness until it meets AA or AAA — which you apply with one click.

How to use Color Contrast Checker

1. Enter the foreground (text) color as HEX, rgb() or hsl() — 8-digit hex or rgba with alpha is accepted — or click the color picker to choose one visually.
2. Enter the background color the same way; a semi-transparent foreground is composited over it (and the background over white) before contrast is measured.
3. Use the Swap button to flip the foreground and background at any time.
4. Read the WCAG 2.1 contrast ratio and the APCA Lc score shown right beside it.
5. Check the AA and AAA badges for normal and large text, plus the 3:1 badge for UI components and graphics.
6. If a pair fails, look at the nearest AA or AAA passing color and click Apply to update the foreground.

Examples

Foreground #595959, Background #ffffff

Ratio 7.00:1 with a high APCA Lc — passes AA and AAA for normal and large text

Foreground #00000080 (50% black) over #ffffff

Composited to a solid gray first, then the WCAG ratio and APCA Lc are computed

Foreground #999999 on #ffffff — 2.85:1, fails AA

Open the nearest AA color and click Apply to reach 4.5:1 while keeping the same hue

Frequently asked questions

What contrast ratios does WCAG require?

WCAG 2.1 Level AA needs at least 4.5:1 for normal text and 3:1 for large text; Level AAA needs 7:1 and 4.5:1. Non-text UI components and graphical objects (SC 1.4.11) need 3:1. This checker shows a pass/fail badge for each of those thresholds.

What is the APCA Lc score?

APCA (the Accessible Perceptual Contrast Algorithm) is the contrast method proposed for WCAG 3. It reports a lightness-contrast (Lc) value from roughly 0 to 108 where higher means more contrast, and it accounts for polarity (dark-on-light vs light-on-dark). It is shown next to the WCAG 2.1 ratio and uses its own guidance levels rather than a single pass/fail.

How does the nearest passing color suggestion work?

It keeps the foreground's hue and saturation and only nudges its lightness lighter or darker until the contrast meets AA (4.5:1) or AAA (7:1) against the background, then lets you apply it in one click. If the background is mid-toned and the target cannot be reached, it shows the closest possible color instead.

Which color formats can I enter?

HEX (#rgb, #rrggbb, plus #rgba and 8-digit #rrggbbaa with alpha), rgb()/rgba() and hsl()/hsla(), with a native color picker for each field. A semi-transparent foreground is composited over the background — which is itself flattened onto white — before the ratio is computed. Named colors are not supported.

Are my colors sent to a server?

No. All parsing, compositing, luminance, ratio and APCA math runs entirely in your browser with JavaScript — no colors are uploaded and nothing is sent to a server, so it works privately and even offline once the page has loaded.