Menu Search
Jump to the content X X
Smashing Conf New York

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

Accessibility: Improving The UX For Color-Blind Users

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

There are many types2 of color blindness but it comes down to not seeing color clearly, getting colors mixed up, or not being able to differentiate between certain colors.

Further Reading on SmashingMag: Link

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:

“WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text (14 point and bold or larger, or 18 point or larger).”
WebAim color contrast checker7

Here are a few examples of color and size combinations that do and do not pass:

Contrast is based on color and size8

This illustrates how contrast is based on the combination of color and size. (View large version9)

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.

Description of the image.10

Text overlaid on an image without a mask. (Image credit: Jay Wennington11) (View large version12)

Reducing the background opacity increases the contrast, making the text easier to read.

Description of the image.13

Text overlaid on an image with a mask. (View large version14)

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 color picker16

Color filter without labels as seen by someone with protanopia is impossible to use. (View large version17)

Amazon shows descriptive text when the user hovers, but hover isn’t available on mobile.

Gap18 solves this problem by adding a text label beside each color as shown below:

Amazon color picker19
Color filter with labels as seen by someone with protanopia is easy to use. (View large version20)

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

The screenshot below shows a SuperDry T-shirt21 for sale on its website. It is described as “Leaf Jaspe” which is ambiguous as leaves can come in an assortment of colors (green, yellow, brown. etc.).

Description of the image.22

It’s hard for color-blind people to know what color this SuperDry T-shirt is. (View large version23)

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

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?

GDS25

GDS blog as seen by someone with achromatopsia. (View large version26)

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:

GDS27

Underlined links are easy to see by someone with achromatopsia. (View large version28)

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:

  • green/red
  • green/brown
  • blue/purple
  • green/blue
  • light green/yellow
  • blue/grey
  • green/grey
  • green/black
Colour combinations as seen with Protanopia29

Colour combinations as seen with Protanopia. (View large version30)

7. Form Placeholders Link

Using a placeholder without a label is problematic because placeholder text usually lacks sufficient contrast. Apple31 has this problem with their registration form, as shown below:

Apple registration form32

Apple’s registration form uses a placeholder without a label. (View large version33)

Increasing the contrast is not advisable because it will then be hard to tell the difference between placeholder text and user input.

It’s better to use labels – a good practice34 anyway – with sufficient contrast, which is exactly what Made.com35 does as shown below:

Labels36

Made.com uses labels with good contrast. (View large version37)

8. Primary Buttons Link

Often, primary buttons use color alone to present themselves as such, and Argos38 does just this on its login screen:

Argos login screen39

The Argos login screen relies on color to emphasize the primary button. (View large version40)

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:

Kidly Basket buttons42

Kidly uses size, color and iconography to emphasize the primary button. (View large version43)

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:

Messaging with icons and text44

Alert messaging with text prefixes and icons. (View large version4745)

10. Required Form Fields Link

Denoting required fields with color is a problem because some people may not be able to see the differences.

Messaging with icons and text46

Denoting required fields by color. (View large version4745)

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.

Graphs as seen with normal visions48

Graphs viewed with normal vision (View large version49)
Graphs as seen with Protanopia50

Graphs viewed with protanopia (View large version51)
Graphs as seen with normal visions52

Graphs viewed with achromatopsia (View large version53)

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.

Tooling Link

There are lots of tools available to help you design for color-blind people:

  1. Check My Colours55: if you have an existing website, you can just enter a URL and receive feedback of what needs to be improved.
  2. WebAim’s color contrast checker56: provide two colors to see if they pass accessibility guidelines.
  3. I Want To See Like The Color Blind57: apply color blindness filters to your web page right within Chrome.
  4. Color Oracle58: a color blindness simulator for Windows, Mac and Linux, showing you what people with common color vision impairments will see.

Conclusion Link

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)

