Colors

Design process

To help you with designing your products to be more accessible, you might want to start with a grayscale version of the design. That way you can make sure you convey all the information without color before you add the colors.

When you are picking your colors, remember to test for contrast and color independence while you're choosing them. It will be harder to change a color after you've finished the design and maybe even fallen in love with a color that simply doesn't have enough contrast.

UX Designer Liz Brown said it well in her Udemy course, try to do the maximum for accessibility and usability. Don't aim for the minimum requirements. If you're interested in UI/UX Design from an accessibility point of view, I really recommend taking Liz's course.

Ensure that there is adequate contrast between the color of every single information-bearing element and its background. To help you with this, you can categorize the UI elements into two groups: information-bearing elements, and decorative and disabled elements. There is no contrast requirement for decorative and disabled elements. But there is really no reason why you shouldn't make them compliant anyways, but if you have to make a compromise on color contrast somewhere, make it with decorative and disabled elements rather than those elements that bear information.

Use of color

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

WCAG 1.4.1

Note, that the criterion doesn't tell you to stop using color as a visual cue. For people who can see colors, color-coding is often very useful. So you should use color but as a redundant visual cue.

Color blindness

If you aren't color blind, I really recommend testing a color blindness simulator. The color blindness simulator on Colblindor website allows you to even test with your own image. There is also NoCoffee visual simulation extension for Chrome, which allows you to change between, for example, different color deficiencies.
While these tools aren't of course perfect, you can get a little more understanding of how the world might look for other people.

The most problematic color combination is red and green. Other combinations you might need to avoid are:

• green and brown
• green and blue
• blue and gray
• blue and purple
• green and black

If you use these colors, make sure they have a high enough ratio of contrast. You could, for example, darken one and lighten the other.

I love the combination of blue and gray and it took me a long time to understand that those two colors together can be problematic. Using the color blindness simulators has really improved my understanding of colors and how different people might perceive them.

Contrast

Criteria 1.4.3 states that your text and images of text should have a contrast ratio of at least 4.5:1, and for large text, the ratio is 3:1. There are some exceptions to this rule, so make sure to read the criteria.

If you're aiming for level AAA, you'll need to meet the stricter contrast rule, which is detailed in criteria 1.4.6. The required default contrast ratio is 7:1 and for large text, the ratio is 4.5:1.

Criteria 1.4.11 covers the requirements for non-text contrast. I've noticed that people have some difficulties in understanding this criterion, myself included. The Understanding Success Criterion 1.4.11: Non-text Contrast page has some very good examples for this criteria. Though I must confess, that I'm still sometimes a little confused on what elements require the contrast and against which elements. But I personally feel like it's best if there is enough contrast between everything. So I aim to have enough contrast between even those elements that wouldn't necessarily require it.

Graphs and other data visualization

When you're designing charts, remember that you cannot solely rely on color to convey the information in these either.
When you're using a bar chart, you could add patterns to some of the bars. And when you use line charts, you can use dashed or dotted lines. If neither of these methods is feasible, you can use other non-color indicators like shapes, labels, and icons to make data visualizations color-independent. Charts must be understandable without color. And when you use patterns or different kinds of lines, remember to use them also in the legend.

There are a lot of libraries of pre-coded data visualizations, with these you can make your charts more interactive. It is an excellent practice to allow users to isolate the information they are interested in. When choosing a pre-coded library, it's a good idea to check how accessible the resulting chart is and also see how much you can customize the design, because you might need to be able to add patterns or at least labels to make the chart more accessible.

With charts it's is usually a good practice to add the chart data below the chart. You don't have to display the data by default, you can implement a button to show the data if the user wants to see it.

I haven't created any accessible charts myself, but I've heard that Highcharts is at least one of the most accessible ones out there so that might be a good place to start if you need to have a chart on your website.