Can you honestly say that every person who downloads your app can actually use it properly? I've been working in mobile app design for over eight years now, and I still see apps launched every day that completely ignore a huge chunk of their potential users. We're talking about visual accessibility here—and specifically, colour contrast ratios that make or break whether someone can read your app's text, tap your buttons, or navigate your interface at all.
Here's the thing: roughly one in twelve men and one in two hundred women have some form of colour vision deficiency. That's millions of people worldwide who might struggle with your app if you haven't thought about contrast properly. But it goes way beyond colour blindness—we're also talking about people with low vision, those using their phones in bright sunlight, older users whose eyesight isn't what it used to be, and anyone dealing with eye strain or fatigue.
Good design is accessible design—when you create for everyone, you create better experiences for all users
The truth is, most designers I work with want to create inclusive apps; they just don't know where to start with accessibility requirements. That's exactly why I've put this guide together. We'll walk through everything you need to know about colour contrast ratios in mobile app design—from understanding the technical standards to spotting common mistakes before they reach your users. By the end, you'll have practical knowledge you can apply immediately to make your apps more accessible to everyone.
Understanding Colour Contrast Ratios—What They Are and Why They Matter
Right, let's start with the basics. Colour contrast ratio is simply a measurement of how different two colours appear when placed next to each other. Think of it as a scoring system—the higher the score, the easier it is to distinguish between the two colours. The ratio ranges from 1:1 (no contrast at all, like white text on a white background) up to 21:1 (maximum contrast, such as black text on white).
Now here's where it gets interesting. Your eyes might be perfectly fine at reading light grey text on a white background, but millions of users struggle with this combination. People with visual impairments, colour blindness, or even those using their phones in bright sunlight need stronger contrast to read your content comfortably.
Why These Numbers Actually Matter
I've worked on apps where designers chose beautiful, subtle colour schemes that looked gorgeous in the design files—but became completely unusable in real-world conditions. When your app fails basic contrast requirements, you're not just excluding users with disabilities; you're making life difficult for anyone trying to use your app outdoors or in poor lighting.
The business impact is real too. Poor contrast leads to frustrated users, negative reviews, and people simply deleting your app. Worse still, you could face legal issues since accessibility standards are becoming legally enforceable in many countries.
The Different Levels You Need to Know
There are three main contrast ratio targets you should be aware of:
- 4.5:1 — The minimum standard for normal text
- 3:1 — Acceptable for large text (18pt or larger) and graphical elements
- 7:1 — The enhanced level that provides better accessibility
Getting these ratios right isn't just about ticking compliance boxes—it makes your app more usable for everyone, which is exactly what good design should do.
WCAG Guidelines—The Rules Every App Designer Should Know
The Web Content Accessibility Guidelines (WCAG) are the gold standard for making digital content accessible—and yes, that includes mobile apps. These guidelines weren't written by some faceless committee; they were created by accessibility experts, designers, and people with disabilities who know what actually works in the real world.
WCAG breaks down contrast requirements into different levels: AA and AAA. For mobile app design, you'll want to focus on AA compliance, which is the standard most organisations aim for. The contrast ratios are straightforward: normal text needs a 4.5:1 ratio against its background, whilst large text (18pt bold or 24pt regular) only needs 3:1. These numbers might seem arbitrary, but they're based on extensive research into what people with visual impairments can actually read comfortably.
Understanding the Different Success Criteria
WCAG doesn't just care about text colour. The guidelines cover non-text elements too—things like button borders, icons, and form field outlines. These elements need at least a 3:1 contrast ratio to be considered accessible. This is where many app designers trip up; they'll nail the text contrast but forget about their subtle grey icons or barely-visible form borders.
Always test your contrast ratios with actual tools rather than eyeballing them. What looks fine to you might not meet WCAG standards, and what meets standards might look different on various devices and screen brightness levels.
Why These Numbers Matter
The contrast ratios in WCAG aren't pulled from thin air. They're based on research into how people with low vision, colour blindness, and age-related vision changes interact with digital content. Following these guidelines means your app works for everyone, not just users with perfect vision.
Testing Your App's Contrast Ratios—Tools and Methods That Actually Work
Right, let's talk about the practical side of things. You can read all the guidelines in the world, but if you don't know how to actually test your contrast ratios, you're flying blind. I've tried pretty much every tool out there over the years, and some are definitely better than others.
The most straightforward approach is using online contrast checkers. WebAIM's contrast checker is my go-to—it's free, reliable, and gives you instant results. You just pop in your background and text colours, and it tells you whether you pass WCAG AA or AAA standards. Simple as that. Colour Oracle is another solid option if you want to see how your app looks to people with different types of colour vision deficiencies.
Browser Tools That Save Time
If you're working on web-based apps or prototypes, Chrome's DevTools has a built-in contrast checker that's genuinely useful. When you inspect an element, it shows the contrast ratio right there in the colour picker. Firefox has something similar, and both browsers can simulate various vision conditions.
Design Software Solutions
For those working in Sketch, Figma, or Adobe XD, there are plugins that check contrast ratios as you design. Stark is probably the most popular—it integrates directly into your workflow and flags contrast issues before you even export your designs. No more going back and forth between tools.
The key is testing early and often. Don't wait until your app is nearly finished to check contrast ratios. Build it into your design process from day one, and you'll save yourself a lot of headaches later on.
Common Contrast Mistakes—What I See App Designers Get Wrong Most Often
After years of reviewing mobile app designs and working with teams on accessibility improvements, I've spotted the same contrast mistakes over and over again. The good news? They're all fixable once you know what to look for.
The Grey Text Trap
This one's everywhere. Designers love using light grey text because it looks clean and modern, but it's a nightmare for visual accessibility. I see #999999 grey text on white backgrounds constantly—it fails WCAG AA standards badly. Your users with low vision or older eyes will struggle to read anything. Dark grey like #333333 works much better whilst still looking polished.
Button State Confusion
Disabled buttons cause massive headaches. Teams often make disabled buttons so light that users can't tell if they're clickable or broken. The contrast between your button text and background needs to meet standards regardless of the button's state—active, hover, or disabled.
The biggest mistake I see is designers thinking accessibility means ugly design. It doesn't. Good contrast actually makes your app look more professional and easier for everyone to use.
Placeholder text gets forgotten too. That light grey hint text in form fields? It needs proper contrast ratios just like everything else. And don't get me started on white text over coloured backgrounds—what looks fine on your bright monitor might be invisible on a phone screen in sunlight. Always test your contrast ratios with actual tools rather than eyeballing it. Your users will thank you, and you'll avoid the expensive redesigns later.
Designing for Different Types of Visual Impairments—Beyond Just Colour Blindness
When most app designers think about visual impairments, colour blindness is usually the first thing that comes to mind. That's fair enough—it affects around 8% of men and 0.5% of women—but it's just one piece of a much bigger puzzle. There are loads of other visual conditions that we need to think about when we're designing apps, and honestly, many of them have a much bigger impact on how people use our products.
Low vision is probably the most common challenge we overlook. This isn't the same as being completely blind; it's when someone has significant vision loss that can't be corrected with glasses or contacts. People with low vision might struggle to see fine details, have trouble with glare, or need much higher contrast levels than what standard accessibility guidelines recommend. Then you've got conditions like macular degeneration, which affects central vision, meaning people can see around the edges but not what's directly in front of them.
Key Visual Impairments to Design For
- Low vision and partial sight—requires higher contrast and larger text
- Macular degeneration—central vision loss affects reading and detail work
- Glaucoma—creates blind spots and reduces peripheral vision
- Diabetic retinopathy—causes blurry vision and dark spots
- Cataracts—reduces clarity and increases sensitivity to glare
- Light sensitivity—bright screens can cause pain and headaches
What's interesting is that many of these conditions get worse in certain lighting situations. Someone might use your app perfectly fine indoors but struggle completely when they're outside in bright sunlight. This is why we need to think beyond just meeting minimum contrast ratios—we need to consider the real-world environments where people use our apps. For more comprehensive guidance on making your app accessible for users with visual impairments, you'll need to consider additional factors like scalable text and proper navigation patterns.
Practical Tips for Improving Contrast—Simple Changes That Make a Big Difference
After years of working with mobile app design teams, I've noticed that improving accessibility doesn't require a complete redesign. Most contrast issues can be fixed with small tweaks that make your app work better for everyone. Let me share the changes that actually work.
The quickest win is darkening your text colours. Many designers use light grey text thinking it looks modern, but bumping it up to a darker shade instantly improves readability. I always recommend starting with your body text—if it's currently #999999, try #666666 or darker. Your users will thank you for it.
Background Changes That Work
Sometimes the text colour isn't the problem—it's what sits behind it. Adding a semi-transparent overlay behind text on images works wonders for visual accessibility. You can also try increasing the opacity of existing overlays or switching to solid colour backgrounds where possible.
Use your phone's greyscale mode to test contrast ratios quickly. If you can't read the text clearly in greyscale, your contrast needs work.
Button and Interactive Elements
Interactive elements need the highest contrast ratios, but they're often overlooked. Here are the changes that make the biggest impact:
- Make button borders thicker and darker
- Add drop shadows or subtle outlines to clickable elements
- Use solid colours instead of gradients for better contrast
- Increase the difference between active and inactive states
These adjustments might seem minor, but they dramatically improve how people interact with your app. The best part? Most users won't even notice you've made changes—they'll just find your app easier to use. Consider also implementing voice control features alongside improved contrast ratios to provide multiple ways for users to interact with your app.
Conclusion
Getting colour contrast right isn't just about ticking a compliance box—it's about making sure your app works for everyone who wants to use it. I've seen too many brilliant apps fail simply because people couldn't read the text or distinguish between buttons. That's millions of potential users walking away before they've even given your app a proper chance.
The WCAG guidelines give us clear targets to aim for: 4.5:1 for normal text and 3:1 for large text. These aren't suggestions; they're the minimum standards that will make your app usable for people with visual impairments. But here's the thing—meeting these ratios often makes your app better for everyone, not just those with accessibility needs.
Testing doesn't have to be complicated either. Tools like Colour Oracle, WebAIM's contrast checker, and Stark can help you spot problems before your app goes live. The key is making contrast checking part of your regular design process, not something you remember at the last minute.
Remember that accessibility isn't a one-time fix—it's an ongoing commitment. Visual impairments come in many forms, from colour blindness to low vision, and each presents different challenges. But when you design with contrast in mind from the start, you're already solving most of these problems.
Good contrast ratios make text easier to read, buttons clearer to identify, and your app more professional overall. That's not just good accessibility practice; that's good business sense too.
