How to Design for Color Blindness

How to Design for Color Blindness

People with color blindness have a hard time differentiating between certain colors (and some can’t see color at all).[1] X Trustworthy Source American Optometric Association Professional medical organization dedicated to supporting optometrists and improving public eye and vision health Go to source Designing a website that’s usable for people with color blindness is a great way to make it more accessible for the general public. By using a few simple tips and guidelines, you can make your website easy-to-use for everyone who clicks on it.

Method 1 of 2:
Text and Background

1
Choose 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. [2] X Research source 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.
2
Pick color combinations that are easy to read. People with color blindness are able to see some colors better than others. When you’re picking out color combos, try to stick with: [3] X Research source Blue and yellow Brown and blue Orange and purple Green and purple Yellow and pink Red and blue
3
Stay away from difficult-to-read color combos. While they might be okay for you, some color combinations are tough for people with color blindness. As you make your design, stay away from: [4] X Research source Green and red Green and brown Blue and purple Green and blue
4
Use 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. [5] X Research source
5
Keep 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! [6] X Research source For example, you could pick 3 colors and stick with them as a theme for your webpage.
Advertisement

Method 2 of 2:
Images and Links

1
Underline clickable links. Normally, links are highlighted with color, but people with color blindness may have trouble seeing it. If there’s a clickable link, underline it as well as highlighting it on the page. [7] X Research source If you don’t want to underline it, make the text bold instead.
2
Include 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. [8] X Research source This is pretty standard for most graphs and charts nowadays anyway.
3
Add 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. [9] X Research source You can use texture as well as color in your images, so you don’t have to change them completely.
4
Outline 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. [10] X Research source This is a great way to make your images stand out more as well.
5
Provide info 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. [11] X Research source Someone with full color blindness (who can only see in black and white) won’t be able to use a color key.
Advertisement

Method 1 of 2:
Text and Background

1
Choose 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. [2] X Research source 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.
2
Pick color combinations that are easy to read. People with color blindness are able to see some colors better than others. When you’re picking out color combos, try to stick with: [3] X Research source Blue and yellow Brown and blue Orange and purple Green and purple Yellow and pink Red and blue
3
Stay away from difficult-to-read color combos. While they might be okay for you, some color combinations are tough for people with color blindness. As you make your design, stay away from: [4] X Research source Green and red Green and brown Blue and purple Green and blue
4
Use 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. [5] X Research source
5
Keep 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! [6] X Research source For example, you could pick 3 colors and stick with them as a theme for your webpage.
Advertisement

Method 2 of 2:
Images and Links

1
Underline clickable links. Normally, links are highlighted with color, but people with color blindness may have trouble seeing it. If there’s a clickable link, underline it as well as highlighting it on the page. [7] X Research source If you don’t want to underline it, make the text bold instead.
2
Include 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. [8] X Research source This is pretty standard for most graphs and charts nowadays anyway.
3
Add 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. [9] X Research source You can use texture as well as color in your images, so you don’t have to change them completely.
4
Outline 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. [10] X Research source This is a great way to make your images stand out more as well.
5
Provide info 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. [11] X Research source Someone with full color blindness (who can only see in black and white) won’t be able to use a color key.
Advertisement