We're live on Product Hunt!Support us
ColorArchive

A curated color library with 5,000+ algorithmically generated colors. Browse, search, save favorites, and export palette tokens — no account required.

CollectionsFamiliesNotesGuidesFree ResourcesConvertColorblindAboutSupportUpdates
Ready for static export
Privacy·Terms·Refunds·Cookies·Commerce Disclosure
colorarchive.org · © 2026 ColorArchive
Skip to content
ColorArchive
ProLog in
ArchiveAll ColorsCollections
Typography Guide
Search intent: color in typography design guide legibility

Color in Typography: How to Use Color in Text Without Losing Legibility

Typography color is the most technically constrained area of color design — it must simultaneously meet accessibility requirements, serve hierarchy and emphasis functions, maintain brand coherence, and work across every screen and print context. Most designers learn body text color (very dark) and link color (blue by convention) but do not develop a systematic approach to the full typographic color spectrum. A well-designed typographic color system is one of the highest-leverage investments in design system quality.

TypographyLegibilityColor Systems
Key points
Body text color is not black — it is near-black. Pure #000000 text on pure #FFFFFF white creates maximum contrast (21:1) but produces a harsh, optically aggressive reading experience on modern backlit screens. The optimal body text color for extended reading is in the L8–16% range with slight chromatic warmth (2–8% saturation in the direction of the brand primary or a warm neutral). This produces contrast ratios of 14:1 to 18:1 against white — well above the WCAG AAA requirement of 7:1 — while eliminating the optical harshness of pure black. The difference is subtle in isolation but significant in extended reading contexts: a 2,000-word article in near-black text causes less eye fatigue than the same article in pure black.
Secondary text color is one of the most important and most neglected decisions in a typographic color system. Secondary text — metadata, captions, timestamps, form labels, supporting copy — must be visually distinct from primary text but still meet WCAG AA minimum contrast (4.5:1 for normal text). The target range: L35–50% for secondary text on white backgrounds, which produces 4.5:1 to 7:1 contrast and reads clearly as 'less important than primary text' without disappearing. Avoid the common mistake of tertiary text at L60–70% (contrast ~2.5:1) — this fails accessibility requirements and creates content that users cannot read comfortably, particularly in variable ambient light conditions.
Colored text should serve a specific function: link indication, emphasis, category labeling, or decorative headline styling. Colored body text — body copy set in a brand color other than near-black — is almost always a design mistake. It compromises readability, reduces the signal value of the color (if all text is blue, blue no longer signals anything), and creates contrast problems unless the brand color happens to be dark enough for body text use. Reserve colored text for three functional uses: links (blue convention or brand primary, always with a non-color indicator like underline), callout text or pull quotes (one or two sentences at larger size, where a brand color adds visual interest without fatiguing the eye), and categorical labels (small caps or tag-style label text using a semantic or categorical color).

Building a complete typographic color system

A complete typographic color system for light mode contains five tiers. (1) Primary text: L10–15%, warm near-black — for headings, body text, and all primary content. (2) Secondary text: L40–50%, medium gray — for metadata, captions, supporting information. (3) Tertiary/disabled text: L65–70%, light gray — for placeholder text, disabled states, and de-emphasized UI strings (note: this fails WCAG for meaningful content and should only be used for truly non-essential text). (4) Inverse text: near-white, L92–97% — for text on dark backgrounds, banners, dark UI elements. (5) Link/interactive text: brand primary or blue-family, L30–45% on white — for links, with an underline or other non-color indicator. Each tier needs a defined hex value, a documented contrast ratio against its intended background, and a specified use case. Without this specification, designers will make inconsistent tier choices, eroding visual hierarchy across the product.

Text on colored backgrounds: the hardest legibility problem

Text on colored backgrounds is the most technically difficult legibility situation in typographic color design. The challenges: (1) Most brand colors at medium saturation and lightness (the range most useful for UI components) do not provide 4.5:1 contrast against either white or black text — they fall in a no-man's land where both fail. (2) Colored backgrounds reduce the apparent contrast of text against the background due to simultaneous contrast effects — text that measures 4.5:1 on a saturated red background may appear to have lower contrast than the same ratio on a neutral gray. (3) Brand color backgrounds create strong visual noise that competes with the typographic content. Solutions: use background tints (8–15% opacity version of the brand color on white) rather than full-saturation color blocks for large text-containing areas; use very dark (L10–20%) or very light (L90–97%) text depending on background lightness; test colored text backgrounds at multiple size points since the legibility threshold is larger for small text.

Color hierarchy in headings and display type

Heading color is an opportunity to add visual richness and brand expression without compromising legibility, because headings are set at large sizes where contrast requirements are lower (3:1 rather than 4.5:1) and reading duration is shorter. The most effective use of color in headings: use the brand primary or a closely related color for one level of heading (typically H1 or the most prominent headline style), keeping all other heading levels in primary text color (near-black). This creates a single, visually striking color entry point into text content without creating the visual noise of multi-color heading hierarchies. Alternatively, use color to highlight a single key phrase within an otherwise near-black heading — a technique common in editorial design that draws attention to the conceptual center of the heading.

Typographic color in dark mode

Dark mode typographic color systems mirror the structure of light mode systems but require different values at each tier. Primary text on dark: L88–94%, warm near-white — maintaining slight warmth prevents the harsh optical effect of pure white (#FFFFFF) on near-black backgrounds. Secondary text on dark: L55–65%, medium light gray — providing sufficient differentiation from primary text while meeting contrast requirements. The common dark mode mistake: using the same hex values from the light mode system inverted, which produces inconsistent contrast relationships and often results in either too little contrast (text too dark against the dark background) or too much (text too bright and harsh). Semantic text colors (error red, success green, warning amber) need separate dark-mode specifications — the same hex that provides sufficient contrast on white may fail on near-black backgrounds.

Featured collection
Monochrome Studio

Pure grayscale with micro-warm and micro-cool shifts for editorial, typography, and minimal UI.

Open collectionAll collections
Open next
WCAG Contrast CheckerBrand Starter KitMonochrome Studio collection
Practical next step

Move from the guide into a concrete palette lane

Guides explain the use case. Collections prove the taste. Pro handles the export and implementation layer.

Upgrade to ProMore guides
Related guides
Accessibility Guide
Color Contrast and Accessibility: WCAG, APCA, and Building an Accessible Palette
Color contrast accessibility is one of the most commonly misunderstood areas of design compliance. Designers know they need to 'pass WCAG' but often do not understand what the standard measures, what it misses, or how to build a palette that passes consistently rather than checking contrast case by case. Understanding the mechanics of contrast standards enables you to design accessible color systems proactively rather than patching them reactively.
Color Theory Guide
Monochromatic Color Palette: How to Design with One Hue
A monochromatic palette — all colors derived from a single hue — is one of the most elegant and underused strategies in design. Done right, it creates cohesion, sophistication, and calm. Done wrong, it looks flat and incomplete.
Monochromatic Color Guide
How to Use a Monochromatic Color Palette: Tonal Range, Contrast, and Depth
Monochromatic design is harder than it looks. Using only one hue means every distinction must come from value and saturation — which requires a sophisticated understanding of tonal range and contrast to execute well.