Updated July 11, 2026

Contrast & Accessible Color: The Practical Guide

Contrast is the one part of color design with legal force behind it: WCAG’s ratios set the floors that regulations reference, and the craft is passing them without designing by checker — building palettes where every text and surface pairing clears its floor by construction. This hub collects our guides on the rules, the science behind them, and the newer APCA model; the working overview is a palette’s full role set with every check visible.

The floors and why they exist

The numbers — 4.5:1 for body text, 3:1 for large text and UI parts, 7:1 for the enhanced tier — encode a century of legibility research into enforceable arithmetic. The intuition behind the tiers is stroke width: reading means resolving letterforms against their background, and the thinner the stroke, the more luminance difference the eye needs to trace it. That is why large text earns a relaxed floor — at 24px a letterform survives 3:1 that would sink body text — and why the same 3:1 extends to borders, icons and input outlines, which read as shapes rather than strokes. The guides here cover what each floor applies to, the exemptions (disabled controls, decoration, logos), and the honest edges: places where the ratio passes but reading still suffers, and where it fails while looking fine — the gaps a newer model was built to close. WCAG contrast ratios explained is the reference piece for the numbers themselves; AA vs AAA weighs when the enhanced tier repays its cost, and why maximum contrast isn’t maximum readability covers the comfort ceiling above the floors.

Beyond the ratio

WCAG’s ratio treats light-on-dark and dark-on-light identically; perception doesn’t. APCA — the polarity-aware model developed for WCAG’s next generation — scores what the ratio misses, which matters most in dark themes and with thin type. Our guides read both numbers side by side, the way serious contrast work increasingly does: the ratio for compliance, APCA for judgment. What is APCA introduces the model from zero; WCAG 2 vs APCA maps which verdicts actually change and in which direction — thin light-on-dark type is the classic case where the ratio says pass and your eyes disagree.

What a ratio can’t measure

A contrast check compares two colors; several of the most common accessibility failures live outside that comparison. Roughly 8 % of men see red and green as near neighbors, so a status system that encodes meaning in hue alone can pass every ratio and still be unreadable — designing for color blindness covers the three deficiency types, and never rely on color alone is the principle that survives all of them. Focus indicators fail for a different reason: the contrast exists, but against the wrong neighbor. The most quietly common failure is the gray that passed as body text being reused for placeholders and captions a shade lighter than the floor allows. For teams shipping in the EU, the European Accessibility Act turns these from best practices into obligations — which makes a repeatable testing method worth more than any single checker.

Passing by construction

The deeper theme of this hub: contrast testing is what you do when contrast wasn’t designed. A palette whose text roles are derived against their surfaces — floors built into the derivation, every pairing checked at generation time — ships accessible by default, and a brand change re-derives instead of re-auditing. That is the model Scale Composer is built on: one scale derives color, typography and grid together, and text roles leave the generator with their contrast floors already applied. The machinery lives in our color scales guide; the dark-theme half of the story is in dark mode.

Guides in this hub

Find your palette’s edges

Rules stick when you’ve watched them bind: open a palette and walk a text color toward its background — watch the ratio fall through 4.5:1, see where APCA disagrees with the ratio, and find the exact step where the pairing stops working. That edge, located once in your own palette, teaches more than any table of requirements.

Frequently asked questions

What contrast ratio does WCAG require?

4.5:1 for normal-size text and 3:1 for large text (24px, or 18.66px bold) and meaningful UI components like input borders and icons. The enhanced AAA level asks 7:1 for body text.

What is APCA?

The contrast model developed for WCAG's next generation. Instead of a single ratio it computes a polarity-aware Lc value that tracks perceived contrast more closely — especially for dark backgrounds and thin fonts. It is guidance today, not yet a legal requirement.

Is maximum contrast always better?

No. Past the floors, added contrast buys glare rather than legibility — pure black on pure white is harsher to read at length than a softened pairing that still clears every requirement. Contrast has a floor and a comfort ceiling.

Do borders and icons need contrast too?

Meaningful ones do — 3:1 against their surroundings. A decorative divider is exempt; an input border that is the only thing marking the field is not.

How common is color blindness?

Roughly 8 % of men and 0.5 % of women have some color-vision deficiency, most commonly red-green. Design that survives it never relies on hue alone — lightness differences, icons and text carry the meaning in parallel.

Can a palette pass contrast by design instead of by testing?

Largely, yes. When text and background roles are derived from a color scale with contrast floors built into the derivation, every pairing ships pre-checked — testing confirms instead of discovers.