How to Design for Color Blindness 2022


Designing content that's usable for people with color blindness is a great way to make it more accessible for the general public. People with color blindness have a hard time differentiating between certain colors, like red, green, or blue. Some color blind people can't see any color at all, making it hard to navigate sites and apps that rely heavily on colors.Trustworthy SourceAmerican Optometric AssociationProfessional medical organization dedicated to supporting optometrists and improving public eye and vision healthGo to source By using a few simple tips and guidelines, you can make your information easy-to-use for everyone who clicks on it, no matter which colors they can (or can't) see.


Method 1 of 2:Text and Background

1Choose contrasting colors for text and backgrounds. Colors that are too similar to each other can be hard to distinguish for those with color blindness. When choosing text and background colors, go for ones that stand out against each other.

Black on white or white on black is an obvious choice, but you can also use blue and yellow, yellow and violet, or dark blue and black.

2Pick color combinations like blue/yellow and orange/purple. People with color blindness are able to see some colors better than others. When you're picking out color combos, try to stick with:

Blue and yellow

Brown and blue

Orange and purple

Green and purple

Yellow and pink

Red and blue

3Stay away from green/red, green/brown, and blue/purple. Most color blind people have trouble with specific color combinations. Stay away from those colors to make your design readable.

You should also avoid green and blue, as those shades can be very similar to each other.

4Use bright, bold colors. Pastels and pale colors tend to fade into each other, especially for people with color blindness. Stick to neon or primary colors to help them differentiate between all the colors on the page.

5Keep your color palette minimal. The fewer colors you use, the more you'll avoid confusion. There's no hard and fast rule for this, but the fewer the better!

For example, you could pick 3 colors and stick with them as a theme for your webpage.

Method 2 of 2:Images and Links

1Underline clickable links. Normally, links are highlighted with color, but people with color blindness may have trouble seeing them. If there's a clickable link, underline it as well as highlighting it on the page.

If you don't want to underline it, make the text bold instead.

2Include symbols and keys. People with color blindness may have trouble understanding graphs and charts based on color alone. Make sure you include symbols and keys on the side of the image as a reference.

For example, you could put a color code on the side of the chart to explain what each color means.

Or, you could use symbols on a map to label different areas, like campgrounds and restrooms.

3Add texture to maps, charts, and graphs. Solid colors can be hard to distinguish. Try using lines, dots, and hash marks to differentiate sections on graphs, maps, and charts.

This is a great idea for bar charts and pie charts.

You can use texture as well as color in your images, so you don't have to change them completely.

4Outline sections on maps. If you're using colors to differentiate states or borders, use a black outline as well. This will help people with color blindness, since they'll be able to see the black lines.

This is a great way to make your images stand out more as well.

5Label information without using colors. Pie charts, graphs, and transportation systems often use colors to differentiate sections or methods. Label the information with words as well as colors to make it accessible for those with color blindness.

For example, if you're using a pie chart, you could label each section as well as using different colors to separate them.

Someone with full color blindness (who can only see in black and white) won't be able to use a color key.