Why Contrast Matters More Than You Think
If you've ever squinted at text on a screen, you've experienced the real problem with poor contrast. It's not just annoying—it's excluding people. About 253 million people worldwide have low vision. They're not using specialized screen readers. They're just trying to read your website.
The WCAG 2.1 standards exist because someone tested what actually works. The numbers aren't arbitrary. They're based on real measurements of how human eyes perceive color and brightness. And here's the thing: when you fix contrast for people with low vision, everyone benefits. Better readability. Fewer headaches. Better user experience across the board.
Understanding Contrast Ratios
Contrast ratio is a mathematical measurement. It compares the brightness of two colors—typically text and its background. The scale runs from 1:1 (identical colors, completely unreadable) to 21:1 (maximum possible contrast).
WCAG Standards at a Glance
- Level A: 3:1 ratio for normal text
- Level AA: 4.5:1 ratio for normal text (the standard for most government services)
- Level AAA: 7:1 ratio for normal text (enhanced accessibility)
Montreal government services must meet Level AA. That 4.5:1 ratio isn't arbitrary. Research shows it's readable for people with typical low vision (20/40 vision). It's the sweet spot between strict accessibility and practical design flexibility.
How to Test Your Colors
You don't need expensive software. There are free tools that do the job perfectly. WebAIM's contrast checker is the industry standard. Paste in your hex colors, and it tells you whether you pass Level AA or AAA. Takes 30 seconds.
Some designers use browser extensions that overlay contrast information right on the page. Others build contrast checking into their design systems from day one. The approach varies, but the principle stays the same: test before you ship. Don't guess.
Pro tip: Test different text sizes separately
WCAG distinguishes between large text (18pt+) and normal text. Large text can get away with 3:1 contrast. Normal text needs 4.5:1 for Level AA. Know which one you're testing.
Note on Individual Differences: Individual learning outcomes and accessibility needs vary from person to person. These guidelines provide a framework for best practices, but real-world testing with actual users—especially those with vision differences—is always valuable. Contrast requirements interact with screen brightness, viewing distance, and individual perception in ways that standards can't fully capture.
Real-World Implementation
Theory's nice. Implementation is what counts. Let's say you're building a government service form. Dark text on white background? That's probably 12:1 contrast. You're safe. Dark blue on light gray? You need to check. Could be 4:1, could be 2:1. The difference between passing and failing comes down to shade selection.
Here's what we've learned from Montreal projects: when you design for contrast from the start, you actually get better visual hierarchy. Text is easier to scan. Colors become more purposeful. It's not a restriction. It's a guide toward clearer design.
Choose your base colors — typically background and primary text
Test the ratio using WebAIM or your design tool
Adjust if needed — make text darker or background lighter
Test secondary colors — links, buttons, focus states
Common Mistakes and How to Avoid Them
We've seen these patterns repeat. Light gray text on white background—designers love it for a "subtle" look. It fails every time. The subtlety isn't elegant. It's invisible. Same with dark navy on black. Or using color alone to convey information (red for error, green for success) without also using text or icons. Color-blind users miss the message entirely.
Another one: testing contrast on a bright monitor in a dark room, then wondering why it's hard to read in daylight. Screen brightness matters. So does viewing angle. That's why standards focus on measurable ratios rather than subjective appearance.
The fix? Be deliberate. Test on different screens. Ask colleagues to read your text without you watching. If they have to lean in or squint, your contrast probably isn't working.
Moving Forward
Color contrast is one of the easiest accessibility wins. It's measurable. It's testable. It doesn't require complex code or expensive tools. And it makes a real difference for real people. Montreal government services set the standard—they need to work for everyone. That starts with readable text.
Start with Level AA. That 4.5:1 ratio. Use a free tool. Test your colors before launch. And remember: accessible design is good design. Everyone reads better when contrast is right.