Designing for web accessibility: The importance of accessible color

Yesterday I groggily got out of bed, brushed my teeth, and sat down with a cup of coffee to check my email, as usual.

As I scrolled through my inbox, one message caught my eye. It was from my great friend Jullie, who is visually impaired.

She was asking for help navigating a website to purchase a gift for her daughter’s birthday. I clicked on the link she sent me and checked the site.

At first, the color scheme and font sizes seemed okay to me. But as I looked closer, I noticed a few issues.

The low contrast between the text and background made things nearly impossible to read. And there was no option to increase font sizes.

I tried to imagine how challenging this site would be from my friend’s perspective. No wonder she asked for help!

At that moment, I realized firsthand just how often accessibility takes a backseat in web design.

While visual appeal is important, ensuring that a site is inclusive and usable for all should be the priority.

With some simple tweaks like increasing color contrast and adding adjustable fonts, that gift website could have provided a much better experience for my friend.

It made me think about how much room there still is to improve when it comes to accessible web design.

Nowadays, whenever I work on web design, I always think of the user experience.

While most things may be accessible to me and the client I’m working with, that is not necessarily the case for everybody.

Web design has to be inclusive, especially for people with visual impairments or color vision deficiencies.

Certain color combinations, font styles, and sizes of elements may not be as accessible to these people, and this would affect how they interact with your website.

This article is the first in a two-part series tackling how you can design websites for accessibility. We will be talking about color accessibility and how it is a foundation for inclusive designs.

By selecting certain pairings of colors and implementing design strategies with inclusivity in mind, we can create interfaces and experiences that are welcoming and usable for all individuals, regardless of their visual abilities.

Why are accessible colors so important in web content?

Colors are so important to web design as they can immediately influence a web user’s initial impression of your site. In fact, 93% of shoppers focus on their visual appearance alone when they make a purchase.

This is why web designers are particular when it comes to the use of colors and choosing color palettes.

For example, highlighting the text color of your call-to-action (CTA) button can make a huge difference in click rates.

However, people may experience these colors differently, as there are over 2.2 billion people with visual impairments worldwide.

Not designing for the access of these users means you are excluding these people when they could be your potential customers instead.

Effectively using color contrast to enhance readability and user experience.

Contrast is a powerful tool for enhancing legibility and usability in design.

Designers can improve readability by making sure that there’s a strong color contrast between the text and the background colors. This also makes content more accessible to users with low vision or color vision deficiencies.

You should have that in mind as you are selecting your brand’s colors or choosing a color palette for your specific design.

Leveraging contrast can also help draw attention to important elements within a design, improving overall usability even if the user does not have a visual impairment.

Is there enough contrast between texts? Understanding the WCAG.

The World Wide Web Consortium or W3C has created the web content accessibility guidelines (WCAG), which include three rating levels for color contrasts. This rates the contrast ratio of layered components into the following:

Minimal Accessibility: WCAG compliance level A

These color combinations have low contrast ratios and do not meet the color contrast requirement. Designs with this combination in the foreground and background will be difficult to read for people with visual impairments.

Strong Accessibility: WCAG compliance level AA

This is the minimum contrast ratio required by the W3C.

These colors are considered to have good color contrast and are accessible for normal text, large text, and graphics.

Enhanced Accessibility: WCAG compliance level AAA

These colors have a high contrast ratio, making them ideal for large text and graphics. It is best practice to aim for this contrast ratio if you can.

Don’t rely on color alone.

This might seem counterintuitive in an article about colors, I know, but bear with me.

Colors should work side by side with other visual elements, such as icons, underlines, labels, and patterns, instead of working alone.

You should not rely on colors alone to indicate links and warnings.

If a colorblind person were to access your website, certain colors or all colors may look the same to them, depending on their type of color blindness.

They may not notice that the text is of a different color.

Instead, you can add variations to the text, such as using underlines and bold fonts to show links and interactive parts of the text.

You can also use labels, textures, and icons to indicate warnings and specific parts of a design.

Here are some examples of colors working with other visual elements in web design:

How do you check for color accessibility?

Testing is an essential step in the design process to ensure that color choices meet accessibility standards and guidelines.

After all, you can’t just judge by eye if a certain color combination is visible enough if you don’t have color deficiencies yourself.

To test if your buttons, cards, navigational elements, and other user interface components have enough contrast, you can check the ratio through various color contrast checkers such as Colorable and Colorsafe.

Aim for a W3C contrast ratio of at least AA for the background-to-text contrast ratio.

It would be even better if you could reach an AAA ratio.

There are also color blindness simulators, so you can check what your site looks like for people with color blindness.

Other than this, it is best to get the design user-tested, especially with users with color vision impairments, to make sure it is accessible.

By using automated tools, conducting manual checks, and engaging in user testing, designers can identify any potential accessibility issues.

This proactive approach not only helps ensure compliance with accessibility standards but also fosters a more inclusive user experience.

Embracing the best practices for a better user experience.

As a creative design agency committed to delivering exceptional experiences for our clients and their audiences, prioritizing color accessibility in web design is non-negotiable.

By knowing the web accessibility guidelines and making a few simple tweaks, we can create designs that are not only visually appealing but also inclusive and accessible to all.

Together, let’s embrace inclusive design practices and work towards a future where everyone can enjoy equal access to digital experiences, including my friend Jullie.

This is the first part of a two-part series.

Check out part two here:

➡️Designing for web accessibility: applying the w3c guidelines with examples