How to Test Font Accessibility:
A WCAG Guide for Designers (No Law Degree Required)

1. WCAG 2.1: What Designers Actually Need to Know

The Web Content Accessibility Guidelines (WCAG) are hundreds of pages long. They're written for lawyers and developers, not designers. Here's what you actually need to know about typography:

• Level A: Basic stuff. If you miss this, some users can't use your site at all.
• Level AA: The standard. Most websites should aim for this. Includes the 4.5:1 contrast rule.
• Level AAA: The gold standard. Hard to achieve, but amazing if you can get there.

2. The 4.5:1 Rule (And Why Light Gray Text Needs to Die)

This is the most important number in accessible typography: 4.5:1. That's the minimum contrast ratio for normal text under WCAG AA.

The math: Contrast ratio is calculated by comparing the relative luminance of text and background. Pure black on pure white is 21:1. Light gray on white can be as low as 2:1. Anything below 4.5:1 fails WCAG AA.

3. Readability vs Legibility (They're Different)

These terms get used interchangeably, but they're different — and both matter for accessibility.

• Legibility: Can you distinguish individual letters? This is about font design. Letters like 'I' and 'l' should look different. Counters (the holes in letters) should be open enough to see.
• Readability: Can you read blocks of text comfortably? This is about line height, line length, spacing, and contrast.

For accessibility: Both matter. A highly legible font can still be unreadable if the line length is too long. A readable layout can still fail if the font itself is poorly designed.

4. Font Size: What the Guidelines Actually Say

Here's something surprising: WCAG doesn't specify a minimum font size. That's because accessibility depends on so many factors — font design, viewing distance, user vision.

But real-world experience gives us some guidelines:

• 12px: Absolute minimum for anything you expect people to read. Only use for captions and fine print.
• 14px: Good starting point for body text on mobile.
• 16px: Standard for desktop body text. Also good for accessibility-focused designs.
• 18px+: Great for senior audiences or users with low vision.

5. Testing Tools I Actually Use (Free and Paid)

I've tried dozens of accessibility tools. These are the ones that survived my workflow:

6. Color Blindness Simulations (You'll Be Surprised)

About 8% of men and 0.5% of women have some form of color blindness. That's millions of users. Here's how common color combinations appear to them:

7. Common Accessibility Mistakes (I've Made Them All)

• Light gray text on white: Looks "clean" but fails contrast. David can't read it.
• Low contrast buttons: "Ghost buttons" with thin borders and light text are impossible to see for low-vision users.
• No focus indicators: Keyboard users need to see where they are. Don't remove `:focus` outlines.
• Justified text: Creates uneven word spacing that's hard to read for dyslexic users.
• All caps for long text: Harder to read because words lose their shape.
• Too much text in all caps: Use sparingly.

8. Designing for Dyslexia

About 10-15% of people have some form of dyslexia. Here's what helps them read:

• Sans-serif fonts: Generally easier to read than serifs.
• Generous spacing: Increase letter spacing slightly (0.5-1px) and line height (1.5+).
• Avoid italics: Slanted text is harder to parse.
• Left alignment: Justified and centered text disrupts reading flow.
• Short lines: 45-65 characters per line ideal.

9. The "David" Test (My Personal Workflow)

After that email from David, I built a simple testing workflow. Here's what I do for every project:

1. Check contrast on everything: I run every color combination through a contrast checker. Text, buttons, icons, everything.
2. Simulate color blindness: I use WhoCanUse to see my designs through different vision types.
3. Test at 200% zoom: I set browser zoom to 200% and make sure nothing breaks. This simulates low vision.
4. Remove color: I look at the site in grayscale. If information disappears, I'm relying too much on color.
5. Read everything out loud: I literally read the content. This helps me find confusing layouts and poor hierarchy.
6. Ask David: I have a few users with different vision conditions who test my sites. Their feedback is invaluable.

I still think about David sometimes. I wonder how many other sites he visits that he can't read. I wonder how many designers have no idea he exists.

Here's the thing: Accessible design isn't about checking boxes or meeting legal requirements. It's about David. It's about millions of people like him who just want to read your content. When you design with them in mind, everyone benefits. Your site becomes clearer, more usable, and frankly, better designed.

Start with contrast. Add generous spacing. Test with real users. And remember that light gray text on white might look elegant, but it leaves people behind.

📚 More from Afsar

Design for David. Design for everyone.