Can you read me now?

A passing contrast check doesn’t always mean comfortable reading.

Let’s make it legible.

Clarity is not a feature. It is infrastructure for the next era of human coordination. That is why we express our category-defining ideas in the faintest text our design system allows. The contrast ratio passes WCAG AAA, so naturally our design review considers the matter closed. If you can read this, you’re too close to the problem space.

Not quite.

Try changing the colors, font size, or weight.

Colors

Use hex, RGB, HSL, OKLCH, or a color name such as black.

Adjust colors

Adjust the red, green, and blue channels.

Text

The example uses Inter (opens in a new tab).

APCA contrast Lc −51.4 Light text on dark
WCAG 2 AAA 8.13:1 AA and AAA pass for standard text

Why two contrast checks?

What is contrast? Contrast is how clearly text stands out from its background. Color matters, but so do letter size, thickness (font weight), and the conditions you read in.

What is WCAG? The Web Content Accessibility Guidelines (WCAG) are standards for making websites more accessible to people with disabilities. Their text contrast check (opens in a new tab) gives a ratio such as 4.5:1. For ordinary text, AA requires at least 4.5:1 and the stricter AAA level requires 7:1. Large text has lower thresholds.

Where does WCAG fall short? Its contrast ratio describes the colors, not the full reading experience. Swapping text and background gives the same ratio, even though the text can feel different to read. WCAG adjusts its thresholds for large text, but the check cannot capture every difference in typeface, letter thickness, spacing, or viewing conditions.

How does APCA help? The Accessible Perceptual Contrast Algorithm (APCA) (opens in a new tab) estimates perceived text contrast, accounting for differences between light text on dark backgrounds and dark text on light backgrounds. It pairs that estimate with more detailed size and weight guidance to help identify combinations that may be difficult to read.

How does it work? APCA calculates contrast from your text and background colors. The playground then checks that value against guidance for your chosen font size and weight. Smaller, thinner text generally needs more contrast. Try adjusting each control to see how the guidance changes.

How the result works: “Looks good!” means the colors meet APCA’s guidance for your chosen size and weight. “Not quite.” means that combination falls short. These messages describe the APCA result; the separate WCAG result can pass or fail independently.

Reading the numbers: APCA uses an Lc (lightness contrast) score, not a ratio or percentage. Farther from zero means more contrast. Negative means light text on dark; positive means dark text on light. For example, −75 has more contrast than −45. The sign shows direction, not quality. Changing size or weight changes the guidance, not the Lc score.

Putting it into practice: Use the WCAG 2 result to check its text contrast requirements and APCA as additional reading guidance. Try the text yourself, and consider other readers and viewing conditions. Passing either check does not mean a whole website meets WCAG or that everyone will find the text comfortable.

WCAG 3 (opens in a new tab), a future version of the guidelines, is still a draft; its contrast method has not been chosen. To explore another approach, BridgePCA (opens in a new tab) adapts APCA so its passing results also meet WCAG 2 contrast thresholds. This playground shows APCA and WCAG 2 independently.

APCA quick reference

Lc 90Preferred body text
Lc 75Minimum body text
Lc 6024px regular / 16px bold
Lc 45Large headlines
Lc 30Avoid for meaningful text