Designing and developing an accessible website can be a big undertaking — but it’s one worth tackling. Approximately 1.3 billion people worldwide have some form of vision impairment, according to the World Health Organization. Some larger corporations may argue that accessibility isn’t as important for them because they can afford to lose a customer here and there who can’t access their website. But 1.3 billion is no small number, even for the largest corporations.
When you look at the dozens of guidelines, ADA compliance can be daunting and overwhelming. If you’ve been tasked with making your website compliant, these six easy steps will help you take the first step to developing an accessible color palette.
1. Understand the Levels of ADA Compliance
Levels of Accessibility
At Tower, we work with lots of small businesses in which individual customers are the prime focus. Everyone gets personalized, tailored attention, which means that visual accessibility is crucial for every website we build.
There are three main levels of ADA compliance — AAA, AA, and A. Each level is governed by a list of specifications that designers and developers must conform to.
- Level AAA — This is the highest and strictest level of compliance. Level AAA is utilized by governmental websites, healthcare websites, and organizations that receive government funding.
- Level AA — This is the middle level of compliance, which is how we build our websites at Tower. We find that level AA provides a good balance between usability and design freedom.
- Level A — This is the beginner level of compliance. It can be a good first step for companies with a small budget, but should by no means be the end-point.
Compliance Standards
One of the most challenging aspects of building a compliant website is ensuring that the color palette is fully accessible. According to the WCAG 2.0, level AA compliance requires a contrast ratio of at least 4.5:1 for normal text (AA compliant) and 3:1 for text over 18pt and user interface components like form fields (AA18 compliant).
In our experience, we try to avoid using AA18 compliant colors since they can create further difficulties when we adapt our desktop designs for mobile. A designer may use a “borderline” AA18 color for 20pt text on desktop. Once it gets scaled for mobile, this text may fall below the threshold and only be 17pt text, making the color no longer compliant. For this reason, we try our best to steer clear of these borderline AA18 colors in favor of fully AA compliant colors.
Minute details like these may make accessibility seem daunting at first, but it is a fight worth fighting. Here are five easy steps to developing an accessible color palette for your website.
2. Evaluate Your Accessible Color Palette Needs
Working With an Existing Color Palette
For brands with an existing color palette and carefully-chosen Pantone values, accessibility can sound like a dirty word. With all the attention that goes into carefully crafting a brand, the idea of having to rethink color can cause brands to push accessibility down the to-do list.
Luckily, many brands can make minor updates (no one aside from their designers will notice!) that can allow their website to be fully accessible. Making slight alterations to a color palette can also give the designer more viable background and text color combinations, which makes for a more dynamic and visually-interesting site.
We recently completed a website redesign project, and in the process, we modified the existing brand to be accessible. Minor adjustments to the red and black tones gave us twice the AA and AAA compliant background and text color combinations.
The main audience for this website is teachers and educational administrators. Having these additional colors gave us the freedom to build a colorful website that would make sense in its industry and appeal to its audience.
When it comes to your own site, if you’re unable to modify the existing colors, you’ll have to get creative. Find a few key color combinations that pass, and then use photography, iconography, and infographics to add more color throughout the site. Take Apple for example. Their fully-accessible homepage is bright, dynamic, and beautiful, and it utilizes only four colors and six combinations, proving that accessibility is only a restriction if you make it one.
Building a New Accessible Color Palette
Being able to design from day one with accessibility in mind is a huge advantage — and it’s really no different from designing any other good color scheme. In fact, to make strong and accessible color palettes, you only need:
- One or two base colors
- A strong call-to-action color
- A handful of neutral colors
Call-to-action colors are typically where designers struggle to remain compliant. If your call-to-action color is lighter (like yellow or light orange), try dark text instead of the more traditional white. You can also save fun, bright colors for hover states and opt for a slightly darker tone on the default button state. This can help buttons draw visual interest while keeping them accessible and user-friendly.
Developing a color palette that is accessible will help your site comply with ADA guidelines. It will also improve the overall user experience of your site, and can even shake up your design process if your routine is feeling repetitive or stale.
3. Find a Color Contrast Analyzer or Color Contrast Chart That You Love
If you’re working on a new website or a website redesign, you’re going to spend a lot of time with your color contrast tool. So, take a little time and find the one that works for you. Here are a few recommendations!
- Contrast Grid from EightShapes — This is our all-time favorite at Tower. It allows you to investigate not just one color, but all of your colors in context with one another. It also generates a unique link for every color palette, making it easy to share with clients, other designers, and developers.
- Toolness — This is a similar tool that grays out non-accessible background and text color combinations. It can be especially helpful in visualizing and explaining compliance to those who are new to the guidelines. Since there are no non-compliant combinations shown, they won’t distract from the fully-accessible options.
- Colors — We love this tool for its sheer inspiration and dozens of bright, exciting accessible color palettes. This can be a great place to start and get inspired if you’re feeling overwhelmed.
- Color Safe — This is another great option, as it also takes into consideration the specific typeface and font weight you are using.
Once you find a tool you love, bookmark it, get comfortable with it, and use it early and often!
4. Adjust and Iterate
Chances are, the first color palette you try won’t be quite right. There may not be enough accessible combinations, and even if there are, the combinations available may not be appropriate. Just because red on black passes level AA, doesn’t mean that it is a good fit for your website.
Play with your colors in context in your design program. If you are making minor alterations to an existing color palette, check your new colors alongside old collateral. Is the difference noticeable? Is that a problem? If you’re starting a new color palette, consider print applications, too. Colors may look great online but horrible in print, and vice versa.
Again, having a strong set of tools at your disposal is the key to working accessibility into your existing design process. At Tower, we use Sketch, which means we have a nearly endless library of plugins at our fingertips.
Stark is a great color contrast analyzer that operates right inside of your design file. It also has the unique ability to mimic different types of color blindness, from the most common to the very rare. This is especially important when designing infographics and charts where differentiating colors is crucial to understanding content. While colors may look completely different to you, if they are too similar in brightness or hue, they may be indistinguishable to someone with partial or full-color blindness.
5. Stay Inspired and Be Creative
There is no “right way” to create an accessible color palette. Beautiful designs are often born out of constraints, and there are incredible accessible designs created every day. We keep our eyes peeled for creative solutions that use accessibility as an inspiration and share them regularly in our design Slack channel.
One of our recent favorites is Dunkin’, who had an interesting problem when it came to redesigning their website. They had an extremely-recognizable color scheme that had largely become a part of their brand, but it provided very limited background and text color combinations.
Rather than letting this affect their brand, Dunkin’ added a toggle to their website that can show a “high contrast” version by switching a modified style sheet on and off. It not only adds higher contrast to the background and text color combinations, but it also increases font sizes, changes out images for live text, adds drop shadows, and more.
Leveraging a creative solution like Dunkin’s can give designers the freedom they are accustomed to, and it can be a cost-effective next step for brands who want to be accessible but aren’t in need of a full redesign just yet.
6. Remember Why It Matters
Designing through the new lens of accessibility can be frustrating at times, especially when working within an existing brand’s color scheme. It can be easy to get excited over an edgy, bright design, but the bottom line is that websites need to be usable, as well as beautiful.
Viewing ADA compliance as a challenge, rather than as a roadblock, can keep things in perspective and strengthen your design skills along the way. Plus, it will make the web a friendlier and more accessible place for the 1.3 billion people worldwide with vision impairment.
Leave a Reply