Color and typography: contrast ratios, optical size, and legibility at scale

Type legibility is more than a WCAG checkbox. A paragraph that technically passes 4.5:1 contrast ratio but uses a warm gray on a cool background in a thin font weight will fatigue readers in a way that a correctly-calibrated, high-contrast pair will not. The relationship between color choice and typographic legibility involves contrast ratio, hue combination, font weight, type size, background texture, and optical size rendering — all of which interact. Understanding this system helps you make better decisions than any single metric can.

Typography Accessibility Color Contrast

Highlights

WCAG 2.1's contrast ratio formula weights luminance in a way that makes certain color combinations pass the 4.5:1 standard while still being harder to read than others. The most commonly cited examples: a dark saturated green (#008000) on white produces a contrast ratio of 4.55:1 — technically passing AA, but the simultaneous contrast between highly saturated green and white creates chromatic vibration that makes text tiring to read at body sizes. Similarly, certain blue-black and near-black combinations pass WCAG but produce interference patterns in low-resolution or ClearType-rendered text. The practical guideline: target 7:1 contrast (WCAG AAA) for body text even if AA compliance is the legal requirement, and avoid highly saturated colors for body text regardless of contrast ratio.

The relationship between type size and required contrast is codified in WCAG but often misapplied. Large text (18pt normal or 14pt bold) requires 3:1 contrast; normal text requires 4.5:1. But the optical difference between 14pt and 17pt text at the same contrast ratio is significant — 14pt text at 4.5:1 contrast is notably harder to read than 17pt text at the same ratio. The practical approach for design systems: define a type scale, test each size at your chosen text color, and increase contrast for smaller sizes rather than applying uniform contrast throughout. Text smaller than 14px benefits substantially from increased contrast (5:1 or higher) regardless of what WCAG technically requires.

Colored text — any text that is not near-black — requires particular care. Marketing headlines in brand colors, link text, labels, and status text all use color to carry meaning. Each of these needs individual contrast verification against every background it will appear on. The common failure: a design system defines a blue link color (#2563EB) that passes 5.9:1 against white, but the same link color is then used on light blue background sections (#EFF6FF) where it produces only 2.1:1. Color variables that pass in one context will fail in another — systematic contrast testing across all background/foreground combinations is the only way to catch this before it ships.

How contrast ratio relates to actual legibility

Contrast ratio (CR) is calculated from the relative luminance of two colors: CR = (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color's luminance. This formula is luminance-based, not perception-based — it treats all hues as equal, which they are not. The upcoming WCAG 3.0 Advanced Perceptual Contrast Algorithm (APCA) addresses this limitation by separately modeling the lightness of the text and background, the polarity (light-on-dark vs. dark-on-light), and the font weight and size. APCA produces significantly different results from WCAG 2.1 for certain color combinations: highly saturated foregrounds on white backgrounds, light text on dark backgrounds, and small font sizes all get recalibrated. Designers working on accessibility-critical products should test against both WCAG 2.1 (current legal standard) and APCA (forthcoming standard) for any edge cases.

Hue interference and chromatic aberration in text

Highly saturated color combinations used for text create a visual effect called simultaneous contrast — where the boundary between two colors creates an apparent light or dark fringe that makes edges look vibrated or unclear. This effect is strongest with complementary color pairs (red on green, blue on orange) and with highly saturated colors on white or near-white backgrounds. For body text, the safe hue range is achromatic (grays and near-blacks) or very low saturation chromatic neutrals. For display text (headlines, large callouts), moderate saturation is fine; high saturation is acceptable but should be tested at actual render size across different display types. Chromatic aberration from LCD subpixel rendering affects differently-colored text differently — red text and blue text on white will show slightly different sharpness characteristics due to the RGB subpixel layout of most displays.

Weight, size, and color interaction

Font weight is the most practical lever for improving legibility when you cannot increase contrast. A text element that fails WCAG AA at 400 weight (regular) may pass at 500 (medium) or 600 (semibold) because heavier weights have more ink coverage and create a larger effective contrast area. The WCAG definition of 'large text' includes 14pt/19px bold as qualifying for the lower 3:1 contrast requirement — the bold weight is specifically recognized as a legibility factor. Practical applications: use heavier weights for secondary text (placeholder text, captions, metadata) that cannot meet full contrast due to design constraints; avoid thin weights (100, 200, 300) for text in colors other than near-black; and test text rendering at typical viewing conditions — most design tools render text at higher fidelity than browsers at standard screen resolutions.

Building a type color system

A minimal type color system for a design system includes: Primary text (for body content and headings) — maximum contrast, near-black or black. Secondary text (for supporting information, captions, timestamps) — reduced contrast but still WCAG AA compliant against all possible backgrounds. Disabled text — typically 40-50% opacity of primary text, by convention expected to fail contrast (exempt in WCAG). Interactive text (links) — brand-colored, WCAG AA against all background surfaces where links appear. Status text (error, warning, success) — each verified against all background surfaces in the system. Inverse text (white on dark backgrounds) — verified against all dark surface steps. Map each text color to a specific semantic token, verify contrast against every background token, and document the intended use cases. This prevents the drift where colors are used in unanticipated combinations that fail contrast requirements.

Newer issue

Building a neutral scale that actually works in a design system

2028-02-11

Older issue

Designing gradients that look good: interpolation, stops, and perceptual smoothness

2028-02-25