Color in Typography — Complete Design Guide

How to use color in text to build hierarchy, improve readability and add character — without sacrificing accessibility.

Text Color Is Different From Other Colors

Text is read, not just looked at. This changes how color works. A background color that looks beautiful as a card still fails if it makes text hard to read. A text color that looks elegant in a color picker often fails WCAG contrast when rendered at 14px on a real device.

Color in typography has two jobs: aesthetics (how it contributes to the design character) and function (readability, hierarchy, accessibility). When these conflict, function always wins.

The Text Color Hierarchy

Professional interfaces typically use 4-5 text colors, each with a clear role:

Primary Text

Used for headlines and body copy. Usually a very dark color — near-black or dark navy (#15243B, #1A1A1A, #0F172A). Should have at least 7:1 contrast (AAA) against the background.

Secondary Text

Used for labels, captions, timestamps, helper text. A medium-dark color — often 50-60% lightness (#4A5A75, #6B7280). Should have at least 4.5:1 contrast (AA) against the background.

Tertiary Text

Used for rarely-read metadata (copyright, footer disclaimers). A medium-light color. Should still meet WCAG AA where it's actually content, not decoration.

Link Text

Usually uses the primary brand color. Must be distinguishable from body text — either through color alone (if contrast with body text is 3:1+) or through underline/weight.

Inverse Text

Text that appears on colored or dark backgrounds (buttons, hero sections). Usually white or very light. Must pass contrast against the specific background it appears on.

Text Color for Readability

Contrast Is Non-Negotiable

Body text needs 4.5:1 contrast (AA) or 7:1 (AAA). Large text (18pt+ or 14pt+ bold) needs 3:1 (AA) or 4.5:1 (AAA). There are no "brand exceptions" — a text color that fails contrast is a usability failure, not an aesthetic choice.

Beyond Contrast

Even passing WCAG is not always enough. Consider:

  • Font weight: Light fonts need higher contrast
  • Font size: Small text needs higher contrast
  • Background complexity: Text on gradients or images needs extra care
  • Viewing conditions: Mobile in sunlight needs more contrast than desktop indoors

Color for Emphasis

Use Accent Colors Sparingly

Accent colors for text (like a blue link or orange callout) should be used sparingly. If every heading is a different color, the design becomes visual noise. Most text should use the neutral text colors; accent colors highlight the exceptional.

Color vs Other Emphasis

Bold, italic and size are often more effective than color for emphasis. Color as the only emphasis signal is invisible to colorblind users and can be overdone. Combine color with weight or underline when emphasis matters.

Semantic Color

Some text colors have semantic meaning:

  • Red: Errors, required fields, destructive actions
  • Green: Success, validation confirmation
  • Amber: Warnings, cautionary states
  • Blue: Links, informational messages

Use these consistently — semantic color should mean the same thing everywhere.

Text Color in Different Contexts

Light Mode

Standard hierarchy: very dark primary text, dark secondary text, medium tertiary text, all against off-white backgrounds.

Dark Mode

Inverted: off-white primary text (not pure white), lighter gray secondary text, all against dark gray backgrounds (not pure black).

On Colored Backgrounds

Text on colored backgrounds requires testing. A blue button with dark text might look stylish but fail WCAG. White text on a saturated blue often works; white text on a light blue almost never does.

On Images

Text on images needs a scrim (semi-transparent overlay) or a solid panel behind it. Never rely on the image being "dark enough" — it will be lighter in some sections than others.

Common Typography Color Mistakes

  • Pure black on pure white: Too harsh, 21:1 contrast is excessive
  • Light gray body text: Often fails WCAG AA (needs 4.5:1)
  • Blue text without underline: Inaccessible to colorblind users
  • Multiple accent colors: Visual noise that undermines hierarchy
  • Inconsistent text colors: Same role with different colors across pages
  • Text on gradients without scrims: Some positions fail contrast

Testing Text Colors

Test every text/background combination with a contrast checker. Test at the actual rendered sizes (14px, 16px, 18px). Test in both light and dark mode. Test with a color blindness simulator to ensure links remain distinguishable.

Frequently Asked Questions

Related Articles