The halation problem with maximum contrast
The irony of maximum contrast is that it's not the most readable combination for extended text. Pure black (#000000) on pure white (#ffffff) produces a contrast ratio of 21:1 — far exceeding WCAG requirements — but the extreme brightness differential causes an optical effect called irradiation or halation: the white background appears to bleed slightly into the black letterforms, creating a faint halo that affects character definition, especially at smaller sizes and thinner weights. Book typography has known this for centuries: professional body text uses near-black (often #1a1a1a to #2d2d2d, or even a very slightly warm dark) on off-white or cream stock. The contrast is still very high but the halation is reduced, improving readability over long sessions.
Hue shifts in type color
The choice of gray in type color is not neutral — different gray hues affect perceived tone substantially. Warm gray body text (gray with slight yellow or red content: #2c2724, #3d3530) reads as approachable, editorial, and warm. Cool gray body text (gray with slight blue content: #1e2430, #2b3040) reads as technical, authoritative, and precise. These are both grays at similar luminance levels, but the personality difference is immediately apparent. The typographic relationship between warmth and approachability is strong enough that UX researchers can reliably predict whether users rate an interface as 'friendly' or 'professional' based partly on whether the body text uses warm or cool gray — even when respondents can't articulate why they made that judgment.
Weight and color contrast interaction
Type weight and color contrast are not independent variables. A bold weight at medium contrast may be more readable than a thin weight at high contrast because the stroke width matters as much as the luminance ratio. The practical implication: if your design uses thin or light-weight typography (common in minimal or luxury design contexts), you need higher foreground-to-background contrast than you would with regular or medium weights. WCAG doesn't distinguish by weight, but some emerging standards (APCA — the Advanced Perceptual Contrast Algorithm) do weight these variables together. Designs that use 300-weight type for body copy at 4.5:1 contrast may technically pass WCAG while still having readability issues for users with moderate vision impairment.
Secondary text and hierarchy through color
Most design systems use at least two levels of text color: a primary (near-black or dark gray for headings and body) and a secondary (lighter gray for captions, metadata, supporting text). Getting this right requires care: the secondary color needs to be meaningfully lighter than primary (enough to signal reduced emphasis) while still maintaining adequate contrast against the background. A common mistake is using pure 50% gray as secondary text — it often fails WCAG at the 4.5:1 threshold required for body text, and the contrast drop from primary to secondary feels abrupt rather than graduated. Better secondary text sits at around 60-70% luminance: lighter than primary, but still substantial. A third tier (placeholder text, disabled states) can then sit at 40-50% luminance, creating a clear three-level hierarchy.
