Web Typography Accessibility: The Ultimate WCAG 2.2 Guide

If your website is hard to read, it doesn't matter how good your content is.

According to the World Health Organization, over 2.2 billion people have a near or distance vision impairment. Furthermore, up to 15% of the global population has some form of dyslexia. When you design without accessibility in mind, you are actively locking the door on a massive segment of your market.

But accessibility is not just about helping those with disabilities. It is about Universal Design. A font that is legible for a user with low vision is also clearer for a user reading on a cracked phone screen in bright sunlight.

This guide moves beyond the basics of "make the text bigger" and explores the nuance of accessible typography, adhering to WCAG 2.2 standards and cognitive science.

1. The Core Principles: Legibility vs. Readability

To master accessibility, we must distinguish between two often confused terms.

Legibility (The Micro Level)

Legibility refers to how easily a user can distinguish one character from another.

• - **The Test:** Can you tell the difference between a capital 'I', a lowercase 'l', and the number '1'? Can you distinguish a 'c' from an 'e'?
• **The Failure:** Tight apertures (small openings in letters) cause letters to blur together for people with visual impairments.

Readability (The Macro Level)

Readability refers to how easily a user can process a block of words and sentences.

• - **The Test:** Does the eye flow smoothly across the line, or does it get lost?
• **The Failure:** If the line length is too long (over 80 characters), users with cognitive disabilities often lose their place when tracking back to the start of the next line.

2. Choosing the Right Typeface

For years, the design community debated whether Serif or Sans-Serif was "better" for accessibility. The answer is nuanced.

The Case for Sans-Serif (Verdana, Arial, Tahoma)

Sans-serif fonts are generally considered the safest bet for digital accessibility. Their clean lines and lack of decorative feet reduce "visual noise" at low resolutions.

• - **Why they work:** They typically have simpler shapes and uniform stroke widths, which helps people with low vision.
• **Recommendation:** Verdana was specifically designed for screen readability with wide counters and loose spacing. Inter and Roboto are excellent modern alternatives.

The Truth About "Dyslexia Fonts" (OpenDyslexic)

You may have seen fonts like OpenDyslexic, which feature heavy, weighted bottoms intended to prevent letters from "flipping" or "floating" for dyslexic readers.

• - **The Trade-off:** While some users swear by them, peer-reviewed studies are mixed. Many studies suggest that standard, well-designed Sans-Serif fonts (like Arial or Helvetica) offer equal or better reading speeds for dyslexic users than specialized fonts.
• **The Strategy:** Do not force a "dyslexia font" on your entire site. Instead, offer it as a user toggle option.

The New Gold Standard: Atkinson Hyperlegible

Developed by the Braille Institute, Atkinson Hyperlegible is a grotesque sans-serif designed specifically for low-vision readers.

**Unique Feature:** It breaks the rules of uniformity. It intentionally differentiates distinct letterforms (e.g., adding a tail to the 'l' to separate it from 'I') to maximize character recognition. It is free, open-source, and aesthetically pleasing enough for mainstream branding.

3. The Science of Styling: Size, Weight, and Case

Selecting the font is only step one. How you style it determines compliance.

Font Size (16px is the Minimum)

The days of 12px or 14px body text are over.

• - **Standard:** 16px (1rem) is the absolute minimum for body text.
• **Ideal:** 18px to 20px is becoming the new standard for content-heavy sites. Larger text reduces eye strain for everyone, not just the visually impaired.

All Caps is a Cognitive Roadblock

Avoid using ALL CAPS for blocks of text longer than a few words.

**The Science:** We read by recognizing word shapes. "Typography" has a unique shape (ascenders and descenders). "TYPOGRAPHY" is just a rectangle. Reading all-caps text reduces reading speed by 10-20% because the brain has to decipher letter-by-letter rather than word-by-word.

Italics and Underlining

• - **Italics:** Harder to read because the letters are slanted and pixelated. Use bold for emphasis instead.
• **Underlining:** Reserve strictly for hyperlinks. Underlining normal text confuses users who try to click it, and the line often cuts through descenders (g, j, p, y), reducing legibility.

4. Contrast and Color: The WCAG Standards

Contrast is the ratio of luminance between the foreground (text) and background.

The WCAG 2.1 Ratios

• - **AA Standard (Minimum):** 4.5:1 for normal text.
• **AAA Standard (Enhanced):** 7:1 for normal text.
• **Large Text (18pt+ or bold 14pt+):** 3:1 is acceptable.

The "Pure Black on Pure White" Myth

While high contrast is good, maximum contrast (#000000 on #FFFFFF) can actually be harmful.

**The Issue:** For people with astigmatism or light sensitivity (photophobia), extreme contrast creates a "halation" effect where the white background bleeds into the black text, making it vibrate.

**The Fix:** Use an off-black (e.g., #1A1A1A) on an off-white (e.g., #F9F9F9). This softens the blow to the retina while maintaining a healthy 15:1 contrast ratio.

5. Layout Mechanics: Leading and Tracking

Accessibility happens in the CSS.

Line Height (Leading)

Text that is packed too tightly is impossible to track.

• - **WCAG Guideline:** Line height should be at least 1.5 times the font size (150%).
• **Paragraph Spacing:** Space following paragraphs should be at least 2 times the font size.

Line Length (Measure)

**The Rule:** Limit lines to 60-80 characters.

**Why:** If a line is too long, the eye fatigues and fails to find the start of the next line. If it's too short, the eye gets tired from constantly jumping back and forth.

Alignment: Avoid Justified Text

Never use text-align: justify on the web.

**The Problem:** Justified text creates "rivers of white space" running down the page. These irregular gaps are incredibly distracting for dyslexic readers and break the visual rhythm needed for smooth reading. Always use left-aligned text (for left-to-right languages).

Conclusion: Empathy in Code

Designing for accessibility is not a limitation on your creativity; it is a challenge to your skill. It forces you to prioritize clarity, structure, and hierarchy--which ultimately makes the design better for everyone.

When you choose a font that respects the needs of the visually impaired, you are making a statement about your brand's values. You are saying: "We welcome everyone here."

Recommended Tools

• Before publishing, always test your typography:
• **Stark:** A plugin for Figma/Sketch to check contrast ratios.
• **UseContrast:** A quick checker for hex codes.
• **NoCoffee:** A vision simulator that shows you what your site looks like to someone with cataracts, astigmatism, or color blindness.