Mobile-first typography: WCAG standards made simple

Typography isn’t binary — legible or illegible. Between those poles exists a spectrum of reading difficulty that disproportionately affects different users.

A 25-year-old with perfect vision reading on a MacBook Pro in an office sees text differently than a 55-year-old with mild presbyopia reading on an iPhone SE in direct sunlight. Someone with dyslexia processes letterforms differently than someone without. A user navigating your site with a screen reader experiences text entirely through audio.

Web Content Accessibility Guidelines (WCAG) exist to ensure your typography works for everyone, not just in ideal conditions.

The business case is simple: accessible typography expands your addressable market. The World Health Organization estimates 2.2 billion people have vision impairments. That’s not a niche — it’s nearly 30% of the global population. Designing only for perfect vision means excluding billions of potential customers.

But WCAG standards aren’t just about disability accommodation. They’re about universal design that works better for everyone.

Here’s what you need to know.

Contrast ratios: The non-negotiable baseline

WCAG AA standards (the minimum level most courts and regulations reference) require:

4.5:1 contrast ratio for normal text (under 18pt or under 14pt bold)
3:1 contrast ratio for large text (18pt+ or 14pt+ bold)

This isn’t subjective aesthetics. It’s measurable physics — the luminance difference between text and background.

Why contrast matters: The sunlight test

Indoor office lighting typically measures 300–500 lux. Direct sunlight measures 32,000–100,000 lux.

When someone views your website on a phone in sunlight, screen glare effectively reduces the perceived contrast ratio. Text at 3.8:1 indoors might drop to 2.5:1 in bright conditions — below WCAG minimums and genuinely difficult to read.

