Ask DN: When designing, do you consider colorblind people?

over 3 years ago from , Frontend UI Developer and Designer @mobileaction

A friend of mine came and asked

  • Hey what do these dots represent?

And I responded

  • The lavender dots represent twitter, these green ones represent facebook, the orange ones represent foursquare ...

And here is the legend:

legend

Then he said

  • But I'm colorblind, I can't differentiate. They all seem same to me.

This was a surprise. Until now I haven't been considered colorblind people in my design process and I wonder if it is only me. Should we consider them in design process? What is the percentage of colorblind people in society? In addition, if you have any tips about colorblind assistance it would be very nice.

21 comments

  • Tom GantzerTom Gantzer, over 3 years ago

    In my experience, this should be a huge consideration when designing interfaces. It's also a lot easier to check too; in Photoshop you can change your proof setup to a colour blind mode to visually check that your colours have a decent contrast.

    6 points
  • Spencer HoltawaySpencer Holtaway, over 3 years ago

    As a colorblind person, I pretty much can't help it.

    5 points
  • Marc EdwardsMarc Edwards, over 3 years ago (edited over 3 years ago )

    I definitely do. I think it’s an important part of designing user interfaces. Photoshop has some (limited) colour blindness testing already. I’ve built my own colour blindness testing as actions (they’re here if you want them), and we included colour blindness testing in Skala View.

    It’s pretty easy to check and usually just means ensuring there’s enough contrast and that your main colours are different enough when viewed by someone who has the common forms of colour blindness.

    For a quick test, see how your design looks in monochrome. If it’s ok there, you should be ok for all colour blindness types.

    I don’t know if these stats are correct (Google-for-graphs-ahoy!), but hopefully it’s a good indication:

    4 points
    • Tyler HowarthTyler Howarth, over 3 years ago

      Skala View's color blind mode is one of my all time favorite design tools. Thank you marc

      2 points
      • Marc EdwardsMarc Edwards, over 3 years ago

        Oh, great! To be honest, we didn’t know how often people would use it, but felt that people should be, so we added it. :)

        2 points
  • Mikey ClarkeMikey Clarke, over 3 years ago

    XScope has a cool little tool that lets you view the screen as it would appear to people with different types of colourblindness, along with the percentage of the population affected by each type.

    Really useful for quickly testing the colour accessibility of a design.

    2 points
  • Giulio MichelonGiulio Michelon, over 3 years ago

    I wrote this about colorblind people. It's a little research about colors that everybody can see clearly. http://julesinthemiddle.tumblr.com/post/51755312122/color-blind-accessibility-on-bootstrap

    1 point
  • Andrew PairmanAndrew Pairman, over 3 years ago

    Geri Coady has put her Five Simple Steps book on Colour Accessibility back up for sale. It's well worth the read.

    https://gumroad.com/l/loura11y

    0 points
  • Zack SpearZack Spear, over 3 years ago

    As someone that's colorblind I'm always a test subject.

    0 points
  • Laurie CaiLaurie Cai, over 3 years ago

    I've never actually thought about that.. but we definitely should.

    0 points
  • Matheus PereiraMatheus Pereira, over 3 years ago

    Since I am colorblind and I usually venture into the design of interfaces, I just adapting with bands of color within my comfort zone. It is a limitation that ends up defining my style.

    0 points
  • Brandon KaneBrandon Kane, over 3 years ago

    Foo

    0 points
  • Cihad Turhan, over 3 years ago

    Thanks everyone, seems like many designers here are aware of this problem and take precautions.

    Also, this gave me an idea of a simple javascript plugin which converts colors according to the desired colorblind mode by scanning the included css files and replaces more suitable ones if needed. It should not be much difficult, so I'll give a try. If anyone interested, find me and let's start together.

    0 points
    • Pedro Pimenta, over 3 years ago

      Don't sweat. There are plugins for that already. There's at least 2 chrome extensions and there must be something for Firefox too! I can't right now, I'm on my mobile, but i will come back later and give you some links if you're interested!

      0 points
  • Joe BlauJoe Blau, over 3 years ago (edited over 3 years ago )

    I've made a habit of using these settings in Photoshop Color Blind

    It covers the two major types of color blindness and sometimes reveals very surprising results about your design.

    0 points
  • Elliott ReganElliott Regan, over 3 years ago

    xScope has a really neat filter tool that let's you try your design out with an array of different forms of vision impairment.

    Mostly I find that I am safe, but I always aim for good contrast around the important parts.

    0 points
  • Zethus SuenZethus Suen, over 3 years ago

    If you need to test for colorblindness, I'd recommend grabbing Color Oracle http://colororacle.org/ -- it simulates the most common instances of colorblindness.

    0 points
  • Sarah Mills, over 3 years ago

    I installed this: http://michelf.ca/projects/sim-daltonism/ and I can quickly run through all the different types of colorblindness while I am designing and making color choices.

    If you have any government clients in the US (and usually gov contractors, non-profits, anything funded by the state) you must be aware of and adhering to Section 508 requirements.

    However, it's just a good idea in general—you would never want to intentionally exclude someone. If someone's screenreader can't get through your site, that is often lost $ and a negative brand impact.

    0 points
  • Shaun TollertonShaun Tollerton, over 3 years ago

    There's lots of accessibility tips in ustwo's PPP Handbook, such as using other graphical elements to use alongside your colours and using a colour contrast tool to check if your colours are WCAG 2.0 compliant. In your instance you could perhaps use the icons of each site within the coloured dots?

    0 points
  • Chris GChris G, over 3 years ago

    God, yes! I consider this critical, much like ensuring users with screen-readers can use a site.

    SIM Daltonism is a handy little application. It's much quicker than mucking about with Photoshop's settings.

    0 points