Legibility Contrast And Spacing

Legibility — contrast and spacing

A typeface and size are necessary but not sufficient for legibility. The conditions under which type is rendered — contrast against background, spacing between characters, spacing between lines — determine whether the chosen typography actually communicates. Most legibility failures in production are spacing or contrast failures, not typeface failures.

Color contrast

Color contrast is the difference in luminance between text and its background. WCAG codifies minimum thresholds:

• 4.5:1 for normal text (under 18pt regular or 14pt bold).
• 3:1 for large text (18pt+ regular or 14pt+ bold).
• 3:1 for graphical objects and UI components (icons, button outlines).
• 7:1 for AAA conformance — recommended for users with low vision or in poor viewing conditions.

These are floors, not targets. Best practice is to substantially exceed them where possible.

Common contrast failures:

Light gray text on white. Common because designers like the "soft" feel. #999 on white is roughly 2.8:1, well below WCAG AA. #767676 is roughly 4.5:1. Below this, you're failing the standard.

Brand color on white that doesn't pass. A brand color in the medium-blue range (e.g., #5BA0E6) on white is often around 3:1 — fine for large display text, fails for body text. Pick text colors with adequate contrast even if the brand color is borderline.

Text on photos or gradients without protection. Text overlaid on busy photos or gradients can fail in some places and pass in others. Solutions: a dark scrim over the photo, a solid text background, or moving the text out of the photo area.

Low-contrast helper or muted text. Helper text intentionally de-emphasized often drifts into illegibility. Don't go below 4.5:1 (or 3:1 if it's larger text and clearly secondary).

Color-only state indicators. A red error message that loses meaning when rendered to a colorblind user, or a green success message that's invisible to others. Always pair color with shape, label, or icon.

Tools for verifying contrast:

• WebAIM contrast checker.
• Browser dev tools' built-in contrast picker.
• axe, Lighthouse, WAVE for automated audits.
• Stark or similar Figma/Sketch plugins for design-time checking.

Tracking (letter spacing)

Tracking is the space between characters. The right tracking depends on the typeface, the size, and the use.

Body text: typefaces are usually designed for body sizes with built-in correct tracking. Don't adjust tracking for body unless you have a specific reason.

Display sizes (large): large text often benefits from tighter tracking (-1% to -2%) to prevent characters from feeling too far apart. Many display typefaces are designed expecting some negative tracking at large sizes.

Small sizes (especially below 12px): small text may need slightly looser tracking (+0.5% to +1%) to prevent characters from merging into ambiguous shapes.

All caps: uppercase text needs significantly looser tracking (+5% to +10%) because capital letters have less visual differentiation in their outlines.

Bold text: can sometimes need slightly looser tracking to prevent visual crowding.

Common tracking failures:

Default tracking on display sizes. Many typefaces look loose at large sizes; tighten to -1% to -3%.

Tight tracking on small text. A common cause of "blurry-looking" small text. Loosen slightly.

Untracked all-caps. Uppercase without extra tracking looks crowded and reads slowly.

Leading (line height)

Leading is the space between lines. The right leading depends on the typeface, the line length, and the use.

Body text: 1.4× to 1.6× the font size. So for 16px text, line height of 22–26px. This range is comfortable for sustained reading.

Display / headline text: 1.0× to 1.2× the font size. Tighter leading at display sizes prevents headlines from feeling fragmented.

UI labels and dense text: 1.2× to 1.4× the font size. Tighter than body but loose enough to keep characters from overlapping.

Long-form prose: 1.5× to 1.7× the font size. Slightly more generous than UI body text for sustained reading comfort.

Common leading failures:

Default browser leading on body text. Browsers default to about 1.2× line height, which is too tight for body text. Set explicit line-height: 1.5 or higher for prose.

Leading too tight for the font's x-height. Fonts with tall x-heights (Verdana, Inter) need slightly more leading than fonts with shorter x-heights (Times, Garamond) at the same size.

Inconsistent leading across the type system. Body, headings, captions all should have leading that's calibrated to their use; one-size-fits-all is rarely right.

Tight leading on multi-line UI elements. Buttons, table cells, form labels with multiple lines often have insufficient line height, causing the lines to crowd.

Word spacing and paragraph spacing

Less critical than tracking and leading for most UI but worth checking:

Word spacing. Default word spacing in most typefaces is appropriate. Adjust only for specific cases (justified text, very large display).

Paragraph spacing. Space between paragraphs should be larger than line spacing. A common ratio: paragraph spacing = 0.75× to 1× the font size, in addition to leading.

First-line indent vs. block paragraphs. Most digital UI uses block paragraphs with space between. First-line indents are reserved for editorial / book contexts.

Worked examples

A button that fails contrast

A button with white text (#FFFFFF) on a light blue background (#7AB8FF). Contrast ratio: 2.1:1. Below WCAG AA for both normal and large text.

The fix: darken the blue (#1E78D6 gives 4.5:1) or change the text to a darker color. White on the original blue is too low contrast for accessibility.