High Contrast Mode FTW
Don’t let web accessibility (a11y) lead to bad designs. Meeting color contrast standards should create an amazing user experience.
Have you been in a meeting when web accessibility (a11y) comes up? If you haven’t, make sure and have some popcorn handy so you can sit back and watch the show. It typically goes like this:
Someone: We need to start supporting web accessibility needs to help customer x.
Everyone else: What is web accessibility?
Someone: Screen reader support, keyboard navigation, high contrast mode…
Everyone else: RAWR! GHAAAA! AAARRRGGGHHH!
There will be a lot of meetings, and a long list of reasons why accessibility is difficult. Tempers will flare, and you’ll have to justify the value constantly. I understand these concerns. I’ve lived through them too.
I was responsible for launching the first accessible experience for the Bridge LMS. Like many accessibility projects, we had two phases: the wrong way, and the right way. I learned a lot of things the hard way, and then finally some the easy way. My goal is to share what I learned about how to approach accessibility projects. This article focuses on high contrast mode and why you should be eager to support it.
Basic Color Contrast Guidelines
Web design best practices call for a 3:1 ratio between foreground and background colors. Most designers can work in this space without feeling too constrained. In practice many sites fail to meet these guidelines.
A contrast ratio of 3:1 is the minimum level recommended by [ISO-9241–3] and [ANSI-HFES-100–1988] for standard text and vision.
WCAG 2.0 recommends a 4.5:1 contrast ratio which is much more difficult to achieve. The 4.5:1 ratio is the smallest amount of contrast needed to provide value to users with visual impairments. It is by no means an ideal contrast ratio. The WCAG 2.0 AAA level spec calls for 7:1, which gives a much better experience to people who have visual impairments.
The Wrong Way (4.5:1)
Often, the first step to meet color contrast needs is to take your current design and “convert” the colors to 4.5:1 colors. If you’ve already done this and failed, don’t feel bad. I’ve been there too.
Designs that meet the 4.5:1 contrast ratio either have muddy, or muted colors. The ratio also makes it difficult to represent brand guidelines. Designers have given up making high contrast designs because of how hard it is to work with 4.5:1 ratio colors.
The worst part of a 4.5:1 project is that it only meets the bare requirements of the spec. It won’t delight users. The site won’t look as good as your lower contrast version. The best outcome you’ll get is checking a web accessibility box. You can do better than that!
The old adage “Less is more” encourages the wrong behavior for designing a high contrast mode. More is more, and when you design from a high contrast perspective it can be a lot more. Don’t shoot for the minimum contrast ratios. Working with a much higher ratio will give you both more freedom, and better results.
My color contrast project stalled when our design team couldn’t agree on which colors to use. No one liked any of the designs or colors presented. Even worse, I’d challenged the team to support 7:1, which seemed like a second impossible task.
After a few months of frustration we hadn’t made measurable progress. Albert Candari, the Director of UX for Bridge, took the problem and dug in. His work changed the trajectory of the project. It also changed the way I thought about design forever.
The Right Way (7:1)
Albert took a step back from the color conversion problem and started from scratch. If we wanted to support 7:1 anyway, it didn’t make sense to provide 4.5:1 at all. It was an exercise in futility. He focused on 7:1 color contrast and skipped 4.5:1 completely.
The first thing Albert designed was a color matrix. He took the brand colors we used and created a strong set of colors that we could use on a dark background. Using a light color and dark background pallet is visually striking as well as high contrast.
You will need more than a pallet of colors to deliver an awesome high contrast mode. Look at color, typography, icons, borders, and other visual elements as part of a design system. For example, color contrast requirements are lower for larger text. Increasing the font size of your header will give you more color options. Adding a border to a button can make it have enough contrast.
Create a pallet that groups your colors into three main categories:
- Primary
- Secondary
- Incidental
You will need to negotiate and prioritize the colors as you refine your selections. Remember that bright colors will be indistinguishable for users with visual impairments. Use lines, text, and iconography instead of color. The color pallet will bring richness to users who can distinguish colors.
Once we had a great color pallet, the next step was to map usages of old colors to the high contrast color matrix. The color matrix will help your team understand which colors they should use. This will reduce the number of exact mocks of screens you need to build. We found a few challenges on the way. You should expect to make some adjustments to your color matrix as you work through the project.
The high contrast mode project for Bridge was a huge success. We found that quite a few users ended up switching to high contrast mode because it was gorgeous.
Conclusion
If you’re going to support web accessibility standards (and you should) you may as well do it the right way. Using a dark background and exceeding the WCAG 2.0 AA 4.5:1 contrast ratio is easier than converting your pallet. You’ll also find that achieving AAA 7:1 contrast is easier and better for the product design. In the end you can offer an excellent experience to every user.
