Design Domination Podcast Episode #183: The Biggest Accessibility Mistake (& How to Avoid It)

Music: https://www.bensound.com

---

Did you know as a document or web designer you could do one simple and not very technical thing to make your designs so much more visually accessible to sighted users? It’s true! That is to check the contrast of your designs.

The Problem With Low-Contrast Text

Almost every year, WebAIM assesses the accessibility of the top 1 million home pages. In their 2024 report, they found that 81% of the ones they assessed have low-contrast text.

Here’s why this is such a big problem. First off, think about how people use websites and what they do on them. Someone may need to:

• find out more about a company, product or service;
• search for how to do something;
• log into their bank account;
• make a donation;
• order food;
• shop for products;
• click through to a company’s social media channel; or
• fill out a contact or application form.

If a sighted user has low vision or another type of visual disability, they might struggle with doing these things. Worse, they may not be able to at all.

You might say, well, they could just enlarge the text on their monitor or zoom in on their phone. But viewing low-contrast text at a larger size doesn’t mean it’s necessarily more readable. The other thing is that many websites have zoom disabled, so it’s not even always possible to do that.

The issue of low-contrast text is also not specific to web design. We just don’t have any statistics (to my knowledge anyway) about the contrast of digital documents, but they are important too. I see issues with them all the time.

Think about the effect of low-contrast text in a document. You could have:

• an annual report that tells stories and provides financial information, which may entice people to donate to an organization;
• a report with medical results;
• a report with infographics;
• an instructional guide;
• a travel or sales brochure;
• a map; etc.

Actually, you can also apply contrast to package designs.

There is a product I buy all the time. It uses white text on a light blue background that says “Free from.” After that, in black text, it lists a bunch of allergens.

Well, if you cannot see the white text that says “free from,” you might actually think that product contains those allergens, not is free from them. That would mean someone wouldn’t buy it if they were concerned about those ingredients! How does that affect sales?

You might think, well, but the majority of users will be able to read low-contrast text. Maybe, maybe not.

I don’t have a visual disability, but I cannot read a lot of low-contrast text, I’ll tell you that. I often see white text on a yellow or light blue background. Hey, I’m guilty of doing that too before I knew better.

You might say you’re going for a subtle kind of look or a minimalist design, but many people won’t be able to read that text. So the what’s the point?

You might also think we’re talking about a minority of people here. But get this: 2.2 billion people worldwide have a visual disability, such as:

• Refractive errors,
• Cataract,
• Diabetic retinopathy,
• Glaucoma,
• Macular degeneration.

I haven’t even brought up color blindness yet. That affects 1 in 12 males and 1 in 200 females. That may not sound like a lot of people, but get this: Color blindness affects 350 million people worldwide. That is the same size as the population of the U.S.!

People with color blindness could really have a hard time understanding any kind of data graphics or instructions or other content that relies on color to understand it. Ensuring sufficient contrast can help with some of that. But there are other things to take into consideration though. I’ll get into that more in a future episode.

How to Check Contrast

There are quite a few contrast checkers out there, and some are great for different purposes.

Some contrast checking tools are available:

• as a website,
• as a downloadable app,
• built into an app,
• as a web browser extension or
• as a script.

Keep in mind no color is inherently inaccessible. It’s always about how two colors are used together. So you are not limited in your color choices at all.

TPGi Colour Contrast Analyser

One I use often is the TPGi Colour Contrast Analyser. You can use this contrast checker to check websites, documents, infographics, really anything on your monitor.

Here’s how that works. Let’s open the Colour Contrast Analyser.

Like I said, you can put in the hexadecimal values for any two colors. I’ll use the codes for my brand colors—the blue and orange. It gives you a sample preview, and it will show you if they pass or fail.

This says it passes for 4.5 to 1.

Typically, you’re going to be looking at AA, unless you have a stricter requirement of AAA.

You can see here it says it passes for regular text, and it passes for large text.

To be considered large text, text needs to be at least 14 points or approximately 18.66 pixels and bold, or 18 points any weight or approximately 24 pixels any weight.

If we look here, we can see that this color combination passes for regular text and large text.

You can also sample with this.

We’ll sample this text color here, the light blue. Then we’ll sample the background color, the white. This has a contrast ratio of 3.1 to 1. So this fails for regular-sized text, and it passes for large text.

This is 19 points and bold, so this is acceptable for large text. We could not use this blue for the body text, though, because that is only 10.5 points.

How to Make Your Designs More Accessible

So this is an easy way to make your designs so much more accessible to sighted individuals with (and without!) visual disabilities.

Was this helpful? Let me know and share your favorite contrast checker, if you have one.

And be sure to like, share and subscribe to help me get this content out to more designers.