Color accessibility: how to meet website accessibility standards for color

Color is a powerful tool for forging an immediate connection with visitors to a website. It can contribute to a strong first impression through a pleasing aesthetic. It can direct the visitor’s attention to the most important elements on the page. Most of all, it can set the tone, marking the difference between bright and friendly or moody and sleek. But what is an invaluable asset can easily become an obstacle when designers fail to account for the different ways in which users see color. This is why it is so important to design a website with color accessibility in mind.
Accessibility in website color essentially means making sure colors are performing to their true potential: enhancing the web browsing experience, not hindering it. There is a myth that designing for accessibility is all about reigning in creativity. In fact, accessible design often leads to a website that is more fluid and intuitive for all visitors. To this end, we’re going to delve into all the considerations for choosing website colors that meet accessibility standards.
Website accessibility is the process of designing a website (both the front-end visuals and back-end code) that works for users with diverse abilities. There are many categories of disabilities—such as vision, hearing, and motion impairments—and a designer will choose which situations to focus on and create solutions for.
Some common accessibility features on a website might include: facilitating easy keyboard navigation, providing alternative text that describes images, and ensuring that the site will not break due to upsized text. In this article, we’ll be focusing on color accessibility, but it is worthwhile to review how accessibility works as a whole.
Website accessibility is also a legal matter in many countries, with accessibility non-compliance amounting to discrimination. In America, for example, this falls under the Americans with Disabilities Act, and a 2019 Supreme Court case reaffirmed that websites fall under the ADA, allowing users to sue businesses for failing to make their websites accessible in certain situations.
Internet standards are outlined by the World Wide Web Consortium (W3C), a global body made up of hundreds of organizations. For accessibility, the W3C has issued the Web Content Accessibility Guidelines (WCAG) to give developers and designers specific metrics to aim for. We’ll be referring to the WCAG throughout this article as it contains internationally recognized standards.
Note: At the time of this writing, the most recent edition is the WCAG 2.1, published in 2018, but the updated WCAG 2.2 is planned for publication in summer 2022.
The WCAG guides that relate to color largely fall under visual impairments. These are focused on contrast, ensuring that text is clearly distinguishable from the background. The guidelines also pay particular attention to how color is used as a visual cue, stipulating that there must be other elements to make these cues obvious. Color also must be specified in formatting code such as CSS (even if it is default white or black) in order for accessibility to be accurately measured.
As of 2021, the World Health Organization estimates that at least 1 billion people across the globe live with some form of disability, a number that is steadily rising. But these are recorded, measurable instances. Disabilities exist on a spectrum of severity, and some may go completely unnoticed by the person experiencing them for the most part. There is also a stigma that can prevent someone from seeking a diagnosis or even acknowledging that they are experiencing a disability.
Impairments can also be temporary and/or situational. For example, any person looking at a computer screen outdoors in harsh sunlight will be visually impaired by the sun’s glare. The ability to manually adjust the brightness and contrast of the screen in a situation like that is a form of assistive technology the manufacturer has provided. This is why accessibility in design is a much broader issue than many people realize. Creating accessible websites is not just ethical, it is good common sense.
With that in mind, let’s go over some common impairments that relate to color perception. Of course, disabilities can be complex and varied, but for the purposes of this article, we’ll be using general definitions just for the sake of context. The W3C provides excellent resources if you would like to learn about any of these impairments in detail.
As an essential design element, color is a powerful tool for communicating visually. It is so useful that it is often implemented intuitively, without our consciously being aware of how it is working. In order to reassess colors used for accessibility, let’s zoom out and review the common purposes the color serves on a website.
In general, color exists to characterize, to direct attention and to provide feedback. More specifically, color is used for…
Without further ado, let’s get into how you can apply accessibility principles to color schemes on a website design. Before we get started, make sure you brush up on the basics of color theory, particularly the color wheel.
When you think about it, contrast is really what colors are all about. If everything was the same color, there’d be nothing to see. The most basic job of color in web design is to make something stand out on the screen: the question is to what degree and in relation to which other elements.
Contrast is how designers visually represent differences between design objects. It can be measured on a scale from high to low. An analogous color scheme would be an example of low contrast since the colors are mostly the same. A complementary color scheme, on the other hand, would be high contrast, as these are opposites on the color wheel.
One way to think about color contrast is in terms of value. Value (in art) refers to how light or dark a color is. When a colorblind or low vision person looks at the screen, value is what they will see instead of specific colors. Generating high contrast amounts to juxtaposing dark against light.
The WCAG provides recommended ratios for text-to-background contrast. These can vary based on the size of the text (larger text requires less contrast to be visible) and how high of a standard you want to adhere to. The WCAG ranks success on different levels, with AA representing minimum accessibility compliance and AAA representing the highest standard.
Level AA contrast standard
Level AAA contrast standard
The easiest way to tell whether a color scheme fits in this ratio is to use an online contrast checker, of which there are several. Some popular ones are Stark (a plugin for Sketch), Adobe Color, and Contrast. Beyond these, a google search of “color contrast checker” should provide you with plenty of options to try out.
Typically, these will require you to find the hex code of your background/foreground colors (a six digit code preceded by a pound sign that represents specific colors) and enter that into the software. It is important to note that the ‘1’ in the aforementioned ratios represents your background color, and some contrast checkers will omit this number.
Website colors do not exist in a vacuum but must work in unison with one another. That is why it is important to plan out an accessible color scheme ahead of time so to make sure that the colors are in harmony while still fulfilling the WCAG standards for contrast.
In addition to the pre-established brand colors that are a part of a visual identity, web designers often need to account for a number of different color scenarios: including an accent color (often used for buttons), feedback colors (like a color signaling that a user is online), and the various stages of a hyperlink (mouse hover, pre-click and post-click). They will also need to decide on specific neutral tones (usually on the spectrum of white, gray and black) that will commonly be used for background, body copy and headers.
From here, it is simply a matter of testing these colors (using the contrast checkers mentioned in the previous section) to make sure they fall within acceptable contrast ratios. Fortunately, you do not have to test all of these for contrast against each other but only those that are in a background/foreground relationship.
In addition to the overall background of the website, keep in mind other colors that will serve as a background for text, such as a form field or information box. And of course, the accent color should have the highest contrast of all the colors as it is meant to stand out the most and be used sparingly.
A website can also fall below accessibility standards if color is the only indicator for important content. Web designers should supplement color indicators with other elements, such as icons, text, or animation.
For example, if a form field turns red when the wrong password is entered, this will be easy for someone with a visual impairment to miss. To mitigate this, UX designers commonly add at least one of the following: a tool tip that reads “Password incorrect,” an exclamation icon, and/or a shaking animation on the entire form field.
Similarly, the project management app Trello allows users to color code items with labels. But they also offer a colorblind-friendly mode which adds textures to the labels, making the difference between them more apparent.
Designing colors for accessibility is not just about planning for a color-absent scenario. In some cases, color can be a handy tool for assisting viewers with reading the page.
In cases where a dyslexic person might have trouble getting through a paragraph of text, a special mode could use color to highlight one word or phrase at a time. This is a common strategy used by apps for learning foreign languages through reading, such as Beelinguapp. For bonus points, designers can include a border or a pointing finger icon to supplement the highlight color.
Accessibility is about more than addressing unique and rare edge cases. In fact, so many users are going to wind up with a form of visual impairment (whether temporary or permanent) at some point in their day-to-day lives that businesses cannot afford to ignore accessibility.
The good news is that there are clear guidelines and tools for assisting users with impairments. Of course, good color selection depends on more than ratios and math—it is an art form. That’s why when you need a website color scheme that is both accessible and visually stunning, it is important to make sure you’re working with a savvy designer.
Save my name, email, and website in this browser for the next time I comment.

Δ
Our newsletter is for everyone who loves design! Let us know if you’re a freelance designer (or not) so we can share the most relevant content for you.
By completing this form, you agree to our Terms of Service and Privacy Policy. This site is protected by reCAPTCHA and the Google Privacy Policy and Google Terms of Service apply.
Designers, check out these contests so you can start building your career.
Our newsletter is for everyone who loves design! Let us know if you’re a freelance designer (or not) so we can share the most relevant content for you.
By completing this form, you agree to our Terms of Service and Privacy Policy. This site is protected by reCAPTCHA and the Google Privacy Policy and Google Terms of Service apply.
Our newsletter is for everyone who loves design! Let us know if you’re a freelance designer (or not) so we can share the most relevant content for you.
By completing this form, you agree to our Terms of Service and Privacy Policy. This site is protected by reCAPTCHA and the Google Privacy Policy and Google Terms of Service apply.

source