Screen Readers and ARIA Labels: Getting Started
Learn how screen readers work and why proper ARIA labels matter. This guide covers semantic HTML and accessible naming conventions.
Visual Impairments and Contrast: Font Sizing and High Contrast Modes
Users with low vision need adjustable text sizes and sufficient color contrast. We’ll show you how to implement these features and why they’re critical for accessibility compliance.
Why This Matters More Than You Think
Vision problems affect roughly 2.2 billion people worldwide. That’s not a small number — it’s actually 1 in 4 people you encounter. Many of them navigate the web daily, but they’re doing it under serious strain because sites don’t account for their needs.
The good news? You don’t need fancy tech to help. Proper font sizing and contrast are simple, straightforward changes that make a massive difference. We’re talking about real people being able to actually read your content without squinting or using magnification tools.
The Core Challenge
A user with age-related macular degeneration can only see the center 10 degrees of their visual field. Fixed font sizes become useless. Hard-to-read color combinations? Completely inaccessible.
Flexible Font Sizing: The Foundation
The biggest mistake? Using fixed pixel sizes everywhere. A 12px font on desktop might look fine on your screen, but someone with low vision can’t read it no matter what they do.
Here’s what works: Start with relative units. Use
rem
or
em
instead of
px
. Set a base font size on your root element (typically 16px), then scale everything from there. When users change their browser’s default font size, your entire site scales with them.
Practical Implementation:
-
Use
font-size: 1.125remfor body text (18px equivalent) - Set minimum line-height to 1.5 for readability
-
Use
clamp()for responsive scaling - Never go below 16px base size
Color Contrast: The Non-Negotiable Standard
This is where most sites fail. You’ve probably seen it — light gray text on a slightly lighter gray background. It looks “elegant” in design mockups, but it’s completely unreadable for anyone with color vision deficiency or astigmatism.
WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. That’s not arbitrary. That’s the minimum threshold where people with low vision can actually read your content.
Normal Text:
4.5:1 minimum
Large Text:
3:1 minimum
High Contrast Modes: Users Are Already Using Them
Here’s something important: Users with vision problems don’t wait for you to implement accessibility features. They’re already using their operating system’s high contrast mode or browser extensions. Windows has a built-in high contrast option. macOS has Increase Contrast. Mobile devices have similar features.
Your job is to not break these features. Some websites, unfortunately, override system colors with inline styles or force specific color values. That defeats the entire purpose. When a user activates high contrast mode, they’re telling you: “I need white text on black. Nothing else works for me.” Respect that.
What Not to Do
Don’t use
background-color: #f5f5f5 !important;
or other forced styles that override system preferences. Use semantic HTML and let the cascade work naturally.
Testing Your Implementation
Theory’s fine, but you need to actually test this. Tools like WebAIM’s Contrast Checker or Lighthouse (built into Chrome DevTools) will tell you exactly which elements fail the contrast test. Run your site through them. Don’t guess.
Then go further. Actually resize text in your browser. Try zooming to 200%. Does your layout break? Can you still read everything? Most sites fail these basic tests because they’ve never actually tried them.
1
Run Lighthouse accessibility audit
2
Check contrast ratios for all text
3
Zoom text to 200% and verify layout
4
Test with Windows high contrast mode
Important Note
This article provides educational information about implementing font sizing and high contrast features for web accessibility. WCAG 2.1 standards and accessibility best practices continue to evolve. We recommend consulting the official WCAG guidelines and testing your implementation with real users and automated tools. Accessibility is an ongoing process, not a one-time implementation.
Making Your Site Actually Accessible
Font sizing and contrast aren’t edge cases. They’re not nice-to-haves. They’re the difference between someone being able to use your site and not. When you implement proper font sizing with relative units and ensure color contrast meets WCAG standards, you’re not just checking a compliance box. You’re actually solving problems for real people.
Start small. Pick one of these features this week. Test it properly. Then move to the next. Accessibility compounds — each improvement makes your site work better for more people. That’s worth the effort.
Ready to Audit Your Site?
Use Lighthouse and axe to find contrast and font sizing issues automatically.
Learn About Accessibility AuditsContinue Learning
