Accessible Color Palette: How To Use Color On Your Site | Compliant

Color choice is one of the most important elements to consider when designing a web page. An eye-catching color scheme can draw people in right away.

Color can be used to attract attention, create desire, and express meaning for a brand. But, choosing the right color palette is not always as simple as it may seem.  

There actually exist comprehensive design guidelines for creating accessible color palettes for web content. This ensures everyone has equal access to information on the web, such as those who suffer from color blindness.

Why Is Color Important?

Color can be both an emotional and practical tool for web design. You could say that color conveys a personality of its own when colors are blended together in the right way a symphony is created. But, inattention to detail when it comes to color schemes could create visual chaos instead.

There is quite a bit of psychology that goes into colors and color palettes. When people land on a web page, they’re immediately making an aesthetic judgment, or what many call the first impression.

According to a research study published by Google, this impression takes less than 50 milliseconds. That means the average user takes 0.05 seconds to decide whether or not they want to stay on your page — or leave it.

Good marketers and web designers understand color psychology. For example, the color red can portray joy and passion, but also aggressiveness. Blue and greens are more relaxing and can portray trust and generosity.

Understanding how to effectively use these colors in concert is the role of a web designer. They must know how color contrast works. They must understand which text color and other foreground colors fit well with which background color or how a white background might contrast with a brand color, a logo, or icons.

But contrast ratio, saturation, and color palettes are just the tip of the design iceberg. Aesthetic appeal is great, but mere aesthetics can sometimes prove unreliable when it comes to creating an accessible website.

What Are Guidelines for Choosing a Color Palette?

According to the National Eye Institute, color blindness affects between 5 – 10 percent of the U.S. population, with men being disproportionately affected — about 1 in 12.

In simple terms, color blindness is the inability to distinguish between certain colors (e.g., how bright they are, different shades of color, etc.).

Here are the most common forms of color blindness:

• Protanopia: Red colorblindness, an inability to distinguish red shades or between red and green.
• Deuteranopia: Green colorblindness, an inability to distinguish green shades or between green and red.
• Tritanopia: Blue-yellow colorblindness marked by an inability to distinguish between blues and green, purple and red, and yellow and pink.

These conditions are one reason why web content accessibility guidelines were created, to ensure equal access to content for those with visual impairments per the Americans with Disabilities Act (ADA).

These guidelines were created by the World Wide Web Consortium (W3C) and are known as the Web Content Accessibility Guidelines (WCAG). The latest version is WCAG 2.1. They set success criteria related to all forms of web content, including color usage, contrast requirements, and more.

These are legal standards and they do require compliance.

Accessible Design

The guidelines above set the standard for accessible design, in this case, the use of color for meeting the needs of those with visual impairments. The accessible design focuses on color, contrast, and readability. Per the U.S. Web Design System, the best combination is the max color contrasts of white/light text on black/dark backgrounds.

There are three levels of accessibility compliance, referred to as success criteria:

• Level A – This is the beginners level and outlines basic requirements and minimum standards for accessibility.

• Level AA – The middle level for compliance provides a nice balance of design freedom and usability. It addresses the most common barriers to accessibility.  

• Level AAA – This is the most stringent and most desired level of compliance, though it can be difficult to achieve. It is the standard for government websites.

Legibility

Legibility simple means the content must be clear enough to read; this includes the use of color. The WCAG refers to this as “distinguishable.” For example, to ensure a website is accessible, WCAG (Use of Color – Level A) requires using a 3:1 minimum contrast ratio for large text (19px or more in bold text and 24px or more for normal text).

But, if the text is less than 18px (and not bolded), the sufficient contrast for normal text, per Level AA, has a baseline contrast ratio standard of 4.5:1.

There are tools out there — e.g., a color contrast checker — to ensure you meet these requirements.

<h3>Avoiding Color Blindness</h3>

In terms of design, avoiding color blindness simply means avoiding green on red or red on green color and contrasts. This, of course, is to ensure those with color blindness have equal access to content.

How Can I Create a Color Story?

The web design should start with a color story. This is simply a palette of colors that your brand chooses as a jumping-off point for web design. Remember, colors are both a practical and emotional tool. Use them wisely, and don’t forget about the guidelines.

A color wheel might be a good option to explore. There are many options out there to help you find your favorite color themes. For example, an accessible color palette builder like Color Safe or Color Picker could help you find the inspiration you’re looking for. They allow you to play around with different hex colors and hues or shades.

Design platforms like Sketch can also help you get a flair for the right color palettes. It is offered as a plugin and works with most operating systems and browsers (e.g., Mac, Linux, Chrome, etc.).  

What’s nice is the fact that many of these will allow you to run simulations to preview potential designs.

Choose Colors for Various Web Components

Again, the design encompasses more than just words. An accessible color palette takes into account all the various web components, from links to buttons, from headings to the background. You want to choose colors people can see and color combinations they can distinguish, so there is no confusion when navigating the elements of the website.

You want to avoid user frustration. Suppose careful consideration isn’t taken to ensure all the web components fit seamlessly together on a nice color palette. In that case, you may end up with that customer who decided 0.05 seconds was enough time to spend on your website.

Keep Color Contrast in Mind

Contrast is equally as important. When you have low contrast (e.g., text color and background color are similar), the text is much harder to read. It could drive users away from your site.

This requires choosing accessible color pairings. Again, per the WCAG, the sweet spot for normal texts is at least a 4.5:1 contrast ratio between the foreground and the background. The color contrast tool mentioned above can help.

Choose a Dominant Color

As much as you may want to have all the colors of the rainbow, it doesn’t work too well for design. Typically, most web design professionals will limit their palette to three colors. This creates color harmony rather than color chaos. Standard practice is to use a 60/30/10 color rule. Choose one dominant color (60%), a secondary color (30%), and an accent color (10%).

Don’t Rely on Color Alone

While the design goal certainly involves an aesthetic experience, the real end goal of accessibility is readability. Color is important, but it isn’t everything. It is meant to enhance the experience, not derail it.  

Simply put, you cannot sacrifice functionality for design; it must be both practical and emotional. The best user experience comes when functionality meets design. It looks good, and it works.

Conclusion

Color choice can make or break a website. The research is detailed; most people decide whether or not to stay on a website within a fraction of a second. An appealing color palette could make a difference.

However, as important as color schemes are, not everyone can distinguish colors in the same way. Color blindness affects millions. That is why accessibility in design is so important; it strives to give equal access to web content. The WCAG sets the standard for design, including the use of color.

An aesthetic color palette is a nice touch for any website. But the real goal is readability. Make sure you do not sacrifice function for form.