# Color Contrast Checker

Check the contrast between a text color and a background color against WCAG 2 and APCA. The checker computes the WCAG 2 contrast ratio from relative luminance, reports pass or fail for AA and AAA normal and large text and for UI graphics, and adds the APCA lightness contrast value with guidance on what that value is good for. Made for designers and developers who build accessible interfaces.

## Frequently asked questions

### What do the WCAG levels mean?

Level AA requires 4.5:1 for normal text and 3:1 for large text (success criterion 1.4.3); level AAA requires 7:1 and 4.5:1 (1.4.6). User interface components and meaningful graphics need 3:1 against adjacent colors (1.4.11). The checker reports pass or fail for each of these five thresholds.

### What counts as large text?

WCAG defines large text as at least 18 point regular, about 24 CSS pixels, or at least 14 point bold, about 18.66 CSS pixels. Everything smaller is normal text and needs the higher ratio.

### Why does a ratio of 4.499:1 fail AA?

WCAG thresholds are exact, so a ratio that would round to 4.5 but is below it does not pass. The checker compares the unrounded ratio and shows it truncated to two decimals, so the displayed number never looks better than the real one.

### What is APCA?

The Accessible Perceptual Contrast Algorithm is the contrast method developed for the WCAG 3 drafts. It models perceived lightness contrast, treats text and background differently and returns a lightness contrast value, Lc, from about -108 to 106. It is not part of any published WCAG standard yet, so use the WCAG 2 results for compliance and APCA as an additional check.

### Why is the APCA value sometimes negative?

APCA is polarity aware: positive values mean dark text on a light background, negative values mean light text on a dark background. The guidance uses the absolute value, so Lc -75 and Lc 75 fall into the same tier.

### How are the APCA guidance tiers chosen?

They follow the APCA bronze simple mode: Lc 90 is preferred for body text, Lc 75 is the minimum for body text, Lc 60 for other content text, Lc 45 for headlines and large text, Lc 30 for spot-readable text such as placeholders, and Lc 15 for non-text elements. Font size and weight still matter, so treat the tiers as starting points rather than a verdict.

### Which APCA version is implemented?

The APCA-W3 constants of version 0.0.98 G, revision 4g, with the simple 2.4 exponent on sRGB channels, the soft black clamp and the low-contrast clip. Black text on white gives about Lc 106.0 and white text on black about Lc -107.9, which matches the reference implementation.

### Which color formats can I enter?

Hex codes with or without #, CSS color names, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() spaces such as display-p3, and cmyk(). Colors outside sRGB are mapped into sRGB first, because both formulas are defined for sRGB screen colors.

### How are transparent colors handled?

A semi-transparent text color is blended over the background before measuring, the way a browser draws it. A semi-transparent background is first blended over white. The result lists the opaque text and background colors that were actually compared.

### Does the order of the two colors matter?

For WCAG 2 it does not, because the ratio of the lighter to the darker luminance is the same either way. For APCA it does, because text and background are weighted differently, so enter the text color in the first field and the background color in the second.

Your ad here?

[Email us](mailto:hi@dennn.is?subject=Advertising%20on%20OneClick%20Pro)

[Ad The agent-ready plugin suite for WordPress.](https://sleekwp.com/?ref=oneclickpro)