Color blind accessibility on Bootstrap | Hacker News Reader

Color blind accessibility on Bootstrap

julesinthemiddle.tumblr.com

36 pointsHipstaJules22 comments

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.

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.

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.

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.

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.

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.

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

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.

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

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)

Success is grey Warning is yellow...

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

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

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

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

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.

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

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.

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

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

I guess nobody actually reads the labels??

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

Reply on news.ycombinator.com