

Color blind accessibility on Bootstrap - HipstaJules
http://julesinthemiddle.tumblr.com/post/51755312122/color-blind-accessibility-on-bootstrap

======
ownagefool
Uh, theres no hard and fast rule for how colour blind people see. I'm colour
blind and I can quite clearly see the difference between the top set of
buttons.

It's really difficult to talk about, because obviously when I use the
simulator, the colours look really messed up and don't make sense but that's
already equating in my colour blindess, but I imagine it's a lot more subtle
for the vast majority of those who are colour blind and therefore it's hardly
560 million people.

I honestly don't think the wins would be worth the losing green/amber/red
standard that most people instinctively understand and have had their eyes
grow used too.

~~~
hoov
I was thinking the same exact thing. I'm color blind, and Success and Danger
look very close while Success and Warning are easily distinguishable.

EDIT: After another read, I see that it was a typo in the article. That being
said, is Primary not already blue? I'd venture a guess that it's actually
purple (again: color blind) if the OP is suggesting making Success blue.

~~~
ownagefool
Primary looks blue to me. I find it a bit strange that you would call one
distinct colour another colour, as we're taught to label them as children, so
generally colour blind people only trip up on edge cases as it doesn't matter
what you see, you've learned to associate a shade with a label.

Your eyes must be more messed up than mine; are you talking about the top
Primary or the lower Primary, because I can kinda understand with the lower,
but I'd be suprised if anyone with a decent monitor couldn't tell the top
colours apart and call them by name, extreme cases being the exception.

~~~
DigitalJack
Blue and purple are problematic because of the red component. If your color
blindness comes from a deficiency in red then it's difficult.

On the other hand, if you're deficiency stems from lacking green, then blue
and purple won't be as difficult.

Red-green color blindness stems from a deficiency, and therefore some colors
are aliased. It is not a substitution where the total unique colorspace is the
same size but with different elements.

The colorspace has is reduced. So it is not matter of memorizing that a shade
of X is really Y. That may work in some cases that are likely unique to the
individual, but there WILL be aliased colors.

------
krcz
I'm colorblind (probably deuteranomalia; red-green problems) and I can't see
any problem. In the simulated daltonism version Success and Warning are
probably even more different than in original ones (but Warning seems a little
greenish).

Does anyone with impaired color vision actually have any problem?

It's completely different with plots using red and green (especially red-green
gradient). Don't do it ever - or at least not when showing results to anyone
who you don't know to have proper color vision. Orange and blue are much
better.

------
lifthrasiir
Color is only one way to improve the usability. I think glyphicons included in
bootstrap can complement the color as an indicator of the meaning of buttons,
and they should be used whenever appropriate for that very reason.

~~~
blauwbilgorgel
Exactly.

    
    
      SC 1.4.1 Use of Color: Color is not used as the only 
      visual means of conveying information, indicating an
      action, prompting a response, or distinguishing a visual 
      element. (Level A)
    
      Users who have color-blindness benefit when information 
      conveyed by color is available in other visual ways.
    

[http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-
contr...](http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-
without-color.html)

------
tomkin
As someone mildly effected by colourblindness, I am happy to see this
consideration. I think it's important to note that making UI colourblind-
sensitive, you don't have to do a whole lot of work. Contrast being the most
important.

~~~
ownagefool
Should check out the colour blind checkbox for l4d2. Works for me, and doesn't
the change the colours from one to another (in the sense that I call different
shades of red, red. :P ).

------
gingerlime
I think it would make much more sense if the web application / browser /
operating system can adjust the colours to fit a colour-blind person, rather
than applying the same logic for everyone. In addition, different types of
colour-blindness (deuteranopia, protanopia, tritanopia) make it hard to come
up with one scheme that fits all.

There are a couple of browser plugins and scriptlets for this purpose - e.g.
<http://daltonize.appspot.com/>

At kenHub (working with John Cupitt, the creator of ruby-vips), we've also
created an implementation of the daltonize algorithm for ruby/rails that does
this server-side. see <https://github.com/kenhub/shikimo>

(we are hoping to use this soon on our anatomy atlas, so colour-blind people
can more easily distinguish between highlights and colour-coded structures)

------
Siecje
Success is grey Warning is yellow...

~~~
fmoralesc
Noticed that too. Maybe the author is colorblind for those? Maybe we are?

~~~
HipstaJules
OP here! I just noticed that they are not really contrasting, and maybe I'm
mildly colorblind!

~~~
panacea
I think you have some colorblindness. They are very distinctly different to
me.

------
advisedwang
For one example of this look at <http://jenkins-ci.org/>. They use blue for
successful builds and red for unsuccessful builds.

------
jwpeddle
My eyes are pretty messed up. Red and green look the same and I can't
definitively tell dark blue from grey from purple. However I have no trouble
with the default bootstrap buttons.

That said, I find the most helpful thing people can do is add icons or other
effects completely different from colors. Because of my difficulty with
colors, even ones I can "see" I have to concentrate on. Icons let me skip
that.

~~~
DigitalJack
I'm with you here. An overlayed pattern can be very helpful.

------
DigitalJack
I would much rather this sort of thing be handled by the OS along with other
accessibility features.

One option would be to have the OS add a pattern to the red component of the
RGB space. That would work for sufficiently large patches.

Another idea would be to add a time domain function to red that pulsates the
brightness.

With options for always on or momentary.

~~~
fudged71
As a colorblind photographer, I keep waiting for systems like this which can
intuitively show me where a specific color is.

------
tyilo
Only 8% of the MALE population are colorblind while only around 0.5% of women
are colorblind.

------
ams6110
I guess nobody actually reads the labels??

~~~
HipstaJules
well, I was talking about contrast, not labels. Usability is when you guess
what is something before you focus on it!