Light gray text (#999999) on white (#FFFFFF) measures approximately 2.8:1. This fails WCAG AA for normal text. It looks “on brand” on a designer’s calibrated monitor in a dim office, but becomes nearly invisible on a phone screen outdoors.

Medium gray (#666666) on white measures approximately 5.7:1. This passes WCAG AA comfortably and remains readable in varied lighting conditions.

Testing your contrast

Use WebAIM’s Contrast Checker to measure exact ratios.

Enter your text color and background color (hex codes or RGB values). The tool calculates:

• Contrast ratio (e.g., 4.52:1)
• WCAG AA pass/fail for normal and large text
• WCAG AAA pass/fail (stricter 7:1 standard for normal text)

Test your body text, headlines, buttons, form labels, and navigation. If anything fails AA, adjust color darkness until it passes.

High-contrast Serifs require extra vigilance

Fonts like Playfair Display and Canela use high stroke contrast — thick vertical strokes, thin horizontal strokes, and hairlines. This createsan elegant visual hierarchy but introduces accessibility risk.

The thin strokes can measure 3:1 or lower contrast when rendered in medium gray (#666666) against white backgrounds, failing WCAG standards even though the thick strokes pass.

Solution: Use high-contrast serifs only in dark colors (black, near-black) on light backgrounds, or test specific implementations with contrast checkers. Avoid rendering them in grays lighter than #333333.

Size and spacing: Mobile-first defaults

1. Minimum body text: 16px

WCAG standards don’t mandate specific pixel sizes (it references “relative units”), but mobile accessibility research consistently points to 16px as the practical minimum for body text on phones.

Smaller sizes force pinch-zooming, breaking reading flow and violating WCAG’s “no loss of content or functionality” requirement. iOS Safari automatically zooms when users tap form fields with text under 16px.

2. Preferred body text: 17–18px

17px provides comfortable reading across devices from iPhone SE (4.7″ screen, 1334×750 resolution) to iPad (10.2″ screen, 2160×1620 resolution) without requiring zoom.

18px is increasingly standard for content-first sites (Medium, Substack) because it reduces eye strain over long reading sessions. The larger size creates more vertical rhythm and breathing room.

For older audiences (55+), consider 18–20px as the default. Presbyopia (age-related farsightedness) affects nearly everyone over 50. Larger default sizes accommodate this without forcing users to adjust browser settings.

3. Line height (Leading): 1.5× minimum

WCAG requires a line height of at least 1.5 times the font size for body text. For 16px text, that’s 24px line height (16 × 1.5 = 24).

Why? Tight line height causes lines to crash into each other visually. Users with dyslexia or low vision lose their place when moving from one line to the next. Generous line height creates clear “swim lanes” that guide the eye.

1.5–1.6 is optimal for body text. Headlines can go tighter (1.2–1.3) because they’re larger and users aren’t reading multiple lines continuously.

4. Letter spacing (Tracking): 0 to +0.02em

WCAG needs letter spacing of at least 0.12em (roughly +0.12× the font size) to prevent letters from crowding.

Most professionally designed fonts already meet this at default settings (0em tracking). Where you can improve accessibility: avoid negative tracking except for large display headlines, where optical spacing adjustments are intentional.

For all-caps text, add +0.05–0.08em letter spacing. Capitals lack the ascenders and descenders that create recognizable word shapes, so extra spacing helps differentiate letterforms.

5. Paragraph spacing: 2× font size minimum

WCAG also requires space between paragraphs of at least 2× the font size. For 16px text, that’s 32px margin-bottom.

This creates clear visual breaks that help users with cognitive processing differences parse content structure. It also improves skimmability — users can quickly identify where one thought ends and another begins. Want to see how these spacing rules apply to font pairing systems? Read: How to pair fonts like a pro and some examples.

Best fonts for accessibility

Not all fonts are equal in terms of accessible typography. Some architectural features make letterforms easier to distinguish under imperfect conditions.

1. Tall X-height families

Inter, Source Sans 3, and Poppins maximize legibility at small sizes by dedicating more vertical space to lowercase letters (which constitute 95% of reading matter).

Compare: At 16px, Inter’s lowercase ‘e’ occupies significantly more pixels than Garamond’s lowercase ‘e’, making it easier to resolve on low-DPI screens or for users with vision impairments.

2. Clear counters and apertures

The enclosed spaces inside letters (‘e’, ‘a’, ‘o’) and openings in letters (‘c’, ‘s’, ‘n’) must remain distinct at small sizes.

Source Sans 3 was designed with generous counters specifically to prevent collapse. Even at 14px on budget Android phones (low pixel density), letterforms remain crisp.

Avoid condensed or narrow fonts for body text. They save horizontal space but sacrifice counter clarity. What you gain in layout density, you lose in readability.

3. Avoid all-caps micro-text

Uppercase letters lack ascenders (b, d, f, h, k, l, t) and descenders (g, j, p, q, y) that create recognizable word shapes. Reading all-caps text requires processing letter-by-letter rather than recognizing word shapes, reducing reading speed by 10–15%.

All-caps is acceptable for:

• Short headlines (1–3 words)
• Navigation labels (if large enough, 14px+)
• Buttons with single-word labels

Avoid all-caps for:

• Body paragraphs
• Form labels
• Product descriptions
• Any text longer than 5–6 words

4. Distinguishable characters

Some fonts make critical character pairs difficult to distinguish:

• Lowercase ‘l’ (lima) vs. uppercase ‘I’ (India) vs. numeral ‘1’
• Uppercase ‘O’ (Oscar) vs. numeral ‘0’ (zero)
• Lowercase ‘rn’ vs. lowercase ‘m’

Inter and Source Sans 3 address this with:

• Slashed zero (0̸) option for numeric contexts
• Clear differentiation between l, I, and 1
• Open apertures in ‘rn’ preventing ‘m’ confusion

For code, data tables, or technical contexts, consider monospace fonts (Recursive’s monospace axis, Fira Code) where character distinction is critical.

Want licensing clarity for these accessible fonts? Read: Font licensing for small businesses.

Test your typography: The real-device method

WCAG compliance on paper doesn’t guarantee real-world accessibility. You must test on actual devices in varied conditions.

1. The device matrix

Test on at minimum:

• iPhone SE or equivalent small phone (4.7″ screen, older/budget market)
• Android mid-range phone (6.1″ screen, represents global majority)
• Tablet (iPad or Android, 10″ screen)
• Desktop monitor (24″+, high resolution)

2. The lighting conditions test

View your site:

• In direct sunlight (worst case for screen glare)
• In dim indoor lighting (tests whether text has sufficient weight)
• At night with dark mode (tests whether your dark theme has proper contrast)

If body text becomes difficult to read in any condition, your contrast ratio is insufficient or font weight is too light.

3. The ‘Mockup Method’ in Kittl

Kittl’s mockup generators show designs on real products at actual sizes. Use these to catch legibility issues before printing or publishing.

A body font that looks fine at artboard scale (100% zoom on a 27″ monitor) may compress into gray mush when viewed on a business card mockup or phone screen mockup.

Adjust sizes, weights, and spacing based on mockup feedback — not artboard aesthetics. What matters is how customers experience your typography in real contexts.

4. Screen reader testing

Our personal favorite. If your site includes meaningful text (not just decorative), test with screen readers:

• VoiceOver (macOS/iOS, built-in)
• NVDA (Windows, free)
• TalkBack (Android, built-in)

Ensure:

• Text hierarchy (H1, H2, H3) is semantically correct, not just styled
• Images have alt text
• Form labels are associated with inputs
• Interactive elements have descriptive text

Typography accessibility extends beyond visual rendering—it includes how text is structured for assistive technology.

Ready to build accessible brand typography? Start your 30-day Kittl Pro trial. Access fonts optimized for legibility (Inter, Source Sans 3, Poppins), test designs with real-scale mockups, and export with proper hierarchy for screen readers.