Color always matters in web design — but it plays a critical role in the web experiences of those with disabilities related to vision. Choosing the wrong colors can be a costly mistake.
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. Most likely, they'd want to leave your site — perhaps, finding no interest in ever returning. That's why color in web accessibility matters.
Let's take a look at how various vision impairments impact the UX of your website for specific visitors.
Web Color Accessibility for Low Vision
Cataracts, the most common type of vision loss for people over 40, are a form of low vision that affects contrast perception. 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.
However, not everyone who needs high-contrast mode realizes it exists or knows how to turn it on. So, it’s wise to just stick to high-contrast colors on your website for ease of access.
Web Color Accessibility for Dyslexia
Dyslexia is a learning difficulty which affects reading and writing. The British Dyslexia Association estimates that 10% of people are dyslexic today. Dyslexia can influence how people see color, which may have impact readability.
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. A safer choice is dark gray on an off-white background.
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.
Take a look — users can change the background from this...
Color blindness affects 4.5% of the world’s population and 16-times more men are color blind compared to women — 8% versus 0.5%.
Red-green color blindness accounts for the vast majority of color vision deficiency. This includes people with protanopia (red-blindness), protanomaly (red-weakness), deuteranopia (green-blindness), and deuteranomaly (green-weakness).
A big problem for color blind people is information on websites that is conveyed by color only. 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.
Now, returning to our color contrast discussion — how do you know if your site's colors are accessible or not? Fortunately, there are guidelines and tools to help you find out.
Web Accessibility Color Contrast
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 excepted from the web accessibility color contrast requirement.)
Normal Text: There should be a ratio of 4.5:1 between text and background. For large text, there should be a ratio of 3:1 between text and background.
Large Text. This is text that's 18pt (approximately 24px) or greater. If the text is bold, it can be 14pt (approximately 18.5px) or bigger.
Enhanced Contrast. This is a contrast ratio of 7:1 for normal text, and 4.5:1 for large text. Black on white has the highest contrast ratio of all, at 21:1.
When you start checking your web color accessibility, you may see the terms WCAG AA and WCAG AAA. WCAG AA corresponds to minimum contrast and WCAG AAA to enhanced contrast.
One concept to get familiar with when picking and testing colors is hex codes. Hex codes are six character codes beginning with a hash which represent colors. They range from #000000 (black) to #FFFFFF (white).
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. Otherwise, you can use a color picker tool to find the hex codes of the colors you’re using.
ColorZilla is a browser extension for Firefox and Chrome browsers which lets you pick colors from a web page. Once you have installed ColorZilla in your browser, click on ColorZilla’s eyedropper icon and select Pick Color From Page.
When the color picker is active, your cursor will change to a +. Hover over the part of the page you want to check, and click to copy the hex code to your clipboard.
You can then paste the code into a document. Your colors will also be saved to ColorZilla’s picked color history. Remember to find and save the text colors and background colors, as you’ll need them both to test if they’re accessible.
For failing color combinations, use the lightness slider under a foreground or background color to lighten or darken it. The contrast ratio will update instantly to let you know if your colors pass. This is useful if you have brand colors that are just shy of the contrast ratio needed.
Darkening the pink color against the background produces a contrast ratio of 4.52:1 which meets the minimum contrast requirement.
The second contrast checker, the link contrast checker, is useful for checking links that are not underlined. In this case the contrast ratio should be at least 3:1 between the link text and the body text.
To use ACart’s Contrast Checker, enter your hex codes in the foreground and background color boxes, highlighted in the screenshot below. Don’t include the # symbol, just the six numbers or letters of the code.
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.
Web Accessibility Color Palettes
Finding an accessible color scheme doesn’t have to be a challenge. Here are tools to help you pick out the perfect color palette online.
Color Safe generates beautiful and accessible color schemes. To begin, choose Get started.
You can also specify a font and font size in pixels, and a font-weight. Font-weight ranges from 100, which is the lightest text, to 900, which is the boldest. Regular text is font weight 400. For the WCAG standard option, AA corresponds to minimum contrast and AAA to enhanced contrast.
You can see all accessible colors that ColorSafe found to match your background. Alternatively, filter the list by selecting a color swatch. To see all shades of a particular color, select one of the color swatches from the row.
Here are suitable shades of purple for a peach 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. Remember to note the hex codes of any colors you prefer.
Accessible Color Generator
Accessible Color Generator is a simple tool for finding suitably contrasting colors. The accessibility level of AA or AAA sets the degree of color contrast.
Choose your base color by entering a hex value, or click on the color for a color picker. The generator outputs six color shades which have sufficient contrast for text which is white, gray or a variant on your original color.
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. You can look for an unlimited number of accessible colors.
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!
Originally published Mar 27, 2020 2:56:31 PM, updated April 16 2020