5 ms·

Color blind accessibility on Bootstrap

36 points by HipstaJules 13y ago

tomkin 13y ago
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 13y ago
  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 ).
ownagefool 13y ago
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 13y ago
  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 13y ago
    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 13y ago
      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.
Siecje 13y ago
Success is grey Warning is yellow...
- fmoralesc 13y ago
  Noticed that too. Maybe the author is colorblind for those? Maybe we are?
  - HipstaJules 13y ago
    OP here! I just noticed that they are not really contrasting, and maybe I'm mildly colorblind!
    - panacea 13y ago
      I think you have some colorblindness. They are very distinctly different to me.
krcz 13y ago
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.
advisedwang 13y ago
For one example of this look at http://jenkins-ci.org/ http://jenkins-ci.org/. They use blue for successful builds and red for unsuccessful builds.
jwpeddle 13y ago
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 13y ago
  I'm with you here. An overlayed pattern can be very helpful.
ams6110 13y ago
I guess nobody actually reads the labels??
- HipstaJules 13y ago
  well, I was talking about contrast, not labels. Usability is when you guess what is something before you focus on it!
DigitalJack 13y ago
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 13y ago
  As a colorblind photographer, I keep waiting for systems like this which can intuitively show me where a specific color is.
tyilo 13y ago
Only 8% of the MALE population are colorblind while only around 0.5% of women are colorblind.
- deleted 13y ago
  [deleted]
gingerlime 13y ago
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/ 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 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)
lifthrasiir 13y ago
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 13y ago
  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-contrast-without-color.html http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contr...

36 points by HipstaJules 13y ago

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 13y ago
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 ).

ownagefool 13y ago

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 13y ago
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 13y ago
  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 13y ago
    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.

Siecje 13y ago

Success is grey Warning is yellow...

fmoralesc 13y ago
Noticed that too. Maybe the author is colorblind for those? Maybe we are?
- HipstaJules 13y ago
  OP here! I just noticed that they are not really contrasting, and maybe I'm mildly colorblind!
  - panacea 13y ago
    I think you have some colorblindness. They are very distinctly different to me.

krcz 13y ago

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.

advisedwang 13y ago

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

jwpeddle 13y ago

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 13y ago
I'm with you here. An overlayed pattern can be very helpful.

ams6110 13y ago

I guess nobody actually reads the labels??

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

DigitalJack 13y ago

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 13y ago
As a colorblind photographer, I keep waiting for systems like this which can intuitively show me where a specific color is.

tyilo 13y ago

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

deleted 13y ago
[deleted]

gingerlime 13y ago

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

lifthrasiir 13y ago

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 13y ago
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-contrast-without-color.html http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contr...