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.

Download Now: Free Website Accessibility Checklist

Conditions that impact color perception are more common than you might think. So, in this post, we’ll go over how people with disabilities such as low vision, dyslexia, and color blindness experience the web. We'll explain how you can improve your website's accessibility and user experience (UX) by making smarter color and design choices.

How Vision Impairments Affect Web User Experience

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. 

Windows 10 support site as seen in Windows High Contrast Mode

Source

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...

Dyslexia Association of Ireland website with default white background

Source

... to this:

Dyslexia Association of Ireland website with pale yellow background

Source

Next let’s review how color blind people see the web.

Web Color Accessibility for Color Blindness

Can you see the number in the image below? Well, color blind people cannot.

Ishihara red-green color blindness test showing the number 74

Source

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.

class test results pie chart with grades A-E and percentages attaining that grade, as seen by a person with normal vision

Source

Now look at the same chart as seen by someone with protanopia:

class test results pie chart with grades A-E and percentages attaining that grade, as seen by a person with protanopia

Source

The chart is really challenging to interpret because some of the colors look too similar. It’s hard to tell which segment goes with which values.

A better approach is to link the colored segments to the grade and percentage, or else superimpose the grade and percentage on each segment.

Another solution for labeling colored areas is to use a pattern. Trello devised a color blind friendly mode for labeling cards which uses textures as well as color.

Trello labels color blind friendly mode

Source

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.)

Text Requirements

  • 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.

Color Requirements

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.

ColorZilla tool showing pick color from page option

Source

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.

ColorZilla color copied to clipboard #33475B

Source

Web Accessibility Color Checkers

Now it’s time to test your website’s color contrast. These easy-to-use tools will check the accessibility of your colors in minutes.

WebAIM Color Contrast Checkers

WebAIM offer two contrast checkers.

The standard contrast checker tests the contrast ratio between foreground and background colors. Enter your colors’ hex codes in the foreground color and background color boxes.

In this example below, the contrast ratio between the pink and white backgrounds is 2.97:1. This fails the contrast test for WCAG AA and WCAG AAA.

web accessibility contrast checker

Source

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.

WebAIM contrast checker

Source

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.

Contrast Checker

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.

Contrast Checker showing foreground and background color input fields

Source

If when you add colors you see all green dots, your colors have reached the enhanced contrast level — the colors will be fully accessible to all users.

Contrast Checker fully compliant colors, with contrast ratio 8.69:1

Source

If you have green dots for AA but red dots for AAA, your colors still meet the minimum contrast of level AA.

For convenience, you can save your color samples to the browser history. You can also share them or save them to a PDF.

Contrast Checker History

Source

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

Color Safe generates beautiful and accessible color schemes. To begin, choose Get started.

Color Safe web accessibility palettes

Source

To find suitable colors, first pick the background color you want to use. If you know the hex code you can enter it in the background color box.

Color Safe options for a peach background color

Source

If not, click on the background color box to open up a color picker. The slider bar on the right selects the main color from the spectrum.

Once you’ve chosen a general color, move the dot in the panel on the left to adjust the color’s brightness and intensity. The hex code of the color you chose will appear in the box.

Color Safe options for a peach background color

Source

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.

shades of purple which have a minimum color contrast ratio against a peach background

Source

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.

Accessible Color Generator high contrast color suggestion

Source

Make Your Website Colors More Accessible

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!

New Call-to-action

 website accessibility

Originally published Mar 27, 2020 2:56:31 PM, updated April 16 2020

Topics:

Web Accessibility