Leyla Sawyer
Color always matters in web design — but it plays a critical role in the user experience of those with disabilities related to vision. Imagine your visitors being unable to read your content, pick out important information from a diagram, or click on your call-to-action (CTA) buttons.
So, in this post, we’ll go over how people with disabilities such as low vision, dyslexia, and color blindness experience the web. Then we'll explain how you can improve your website's accessibility and UX by making smarter color and design choices. Let's take a look at how various vision impairments impact the UX of your website for specific visitors. Someone with cataracts will struggle to read text on a low contrast background, such as light gray on white.
What people with low vision need are high contrast color schemes. High-contrast modes are actually built into Windows and Mac operating systems. So, it’s wise to just stick to high-contrast colors on your website for ease of access.
The British Dyslexia Association estimates that 10% of people are dyslexic today. While a high-contrast color scheme, such as pure black on white, will benefit someone with vision loss, this may be too great of a contrast level for a dyslexic person — they might find the words on the page blur together. Some websites offer alternative color schemes, which can be helpful for dyslexic users.
For example, the Dyslexia Association of Ireland has a control which allows users to change the background color. Next let’s review how color blind people see the web. Color blindness affects 4.5% of the world's population, and men make up the largest portion of that percentage since 16 times more men are color blind compared to women.
This includes people with protanopia (red-blindness), protanomaly (red-weakness), deuteranopia (green-blindness), and deuteranomaly (green-weakness). This can slow down or confuse color blind visitors, as they have to stop and figure out the meaning. For example, for someone with normal vision looking at the pie chart below, it’s simple to tell which grade goes with which percentage.
To meet a minimum contrast level, as specified by the Web Content Accessibility Guidelines (WCAG), colors need to meet the correct contrast ratio between text and background on a web page. Logos are not held to the web accessibility color contrast requirement. These represent the different levels of conformance that are defined by the WCAG, with A being the lowest and AAA the highest. The WCAG requires you provide enough contrast between text and background color so that anyone, including people with moderately low vision, can read it. That’s why the WCAG includes a guideline that forbids color from being the only visual means of conveying information. To meet this success criterion, you must provide another visual means besides color to convey the information.
For example, a form that labels its required input fields with red text fails to meet the success criteria for use of color. Another requirement of the WCAG is to distinguish the foreground from the background to make it easy for users to see content.
That's because the user's default background color is unknown and cannot be evaluated for sufficient contrast.
The contrast ratio will update instantly to let you know if your colors pass.
To use ACart’s Contrast Checker, enter your hex codes in the foreground and background color boxes, highlighted in the screenshot below. If your color combinations aren’t accessible and you don’t have the means to change them, discuss the situation with your web designer or developer.
You might want to use one of the following online tools to find an accessible color scheme. We'll walk through the process of testing the color accessibility of your website below. To make picking and testing colors easier, familiarize yourself with the concept of hex codes. The best way to find out the hex codes of your website colors is to consult your style guide if you have one, or to ask your designer or developer for a list.
Hover over the part of the page you want to check, and click to copy the hex code to your clipboard. Now it’s time to audit your website’s existing color scheme.
Let's say I'm auditing the color scheme of the digital magazine NANA. Since this meets the standard for Level AAA, I'd move onto the next color: a light pink called "Bittersweet" (#FE7773).
The simplest approach is to increase the opacity of the text color until it meets the contrast ratio.
For example, let's say I want to adjust the Bittersweet pink color used on NANA's site.
You can repeat this process for every color that failed to meet the required contrast ratio. Creating an accessible color scheme doesn’t have to be a challenge.
There are dozens of online tools that can automatically generate an accessible color palette for you. Let's take a closer look at what an accessible color palette is and what tools can help you create one below.
An accessible color palette has to meet the contrast ratios designated in the WCAG guidelines (which we discussed above). So how you do take these numerical standards and turn them into a beautiful color palette? Since they will provide the highest amount of contrast, you should select one color to use predominantly and the other to use sparingly, as an accent. Without tools, creating an accessible color palette would require a lot of trial and error.
To simplify the process, you can use a tool that will generate an accessible and beautiful color palette for you. You can see all accessible colors that ColorSafe found to match your background. Clicking on a color shows you its hex code and the contrast ratio against the background.
If you don’t see many options for the background color you want, use the start over button and try increasing the font size or bolding the text. The accessibility level of AA or AAA sets the degree of color contrast. A useful feature is the option to copy or bookmark the sharing URL for the current colors, so you don’t have to remember them.
The color palettes below were created using the color scheme generator Coolors and — at the minimum — meet the WCAG level AA guidelines for large text. By implementing high-contrast colors and labels on your website with the help of the tactics, guidelines, and tools we just reviewed, your website and content will be consumable for users with vision impairments such as low vision, dyslexia, and color blindness.
Don’t be surprised if your general audience finds your website easier to use, too! Editor's note: This post was originally published in March 2020 and has been updated for comprehensiveness.
