According to Colour Blind Awareness 4.5% of the population are color-blind1. If your audience is mostly male this increases to 8%. Designing for color-blind people can be easily forgotten because most designers aren’t color-blind. In this article I provide 13 tips to improve the experience for color-blind people – something which can often benefit people with normal vision too.
What Is Color Blindness? Link
Further Reading on SmashingMag: Link
- Accessibility APIs: A Key To Web Accessibility3
- Notes On Client-Rendered Accessibility4
- Making Accessibility Simpler, With Ally.js5
- The Underestimated Power Of Color In Mobile App Design6
These problems can also be exacerbated by the environments in which people use websites. This could include low-quality monitors, bad lighting, screen glare, tiny mobile screens and sitting far away from a huge television screen.
Relying solely on color for readability and affordance makes a website difficult to use, which ultimately affects readership and sales.
While the following tips aren’t exhaustive, they do cover the majority of problems color-blind people experience when using websites.
1. Text Readability Link
To ensure text is readable it should pass accessibility guidelines based on the combination of text color, background color and text size as follows:
Here are a few examples of color and size combinations that do and do not pass:
2. Text Overlaid On Background Images Link
Text overlaid on imagery is tricky because some or all of the image may not have sufficient contrast in relation to the text.
Reducing the background opacity increases the contrast, making the text easier to read.
Alternatively, you can style the text itself to have a solid color or a drop shadow, or anything else that matches your brand guidelines.
3. Color Filters, Pickers And Swatches Link
The screenshot below shows the color filter on Amazon15 as seen by someone with and without protanopia (red–green color blindness). Without descriptive text it is impossible to differentiate between many of the options available.
Amazon shows descriptive text when the user hovers, but hover isn’t available on mobile.
This happens to be beneficial for people with normal vision too. For example, black and navy are difficult colors to differentiate on screen. A text label takes the guesswork out of it.
4. Photographs Without Useful Descriptions Link
Jaspe (or rather “jaspé”) means randomly mottled or variegated, so using this in addition to the specific color would be useful: “Gray Green Leaf Jaspe.”
5. Link Recognition Link
Links should be easy to spot without relying on color. The screenshot below simulates the vision of somebody with achromatopsia (can’t see color) viewing the UK Government Digital Service (GDS) website24. Many of the links are hard to see. For example, did you notice that “GDS team, User research” (located under the heading) are links?
To find a link, users are left having to hover with their mouse waiting for the cursor to change to a pointer. On mobile, they are left to tap on text hoping it will make a page request.
The links above with icons are easier to see. For those without, it would be a good idea to add an underline, which is exactly what GDS does within the body of its articles:
6. Color Combinations Link
In the physical world you can’t always control which colors appear next to one another: a red apple may have dropped and nestled itself into some green grass. However, we can control the colors we use to design our website. The following color combinations should be avoided where possible:
- light green/yellow
7. Form Placeholders Link
Increasing the contrast is not advisable because it will then be hard to tell the difference between placeholder text and user input.
8. Primary Buttons Link
Instead, consider using size, placement, boldness, contrast, borders, icons and anything else that will help – within the bounds of your brand guidelines. As an example, Kidly41 uses size, color and iconography:
9. Alert Messaging Link
Success and error messages are often colored green and red respectively. Most color-blind people don’t suffer from achromatism, and so will naturally associate different colors with different messages. However, using prefix text such as “Success” or, my preference, an icon makes it quick and easy to read as shown below:
10. Required Form Fields Link
Denoting required fields with color is a problem because some people may not be able to see the differences.
Instead, you could consider:
- Marking required fields with an asterisk.
- Even better, marking required fields with “required.”
- Where possible, remove optional fields altogether.
11. Graphs Link
Color is often used to signify different segments of a graph. The image below demonstrates how people with different vision would see this. The color-blind-friendly graph is on the right.
Using patterns and, where possible, placing text within each segment makes graphs easy to understand. When text doesn’t fit – as is often the case with a small pie chart segment – using a key will suffice.
12. Zoom Link
One accessibility feature that browsers have, is enabling someone to zoom in as much as they need. This improves readability–which is especially helpful on a mobile device.
Unfortunately, zoom can be disabled using the Viewport Meta Tag54, which is problematic. For example, text size may be too small to read in relation to the color contrast—but zooming in effectively increases the font size, making it easier to read. So don’t disable zoom on your website.
13. Relative Font Size Link
Similarly to the previous point, browsers provide the ability to increase text size (instead of zooming the entire page as a whole), in order to improve readability. However, some browsers disable this functionality when the font-size is specified in absolute units such as pixels. Using a relative font size unit, such as ems, ensures that all browsers afford this capability.
There are lots of tools available to help you design for color-blind people:
- Check My Colours55: if you have an existing website, you can just enter a URL and receive feedback of what needs to be improved.
- WebAim’s color contrast checker56: provide two colors to see if they pass accessibility guidelines.
- I Want To See Like The Color Blind57: apply color blindness filters to your web page right within Chrome.
- Color Oracle58: a color blindness simulator for Windows, Mac and Linux, showing you what people with common color vision impairments will see.
The tips in this article are not exhaustive, and they are not necessarily applicable to every situation. However, they do cover the majority of problems color-blind people experience when using websites.
It’s more important to take away the principles, so that you can integrate them into your own design process. Ultimately, websites aren’t just meant to look good – they are meant to be easy to use for everyone, including people who are color-blind.
(cc, og, il)
- 1 http://www.colourblindawareness.org/colour-blindness/
- 2 http://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/
- 3 https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/
- 4 https://www.smashingmagazine.com/2015/05/client-rendered-accessibility/
- 5 https://www.smashingmagazine.com/2015/12/making-accessibility-simpler/
- 6 https://www.smashingmagazine.com/2017/01/underestimated-power-color-mobile-app-design/
- 7 http://webaim.org/resources/contrastchecker/
- 8 https://www.smashingmagazine.com/wp-content/uploads/2016/06/text-contrast-large-opt.png
- 9 https://www.smashingmagazine.com/wp-content/uploads/2016/06/text-contrast-large-opt.png
- 10 https://www.smashingmagazine.com/wp-content/uploads/2016/06/text-overlay-bad-large-opt.jpg
- 11 https://unsplash.com/photos/N_Y88TWmGwA
- 12 https://www.smashingmagazine.com/wp-content/uploads/2016/06/text-overlay-bad-large-opt.jpg
- 13 https://www.smashingmagazine.com/wp-content/uploads/2016/06/text-overlay-good-large-opt.jpg
- 14 https://www.smashingmagazine.com/wp-content/uploads/2016/06/text-overlay-good-large-opt.jpg
- 15 https://www.amazon.co.uk/s/ref=nb_sb_noss?url=search-alias%3Daps&field-keywords=t+shirts
- 16 https://www.smashingmagazine.com/wp-content/uploads/2016/06/amazon-large-opt.jpg
- 17 https://www.smashingmagazine.com/wp-content/uploads/2016/06/amazon-large-opt.jpg
- 18 http://www.gap.co.uk/
- 19 https://www.smashingmagazine.com/wp-content/uploads/2016/06/gap-large-opt.jpg
- 20 https://www.smashingmagazine.com/wp-content/uploads/2016/06/gap-large-opt.jpg
- 21 http://www.superdry.com/mens/t-shirts/details/55971/pt-classics-vintage-logo-t-shirt
- 22 https://www.smashingmagazine.com/wp-content/uploads/2016/06/superdry-large-opt.jpg
- 23 https://www.smashingmagazine.com/wp-content/uploads/2016/06/superdry-large-opt.jpg
- 24 https://gds.blog.gov.uk/
- 25 https://www.smashingmagazine.com/wp-content/uploads/2016/06/gds-screenshot-large-opt.jpg
- 26 https://www.smashingmagazine.com/wp-content/uploads/2016/06/gds-screenshot-large-opt.jpg
- 27 https://www.smashingmagazine.com/wp-content/uploads/2016/06/gds2-large-opt.jpg
- 28 https://www.smashingmagazine.com/wp-content/uploads/2016/06/gds2-large-opt.jpg
- 29 https://www.smashingmagazine.com/wp-content/uploads/2016/06/combinations-large-opt.png
- 30 https://www.smashingmagazine.com/wp-content/uploads/2016/06/combinations-large-opt.png
- 31 https://appleid.apple.com/account
- 32 https://www.smashingmagazine.com/wp-content/uploads/2016/06/apple-large-opt.jpg
- 33 https://www.smashingmagazine.com/wp-content/uploads/2016/06/apple-large-opt.jpg
- 34 https://www.christianheilmann.com/2015/12/04/a-quick-reminder-on-how-and-why-to-use-labels-in-forms-to-make-them-more-accessible/
- 35 http://www.made.com
- 36 https://www.smashingmagazine.com/wp-content/uploads/2016/06/label-large-opt.jpg
- 37 https://www.smashingmagazine.com/wp-content/uploads/2016/06/label-large-opt.jpg
- 38 https://www.argos.co.uk
- 39 https://www.smashingmagazine.com/wp-content/uploads/2016/06/argos-large-opt.jpg
- 40 https://www.smashingmagazine.com/wp-content/uploads/2016/06/argos-large-opt.jpg
- 41 http://kidly.co.uk
- 42 https://www.smashingmagazine.com/wp-content/uploads/2016/06/kidly-large-opt.jpg
- 43 https://www.smashingmagazine.com/wp-content/uploads/2016/06/kidly-large-opt.jpg
- 44 https://www.smashingmagazine.com/wp-content/uploads/2016/06/messaging-large-opt.jpg
- 45 https://www.smashingmagazine.com/wp-content/uploads/2016/06/messaging-large-opt.jpg
- 46 https://www.smashingmagazine.com/wp-content/uploads/2016/06/required-large-opt.jpg
- 47 https://www.smashingmagazine.com/wp-content/uploads/2016/06/messaging-large-opt.jpg
- 48 https://www.smashingmagazine.com/wp-content/uploads/2016/06/graphs_normal-large-opt.png
- 49 https://www.smashingmagazine.com/wp-content/uploads/2016/06/graphs_normal-large-opt.png
- 50 https://www.smashingmagazine.com/wp-content/uploads/2016/06/graphs_protan-large-opt.png
- 51 https://www.smashingmagazine.com/wp-content/uploads/2016/06/graphs_protan-large-opt.png
- 52 https://www.smashingmagazine.com/wp-content/uploads/2016/06/graphs_achrom-large-opt.png
- 53 https://www.smashingmagazine.com/wp-content/uploads/2016/06/graphs_achrom-large-opt.png
- 54 https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
- 55 http://www.checkmycolours.com/
- 56 http://webaim.org/resources/contrastchecker/
- 57 https://chrome.google.com/webstore/detail/i-want-to-see-like-the-o/jebeedfnielkcjlcokhiobodkjjpbjia?hl=en-GB
- 58 http://colororacle.org/