“The color blindness is the inability to perceive differences between some or all colors that other people can distinguish. According to the medical studies, eight to ten percent of male population suffers from some kind of color blindness (figure for female population is much lower). What does it mean to the average Swing developer? Well, if you rely too much on color differences, you may be not conveying the information as well as you thought. Now you can run your application in debug UI mode and have a live preview of your UI as viewed by the color-blind population.”
As a color blind individual, I can say that it’s very frustrating to see all sorts of UI designs based simply on color. I’ve actually seen window managers where the only thing to distinguish between the minimize, maximize and close buttons are the colors. Needless to say, it’s a huge issue for someone who can’t distinguish between the colors being used.
I’ve actually seen window managers where the only thing to distinguish between the minimize, maximize and close buttons are the colors.
..and *position*? In Mac OS X many people prefer to use the Graphite theme, in which all window controls use the same color:
Default Aqua theme (red, yellow, green / close, minimize, maximize):
http://img170.imageshack.us/img170/622/picture1ve7.png
Alternative Graphite theme (can be set from System Preferences):
http://img76.imageshack.us/img76/1209/picture2yz5.png
Basically, the colors are an “extra” in this case and what counts is the position. It’s worth noting that the buttons are always in the same position so you rely on “muscle” memory. For instance, if a window can’t be resized, the maximize button will still be there, just disabled (rendered semi transparent).
There is a little visual aid in case you forget tough (say, the first couple of days, until you get accustomed to it), when you mouse over:
http://img158.imageshack.us/img158/3622/picture3hc7.png
OK, sorry for the long post just to say the obvious: “colors should not be the *only* means of differentiation in GUIs” 🙂
I have never seen that before in my use of dozens of window managers. Could you please tell me what Window manager has all of the window controls in inconsistent positions so that you must differentiate them by color?
I hope you know those colors don’t make sense to anyone who can see them either, they’re just pretty colors. Well, I take that back, “red” makes sense as in “stop means close.” But you don’t think about it, you click a familiar position.
Unfortunately though, not many people can use this because it’s for one of the least popular toolkits out there: Swing. Not very many people use this, especially people who intend for individuals to use their software by choice and not company policy.
I have noticed a trend to use color to denote things. Firefox was the first one I noticed, but I’m sure there were others long before it. I think what’s really needed is for toolkits to have strong support for visual notification: Right now they have things like “ready” “insensitive” “active” etc. But all these typically do is change how bright the widget looks, and all of these are user-interactive states. We need non-interactive states like “warn” “critical” “normal” “bold” etc.
When doing Linux coding you’re constantly aware that overriding a color will mean something horridly ugly for people who use dark themes.
Could we get a preview of what our apps look like to blind people? Nyuk, nyuk, nyuk…
im colorblind too (one of the more rare types), and as long as an ui is customizable it should be enough. AFAIK there is nothing better than a monochrome/grayscale as there is litterally noone that sees it in a different colour. Except the completley blind ofcourse =P
I have been using the Vischeck plugin (http://www.vischeck.com/) for quite a while to check web page design (and other screenshots) to make sure colorblind visitors can access and navigate the site without issue. The Web Accessibility Initative (http://www.w3.org/WAI/) provides additional consideration for accessible interfaces — even though it is targeted for websites, it is also applicable for other computer interfaces as well.
I have been using the Vischeck plugin
Oh, THANK YOU! Their example page is something I’ve been looking for. I have red/green color blindness and whenever people find out about it, I’m always bombarded with questions about “What color is this?” and “What’s this look like to you?” That page is a good illustration of the way the world looks to me.
I really see no difference between the “normal” and the deuteranopia examples (except for the hats). I will have to bookmark that page for the next time someone asks.
So nice to see a few “color blind” people “coming out” here.
In the US, there are likely 7 million people affected.
That’s a lot of people.
Worldwide, that would be more like 500 Million.
At my office, (I’ve worked for a very small company for 18+ years.) we’ve had exactly 1 guy who confided in me. He asked about the color of the wires we were getting ready to crimp.
He also asked that I not tell anyone that he was color blind.
I happen to be gay.
No biggie, there. It’s just a fact of life. Another fact of life for me is that I like solitude, and living alone is something I’ve come to like. Other people are out looking for a mate. I just like being alone. So I’m a gay guy who likes to keep to himself and study Ruby On Rails. 😉
OK. So that’s getting horribly off-topic. Except it’s not.
The squeaking wheel gets the grease. And you guys seem rarely to squeak. I rarely squeak. I should squeak more.
I had a client, a few years ago, come to me with a “great idea”. We’re going to do all this UI thing with color because that’s one thing that everyone understands.
I hated it. Not only was it a stupid idea. But I knew how it would affect a significant number of people who don’t seem to like to squeak.
So on these articles about user interfaces:
Start Squeaking, People!
It’s your interface as much as anyone else’s. And the people who are stomping on you honestly don’t know they are doing it. And they *can’t* unless you tell them.
I truly hope that I have not offended anyone here.
But, by God, you have to let yourself be known or nobody will know you are there!
lol… I’m a double whammy… I’m both gay and colorblind.
It’s never really been an issue at work for me. Whenever there are cables to be made, I have someone else do it 🙂
Adam
“””Whenever there are cables to be made, I have someone else do it :-)”””
So do I.
I made enough rs-232 cables in my day. Let someone else make the damned RJ45’s. 🙂
-Steve
oh no! a gay person! back ! back!
seriously though, My boss is color blind. I keep forgetting that until I see him try to make an RJ45 cable
I grew up on the original Star Trek. The concept of “Infinite Diversity In Infinite Combinations” resonates with me.
I’m glad OSNews has such a diverse veiwership.
I’ve migrated from Linux-only news sites for that reason.
As nasty as things can sometimes get here, I find that there are people who are genuinely interested in how other people see things.
That’s a rarity.
Go OSNews! 😉
I’m also a double – (though not colorblind).
Gay AND a Trek fan
Also a fan of infinite diversity in infinite combinations – figured I’d throw my combo into the mix
Yay for affirming semi-OT threads!
Great article too – I don’t design web pages or UI’s, but it’s always a good idea for people to deepend there understanding and broaden their views a bit.
Well, I’d say that OSNews needs to open a forum for us Gay Star Trek fans who subscribe to IDIC. Both colorblind and colorblindless people would be welcomed. Nongay, nonfans would also be welcomed, as long as they were accompanied by a member.
Don’t take this post seriously.
Just funnin’ ya! 😉
-Steve
I always said Starfleet was just a little… You know. One tendon short of a wrist.
I mean, Takei ‘coming out’ was hardly a surprise – There’s a reason a cadet review looks like a meeting of the rainbow coalition, the uniforms come in a rainbow of colors, and their headquarters is in San Francisco.
Could we spell that out in any larger letters?
How very perceptive. I must admit I had never considered that.
But if you’re going to scrutinize 60’s TV, there are juicier places to look.
I mean, look at the getups the Gilligan’s Island crew wore. And did you notice the way the skipper and the professor looked at each other sometimes? Always when Gilligan was away, though.
And who knows what went on in Ginger and Maryanne’s hut?
Rumor has it that the millionaire’s wife was seen frequenting there, but I don’t believe it. 😉
Do the “after” pictures from the first two cases (protanopia and deuteranopia) look almost identical to anyone else?
It looks to me like the blue in the active title blend is a little less saturated and the brownish-gray background is slightly more gray in the deuteranopic case. The before shot looks fine to me (green rippled background, yellow blending to pink on the title bar, OK button, and check box). In the tritanopic case, the green turns to an almost sky blue color. The yellow does turn to light pink like the author describes, although the original pink appears to be slightly more red.
I’m not trying to point out an error; I’m genuinely concerned whether this is me or the designer.
I see exactly what you describe and I know for a fact that my perception of color of perfectly fine.
Swing UIs are so ugly that they often cause total blindness if they are used for too long.
What exactly is so ugly about this GUI? I think there’s nothing wrong with it, except for the color selection, but I guess you know too that there is a reason behind it, right? It would be hard to demonstrate a problem on a monochrome UI…
But anyway, feel free to troll about.
Where did “this” or “that” occur in his post? I think he was making an off topic comment about Swing’s normal look and feel…
You can actually use the normal greyscale color conversion for NTSC as a guide that works fairly well for the colorblind…
From a post I made over on sitepoint:
————————-
One thing I often find handy for this is the NTSC luminance conversion formula
Y = 29.9% Red + 58.7% Green + 11.4% Blue
You’ll note this formula differs from the one paint programs like photoshop, PSP and the Gimp use – those programs use a print conversion formula (21.25%, 71.51%, 7.24%), not a CRT one – the difference between emmissive and reflective. (which again is why print graphics people often have little or no business doing web design unless they can FORGET everything they know – I’m often AGHAST at print media folks lack of colorspace knowledge… I get one more image for a website as a BGR Big endian G little endian B and R .eps file…)
A good rule of thumb is that text should be at LEAST 50% of the spectrum different (128 using 8 bit color-parts) from your background on luminance to be legible to the widest audience.
Example: you choose #426 as your background. The RGB values for that are 68, 34, 102 – which works out to a luminance of 51.918 (I round up to 52). That pretty much means any darker color is right out – in fact the darkest color we should use would have a luminance of 180 ( 128+52). Ever notice that red on blue is nigh impossible to read? This is why – even a pure red (#F00 = 76 luminance) can’t be used… you’d have to lighten it all the way to #FF9494.
This is also why certain pure bright colors make REALLY bad background choices. Take #FF0000 for example. At 76 luminance again darker colors are right out, and we have to go REALLY bright (>225) to approach a useful contrast. Pure red, green and blue are out by default, Pure magenta is out (110Y) Pure Cyan is out (178Y) while Pure yellow is not (226Y). Yellow on red is legible (though a bit harsh on the eye). To use the other colors you’d have to dirty them up towards pastel, for example Cyan doesn’t hit 225Y until #9BFFFF
It’s not JUST about picking attractive colors, it’s also about making them LEGIBLE. ALSO, using the luminance conversion this way makes your site color-blind friendly – I’ve seen sites where the designer was obsessed with making it compatable with speech readers, wap devices, alternative browsing – then made the visual stylesheet have pure cyan (176Y) on a slate grey background (#556, which works out to 87Y)… 176Y-87Y=89… people who AREN’T colorblind can’t read that, much less people who can only really see the blue part of the spectrum.
———————–
But yeah, the visicheck online check AND their plugins are right handy, as they can show you what a colorblind person would see – which is the bottom line… but if you follow the above guidelines you’ll generally find you rarely come up with color combinations that aren’t legible to the colorblind.
Anyone who design’s an interface with such hideous colours shouldn’t be designing interfaces.
Ok, readability is one thing and I’m pretty glad my test website didn’t become unreadable under any of the Vischeck modifications.
But it seemed butt ugly to me, probably because I’m used to seeing all colors.
So my question is:
Could some of you (color blind) guys please post links to websites you find butt ugly (although readable), as well as to sites you think are beautiful?
And I must say I’m shocked that one out of 12 men is somehow color blind. I always thought it was 1/1000 or so.
So, yes, you should make yourselfes a lot more heard!
I think typical color blindness is a mild difficulty with seeing tints of red. I’ve met two color blind men in my life. One couldn’t tell red from green, and the other said he saw things in shades of brown and gray.
I’m sure I’ve probably met somebody who just didn’t tell me he was color blind, but I’m really not seeing 10% where the color blindness is a major issue.
It’s probably like how a large percent of the population in the US has athsma. It doesn’t mean everyone of those people needs a nebulizer, or even anything more than pirbhuterol…
In other words, I think it’s a “shocker” statistic: Made larger by including anything and everything you can possibly include.
This is just my perception. Maybe color blind individuals are just embarassed about it and hide it?
As soemone who is totally color blind,
I’m pleased to see this topic being raised.
In my case, I need a High-contrast color scheme with
a dark background. White on black works best for me.
I find it extremely frustrating when I have to deal with
an application that has a poorly designed UI.
Even those applications that provide a means to customize the UI
can be quite frustrating since they often
assume that you will be using the UI to customize the UI.
Developers need to provide a documented way to configure the UI without depending on the UI.
Browser: Lynx/2.8.5rel.4 libwww-FM/2.14 SSL-MM/1.4.1 OpenSSL/0.9.7g
Ok, so I’m not colorblind but, for reasons which I will not go into, my vision is deteriorating (and uncorrectable by glasses/lenses). What bothers me is I need to have a decent contrast to make text legible. Some colourschemes completely fade out the text for me, while on others it comes through crisply.
One of the great features on Apple OsX for me is the ability to easily (function key) switch to a “negative” of the display or to grayscale (http://images.apple.com/accessibility/vision/images/screens20050516…)
This helps me read the text on most stupidly designed apps. I guess it would be of great help to the colorblind people here too.
This just made me think… GL/DirectX interfaces are going to help with accessibility. Think of all the shader options and things you could apply to both help development of the application and at the end-user to help see the application.
Compiz has already given a zoom function to the mouse wheel which can be pretty handy.
All of the examples except the last one look identical to me! They are all equally ugly.
Periodically, and very rarely (as a systems architect/developer) I go on a user interface building spree. The screams can be heard throughout the office “stop! stop! please, stop!”. Of course, when the default colour scheme is unappealing to the minority (those 10% individuals), they are never consulted.
Would you knowingly employ a colour blind product manager?
Would you knowingly employ a colour-blind marketing person?
Would you knowingly employ a colour-blind designer?
The answers are most likely “no” to the above- and yet, by employing at least one colour-blind product specialist you would end up with products which would be 10% more appealing on average.
Not everyone is perfect…
My dad and my uncle are color blind.
I recently designed a web site for my husband’s business and now I realize that somebody who’s color blind will see the chosen color schemes as shades of grey and brown. ~sigh~
(Off to make some color adjustments to help increase contrast.)
Edited 2006-09-15 23:15
…and they all look different. I know for a fact that I am colorblind, so maybe they just don’t have it quite right.
There are many levels of color blindness. Some are more serious than others.
I have no problem with saturated reds and greens, but the earthly mixed variants are a problem. I can see that they’re different, but I’ve no idea which is red and which is green. I can even distinguish some of the red/green color blindness number tests, though they look very faint to me. Red/blue difference is much more higher for me than red/green.
Ah, I’m in visual arts, though not gay (Star Trek is ok).
It consoles me immensely in the dark of the night that I can see through camoflage and distinguish several shades of khaki invisible to normal people.