Footnotes Link

  1. 1 http://www.colourblindawareness.org/colour-blindness/
  2. 2 http://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/
  3. 3 https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/
  4. 4 https://www.smashingmagazine.com/2015/05/client-rendered-accessibility/
  5. 5 https://www.smashingmagazine.com/2015/12/making-accessibility-simpler/
  6. 6 https://www.smashingmagazine.com/2017/01/underestimated-power-color-mobile-app-design/
  7. 7 http://webaim.org/resources/contrastchecker/
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2016/06/text-contrast-large-opt.png
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/06/text-contrast-large-opt.png
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2016/06/text-overlay-bad-large-opt.jpg
  11. 11 https://unsplash.com/photos/N_Y88TWmGwA
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2016/06/text-overlay-bad-large-opt.jpg
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2016/06/text-overlay-good-large-opt.jpg
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/06/text-overlay-good-large-opt.jpg
  15. 15 https://www.amazon.co.uk/s/ref=nb_sb_noss?url=search-alias%3Daps&field-keywords=t+shirts
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2016/06/amazon-large-opt.jpg
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2016/06/amazon-large-opt.jpg
  18. 18 http://www.gap.co.uk/
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2016/06/gap-large-opt.jpg
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2016/06/gap-large-opt.jpg
  21. 21 http://www.superdry.com/mens/t-shirts/details/55971/pt-classics-vintage-logo-t-shirt
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2016/06/superdry-large-opt.jpg
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/06/superdry-large-opt.jpg
  24. 24 https://gds.blog.gov.uk/
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2016/06/gds-screenshot-large-opt.jpg
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2016/06/gds-screenshot-large-opt.jpg
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2016/06/gds2-large-opt.jpg
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2016/06/gds2-large-opt.jpg
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2016/06/combinations-large-opt.png
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2016/06/combinations-large-opt.png
  31. 31 https://appleid.apple.com/account
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2016/06/apple-large-opt.jpg
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2016/06/apple-large-opt.jpg
  34. 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. 35 http://www.made.com
  36. 36 https://www.smashingmagazine.com/wp-content/uploads/2016/06/label-large-opt.jpg
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/2016/06/label-large-opt.jpg
  38. 38 https://www.argos.co.uk
  39. 39 https://www.smashingmagazine.com/wp-content/uploads/2016/06/argos-large-opt.jpg
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2016/06/argos-large-opt.jpg
  41. 41 http://kidly.co.uk
  42. 42 https://www.smashingmagazine.com/wp-content/uploads/2016/06/kidly-large-opt.jpg
  43. 43 https://www.smashingmagazine.com/wp-content/uploads/2016/06/kidly-large-opt.jpg
  44. 44 https://www.smashingmagazine.com/wp-content/uploads/2016/06/messaging-large-opt.jpg
  45. 45 https://www.smashingmagazine.com/wp-content/uploads/2016/06/messaging-large-opt.jpg
  46. 46 https://www.smashingmagazine.com/wp-content/uploads/2016/06/required-large-opt.jpg
  47. 47 https://www.smashingmagazine.com/wp-content/uploads/2016/06/messaging-large-opt.jpg
  48. 48 https://www.smashingmagazine.com/wp-content/uploads/2016/06/graphs_normal-large-opt.png
  49. 49 https://www.smashingmagazine.com/wp-content/uploads/2016/06/graphs_normal-large-opt.png
  50. 50 https://www.smashingmagazine.com/wp-content/uploads/2016/06/graphs_protan-large-opt.png
  51. 51 https://www.smashingmagazine.com/wp-content/uploads/2016/06/graphs_protan-large-opt.png
  52. 52 https://www.smashingmagazine.com/wp-content/uploads/2016/06/graphs_achrom-large-opt.png
  53. 53 https://www.smashingmagazine.com/wp-content/uploads/2016/06/graphs_achrom-large-opt.png
  54. 54 https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
  55. 55 http://www.checkmycolours.com/
  56. 56 http://webaim.org/resources/contrastchecker/
  57. 57 https://chrome.google.com/webstore/detail/i-want-to-see-like-the-o/jebeedfnielkcjlcokhiobodkjjpbjia?hl=en-GB
  58. 58 http://colororacle.org/

↑ Back to top Tweet itShare on Facebook

