How to make your website both accessible and attractive. 

Color says a lot. Your color choices can communicate your commitment to all your website users, regardless of their visual capabilities. Accessible color palettes make a world of difference for your users.

So far in our series on color, we’ve discussed the unforeseen effects of color psychology on branding, and released our 60-page, downloadable color palette guide totally free.

Now, we want to turn our attention to the mechanics of color in website design.

Most of the time when we talk about color with marketing, we focus on the psychological interaction: what the color choices say about the brand and how the colors make the user feel.

But before that psychological response can happen, a physical interaction needs to take place. While viewing a website, the light from the screen needs to reach the user’s to then be processed by their brain.

If your vision is not impaired, it can be easy to take this sensitive process for granted. For that reason, it’s essential to pay extra attention to your website and make sure color choices accommodate the needs of others.

According to the National Institutes of Health (NIH), in 2015, about 3.2 million Americans had visual impairments even after the best possible corrections were made. The NIH predicts that the number of people with visual impairments will only increase in years to come. That ultimately means that content is going to have to universally shift (if it hasn’t already) to be more accessible for all users.

For us here at Kokopelli, accessibility is about more than just numbers. We’re storytellers, and we believe an important part of that is valuing everyone’s story - if we don’t consider the needs of people with visual impairments, we fail to do that. 

As part of our ongoing series on color, we want to outline some of the best practices to consider when choosing colors for your website.

Contrast is Key

In our first post in this series, we talked about the idea of contrast: colors positioned opposite one another on the color wheel.

In branding, contrast is valuable for making things pop, but when we’re talking about essential design, contrast is crucial.

Think of how often you interact with text on a website, whether on your computer, tablet, or mobile device. Chances are, the vast majority of those interactions involve black text on a white background (or vice-versa, which you can tell we’re very fond of).

This combination works so well and is so easy to read because the black and white color pairing have the highest contrast ratio possible—21:1.

Contrast ratio is a formula derived by W3, the World Wide Web Consortium, which sets the standard for web design and presentation. The formula is specifically part of the Web Content Accessibility Guidelines set out by W3.

To be considered successful for accessibility purposes, the minimum standard contrast ratio is 4.5:1 or 3:1 for large text (which is greater than 18pt regular font or 14pt bold font). 

High contrast increases the clarity of your text, making it easier for all readers to discern on the page. If you’ve ever tried to make out yellow text on a white background, you’ve seen how much of a difference these choices make.

For a convenient tool to calculate contrast ratios, check out Tanaguru.

Of course, black and white are not the only acceptable color choices for text, but they are the most foolproof.

Generally speaking, the best places on your website to incorporate a wider, more interesting selection of colors is in your navigation. Pull downs, menu bars, headers, and footers are where we typically see color popping up on websites.

Contrast in these navigation panels matters just as much as contrast in the body content of your website. After all, users need to be able to read the navigation clearly to be able to use your website.

These navigation panels typically use two or three - and possibly four- colors. There is the static text and background color of the panel, and generally at least one of these colors changes when the user hovers over the panel with their mouse or clicks on that panel.

It’s helpful if these panel colors match your brand colors. You spent so much time picking those after all, and you might as well use them here. Make sure to measure every color pairing in your style guide and use the ones that give you the highest contrast ratio while matching your style.

But contrast ratio doesn’t tell you the whole story. As a designer, sometimes you have to exercise more personal judgement.

Designing for Color Blindness

Now that we’ve focused on contrasting colors, let’s focus on making sure a contrasting pair is readable to everyone.

Start with two colors that nominally fit the W3 accessibility standard: red (Hex: B53837) and teal (Hex: 00FFC8). This combination has a ratio of just over 4.5. Good to go, right?

Test this combination out on a page, though, and you’ll see that it’s not exactly easy to read. Even to a person without visual impairments, this text presents a challenge, and the letters can even look like they’re vibrating against the background.

But to people with color blindness, these two colors become the same shade, rendering your text unreadable. So how do designers accommodate this?

There are three types of color blindness, each with their own combinations of problematic colors. Avoiding known troublesome combinations (like red and green or orange and green) is a good first step. Ensuring you’re using a contrast ratio appreciably higher than the minimum standard should also guard against this.

Beyond that, if you have the time and ability, see if you can test your design on an audience of color blind users. If your team is only made up of people without visual impairments, you will find their feedback invaluable. 

Designing for All

The thing about these guidelines is that they benefit all users. Visually impaired or not, we all navigate websites better when they use high-contrast, and well-considered design.

But for those users who navigate a world not always friendly to their needs, it makes a difference when designers go out of their way to help them.

Accessibility doesn’t stop at color choice either. Making an entire website accessible can be quite a cumbersome project. It’s easy to focus on main elements, like color palette, logos, and headers, but ensuring an entire website passes the compliancy standards can be quite tricky.  

Here at Kokopelli, we use Accessibe to make sure every element and feature is compliant. Although AccessiBe should not be seen as a replacement for poor color choices, it is a great tool to use in addition to selecting the proper colors.

To build a more inclusive, accessible world, we can start with small adjustments like selecting the right colors and implementing ADA compliant content.

Did you miss our first two blogs in our color series? Enjoy them here or download our 60-page color palette guide below!