Color and typography: why your font color matters as much as your typeface

Most typographic decisions focus on family, weight, and size. Color is treated as an afterthought — a near-black on white, or white on dark. But the color of text shapes its perceived weight, warmth, authority, and legibility in ways that typeface choice cannot override. A slightly warm off-black reads friendlier than pure #000000. A slightly desaturated heading color reads more refined than a vivid brand hue. The relationship between text color and surrounding surface color determines whether your hierarchy reads instantly or has to be decoded. This issue covers the decisions most designers leave implicit.

Typography UI/UX Design

Highlights

Pure black (#000000) text on white creates excessive contrast — perceived as harsh on screen. Off-blacks in the range #1a1a1a to #2d2d2d reduce eye strain and read as more refined in editorial and brand contexts.

Text color temperature should align with the surrounding surface. Warm paper-tone backgrounds (L≥96%, slight yellow hue) pair with warm ink tones (slight brown-black). Cool white backgrounds pair with neutral or slightly cool dark grays.

Secondary text should not be lighter than approximately 4.5:1 contrast on its background — the WCAG AA threshold for normal-size text. Many designs use 60% opacity for secondary text, which often fails on white at AA level.

Why pure black text is usually wrong

Pure black (#000000) on a white (#ffffff) background produces approximately 21:1 contrast — the maximum possible. This is not a problem of accessibility, it is a problem of comfort. High-contrast reading environments cause pupil constriction and fatigue over extended reading sessions. Editorial publications, premium brand websites, and reading-focused interfaces consistently use off-blacks: dark gray-browns in the range #1a1a1a to #333333 that reduce contrast to 12:1 to 16:1 while remaining far above the WCAG AA threshold. The choice of off-black also carries temperature. A warm off-black like #1c1a17 reads as organic and editorial. A neutral off-black like #1a1a1a reads as technical. A cool off-black like #1a1c21 reads as precise and systematic. This distinction is most visible in body text at length.

Matching text color temperature to surface color

Text color temperature should be in harmony with the surface it sits on. Warm surfaces — paper whites, cream, sand, and off-whites with a slight yellow or brown cast — pair naturally with warm ink tones. Using a cool neutral gray on a warm cream background creates a subtle tension that reads as unintentional. The correct approach is to sample the surface hue and tint the text color slightly in the same direction. For a surface at hue 40° (warm paper), the body text might sit at hue 35–45° with very low saturation (3–6%) and low lightness (12–18%). For a cool surface at hue 220° (blue-tinted white), a slightly cool off-black at hue 215–225° with minimal saturation works better than a neutral gray.

Secondary text contrast: the most commonly failed WCAG check

Secondary text — captions, metadata, placeholder text, support labels — is the most frequently cited WCAG failure in accessibility audits. The typical mistake is using a fixed opacity (50%, 60%, 70%) rather than a fixed color value, then assuming that opacity-reduced text passes on all backgrounds. It does not. A 60% opacity dark gray on white produces approximately 3.5:1 contrast — below the 4.5:1 AA threshold for normal-size text. The correct approach is to set secondary text as a fixed hex value calculated to produce exactly 4.6:1 contrast on its intended background, with an additional check on any background color variation it might appear over. Do not use opacity for type color in production interfaces.

Newer issue

Color in data visualization: encoding information without misleading your audience

2027-06-03

Older issue

RGB, CMYK, HSL: which color mode you should actually design in

2027-06-17