Adam Silver designs simple, human and inclusive websites. He also wrote a little book called MaintainableCSS.

  1. 1

    See also: http://randoma11y.com/

    What is this? An ongoing project to try and curate beautiful color palettes that are a11y friendly. This app generates a random palette and allows you to vote the combination up or down. We’ll store the info and keep our api open.

    0
  2. 2

    Fabien Butazzi

    June 21, 2016 6:09 pm

    To me, one of the best examples of good UX for colour blind users is the addition of text to the hot and cold water taps, as in here: http://bodyunburdened.com/wp-content/uploads/2012/12/hot_cold_water_faucets.jpg

    1
  3. 3

    Being a web developer and being color blind. I can say that trying to accommodate for the color blind is a loosing battle. Colorblindness varies so much that it’s impossible to come up with a color palette other than black and white.

    For instance I have a mild color blindness where I just have trouble distinguishing different colors. Like dark blue and dark purple looks the same to me, but then my Grandfather was pretty close to only seeing black and white. He couldn’t even tell the different colors of traffic lights.

    All I can suggest is trying to make sure you have a high enough contrast between the background color and text, and hope for the best. Oh, and DON’T use those flat styled pastel background colors,… at all. For a lot of colorblind people no amount of contrast helps with that.

    10
    • 4

      The suggestion I read was to create your design in pure black and white, do proper contrasts and then fill in colors. Next on, turn those colors into their b/w “equivalents” and see if the contrast still works. If not, choose different colors.

      Doing this, one can at least assure, that even in cases of colour blindness, the user is still able to grasp “whats there”. It’s not 100% proof, either, but still a good compromise over “why is there nothing to see here?” .. :)

      cu, w0lf.

      3
      • 5

        My old boss used to say the same thing about creating logos. If it doesn’t work in black and white, I doesn’t work. So, start in black and white.

        0
  4. 6

    This is a very helpful and often forgotten way of making every website appealing to all users. Specially about contrast and on forms without placeholder text and user input. Not being color-blinded, I wonder if there are websites that are just impossible to navigate. This is computer ethics on daily life!

    Thank you for all the tips!
    T.

    1
  5. 7

    Vaibhav Mehta

    June 22, 2016 6:03 pm

    Honestly, I don’t see any importance of this, why would one code for 4.5% out of which, likely 0.0001% of the people will be visiting your website. This level of UX is important to companies like Google, Facebook rather than small portals. Amount invested in maintaining separate

    -13
    • 8

      Because some care about their visitors and some do work for big companies. ;)

      0
    • 9

      Lenny Peters

      June 23, 2016 8:38 pm

      Truly important to realize the internet is for everyone and not just a few. #a11y

      2
    • 10

      Paul Morris

      July 4, 2016 9:21 am

      “why would one code for 4.5% out of which, likely 0.0001% of the people will be visiting your website”

      Because 4.5% is 4.5%–whether you have 100 visitors or 100 million! Do you want to alienate 1 in 20 of your visitors?

      0
  6. 11

    Most importantly, never write Red text on a Black background for error messages. These are almost invisible to us!

    6
    • 12

      Red text (#ff0000) on white background is bad idea also. Because have only 4,0:1 contrast ratio ;)

      1
  7. 13

    Kristy Sullivan

    June 27, 2016 10:25 pm

    I wrote something up last month about visually disabled users. https://medium.com/@kristysullivan/how-to-plan-for-visually-disabled-users-on-computers-and-mobile-devices-color-blindness-low-c7863fe50c08#.96t487u22. This article you wrote is broken down nicely and easy to read. Great info too. Thank you!

    0
  8. 14

    John McNabb

    June 28, 2016 8:58 pm

    Good article – please add it to your list of articles on Accessibility: https://www.smashingmagazine.com/tag/accessibility/

    0
  9. 16

    Brad Starks

    July 6, 2016 11:25 pm

    Great article, but I did find it rather ironic that the link color used on this page (#41b7d8 on a #fff background) does not meet the color contrast requirements for AA or AAA of the WCAG standard of 4:5:1 or 3:1 for Text Readability as stated in item 1 of this article. Instead it comes in at 2.34:1 which fails to meet the standards for both small and large text.

    0
  10. 17

    Robert R. Glaser

    July 18, 2016 10:18 pm

    In addition to some of the prior comments, I have generally found the best approach to good UX design is try to do your best at deigning all of the IxD in black and white wireframes and then only ad color after that is completed.
    Then the level and amount of color should be targeted to the user. For example, you don’t need to address colorblindness if the target user is someone for whom colorblindness prevents them from the work that they are using the application for (e.g. airline pilot).
    Additionally, I have never seen any way of determining if the filters for testing colorblindness are accurate. About 10+ years ago, there was a plug-in for photoshop which allowed you to choose the type and severity of color blindness (giving you more of a real world spectrum rather than the on/off versions used now.) This doesn’t even mention the accuracy of these conversions beyond they’re lack of variability.
    Granted my perspective has come from testing UI’s with colorblind people for years and similar to people who are fully blind appearing to have better hearing, it is simply a neurological redistribution of cognitive function which allows them to use the same hearing more effectively because they lack the reinforcement of sight. Most of our sensory input is codependent on other senses for reference and reinforcement. While this can actually cause problems or errors, it is not weakness of all of our senses but rather the distribution of cognitive processing of multiple sensory inputs that makes any one seem mere adequate.
    So when I’m checking for UX effectiveness against section 508, I count on real users over heuristics that are genuinely artificial because they are meant to present the lack of a sense in a form that someone without that deficit can relate to rather than as the individual who actually has the deficit perceives the world around them (including the UI I had designed for their use.)

    0
  11. 18

    In an effort to move a site toward compliance, one of the things we’re doing is adjusting colors for buttons throughout the user flow to compliant colors.

    We’re also updating buttons that are, for whatever reason, not yet / no longer clickable for the user to indicate that something must be updated on the page. Ex.: Taking a Green submit button and desaturating it as an additional indication that there’s other steps to take.

    My concern is that a compliant button will be rendered non-compliant while it’s in this state. Adding iconography and text clues may help, but I have yet to find much on grayed-out button colors AND keeping compliance.

    0
  12. 19

    Great article.
    I’ve recently tried to download and use the ColorOracle software for Windows. As I recall the release date was 2010, and the software would not run.
    I hope it’s been updated. Please check and ensure the link is as helpful as it once was.

    1

↑ Back to top