Forum Moderators: open
(Note: All quotes below are from the old thread.)
I would have thought that there would have been a browser developed that could automatically modify the way a web page is displayed to best suit a particular type of colorblindness. A basic version of this might be a reassignment of the colors grey levels before displaying in grey scale.
I don't have colour blindness myself, but one tool I've found invaluable for increasing contrast on web pages is the Opera browser. It has a button that offers a drop-down menu of alternative stylesheets. Two of these are black and white. I use them when I find the colour combination on a website too subtle to read easily. Alas they don't offer shades of grey.
My graphic designer friend says that the thing to do is use colors, but make sure the grey levels are different. The quick way to check? Print it out on a black and white printer.
I would disagree with this approach, because pages often print differently than they look on screen. You could always take a screenshot of course.
Someone suggested using Photoshop to change a screenshot to greyscale, and this is a good idea. (I've done this myself in the past.)
However, there is another approach, which actually works in Internet Explorer 5.5+ on Windows. Microsoft added a greyscale filter that could be applied to any element on a page. You can therefore add this to your pages to see instantly how they look without colour. It even affects form buttons!
Just add this code in the <head> of your document:
<style type="text/css">
* filter:Gray;
</style>
You can also set up a User Stylesheet in Explorer that can affect all pages. This might force text and backgrounds to be a certain colour, for instance. Opera and Firefox can also do this, with the refinement that they can target specific websites. (Opera 8 and the latest Firefox builds only.)
Another solution is to turn styles (CSS) off altogether. (I do this quite a lot.) Opera has a button to toggle CSS on and off easily. Explorer has a tickbox to do the same thing. The result is a black and white page of easily readable text.
Yet another idea is simply to adjust your monitor to black and white! Or turn off one of the colours perhaps.
As a note, the streets would be much safer for me if GO was green/round and STOP was red/square and CAUTION was yellow/triangular
Brilliant idea!
Note that I believe the Chinese see red as GO, not STOP.
There was a recent study... ...where they created a random field of numbers in black and white and asked people to find all the 5s. Synaesthetics could do this something like 10 times faster than "normal" people because they searched by color, whereas people with normal vision needed to first identify the fives, then count them.
When I was young, I noted that I associated each day of the week with a different colour. I also 'colourised' each letter of the alphabet, and each number from 1 to 9. I still 'see' these colours, but not in a way that would help me search for them. They are only mental colour associations, not physical ones. But it's an interesting area.
My main job is as a sixteenth-century historian and I have to say there's a lot to be said for black on white, ink on paper. I walk into the archives, pull out a manuscript from 1539, and read it with no worries about hardware/software compatibilities.
But older documents may be almost impossible to read due to the script fonts used, or the use of Latin. Or in the case of the Book of Kells, the text may be so intricately woven with colour illustrations that the modern eye cannot quickly decipher it. I'd have thought that easy-to-read books were a product of the paperback industry. Long ago, only certain people, such as male scholars, were allowed to read books. So they didn't need to be too clear. Correct me if I'm wrong.
I often need to stop at flashing yellow lights and get honked at by the people behind me, but I can't tell easily whether it's red or yellow.
But you can surely tell by the position of the light? (Traffic lights in the UK have three lights in a vertical order, so I assume even if you saw in black and white, you could tell which was which?)
Regarding print, I recently received a magazine using a flourescent orange background with white text headlines over it. Agh! My eye can't bear to look at the headlines, they appear slightly wavy in daylight. Let's be thankful monitors can't yet display flourescents! I'm sure they would be heavily abused on the web!
One last thing. The W3C mention in their Accessibility Guidelines to make sure your pages work in black and white without colour. So it makes good sense, and may even be a legal requirement. Just avoid obvious things like yellow text on white. Make sure there is enough contrast used for text.
using Photoshop to change a screenshot to greyscale
This is an idea in the right direction, but it's not all the way there. Why? Because (despite what the prompt says) greyscale conversion in Photoshop does more than just "discard color information." It also applies some kind of brightness/contrast algorithm that will slightly skew your perception of what's going on, if color blind usability is your goal.
An even better Photoshop approach would be to change the mode of yuour screenshot image to L*a*b and then view only the L channel, which holds all the lightness data and no color data. It is not messed with in any way, no enhancements to make it look better, etc. You will find that the L channel usually looks more washed out than a greyscale conversion would lead you to believe.
But in fact, there is more subtle data shift preserved there and depending on my image, I often start with the L channel to make the conversion to greyscale, instead of using the one-click approach.
This brings me to one of my soapbox issues (look out!) - redundancy. All web page functionality should have redundant cues, and certainly never depend on color alone. Anchor text, for example, can be both underlined, and a different color, a different font weight, and have a strong hover behavior. Use just one cue and your stats may be far below what they could be. If you are using just one cue for anchor text (and in particular if you don't underline anchor text) I suggest experimenting with a few more cues and measure the result. Easy enough to do with a stylesheet.
Along these lines, there is a certain trendy link style in blogs that must drive the color blind crazy - it drives me crazy I know. The idea seems to be to have as few vusual cues on links as you possibly can - sometimes nothing but a hover behavior, but more often just a subtle color shift from regular text to anchor text.
Why make that choice? Trying to make it look like a print piece? It's NOT a print piece! Go and photocopy your newsletter then and mail it to me, that's what I say. This is the web, and there are some very nice differences from print. Why eliminate them?
One question I have is how colorblind people deal with graphics on websites. Do they get ignored? Or do they still prompt a click as seems to be the case with non-colorblind people? Also, are there any statistics on how many colorblind Internet users have put user-stylesheets in place to make webpages more readable?
This brings me to one of my soapbox issues (look out!) - redundancy. All web page functionality should have redundant cues, and certainly never depend on color alone. Anchor text, for example, can be both underlined, and a different color, a different font weight, and have a strong hover behavior. Use just one cue and your stats may be far below what they could be. If you are using just one cue for anchor text (and in particular if you don't underline anchor text) I suggest experimenting with a few more cues and measure the result. Easy enough to do with a stylesheet.
This is one of my favorite issues too. I do everything possible to make links stand out - bold text, contrasting colors, major hover effects, etc. For main navigation, I often use
display:blockBut one thing I don't do is underline the inline links on my pages. It just looks clunky to me; maybe I need to think about sacrificing some "streamlining" in favor of usability.
I often need to stop at flashing yellow lights and get honked at by the people behind me, but I can't tell easily whether it's red or yellow.But you can surely tell by the position of the light? (Traffic lights in the UK have three lights in a vertical order, so I assume even if you saw in black and white, you could tell which was which?)
Out in the country, at least in the U.S., some intersections between county highways have a single yellow or red blinking light, just hanging on some wires above the road. Yellow means caution and yield, while red means to stop. There are no other lights and no visual cues besides color to tell you which action you need to take.
there is a certain trendy link style in blogs that must drive the color blind crazy
Aha! Thanks Tedster - I think that's why my dwell time on blogs is so short, even if I find the content interesting.
I have no problem with non-underlined links that contrast with surrounding text if it is significantly lighter or darker. Colors like purple, lavender, and pink do not exist. They are all blue, sometimes gray for pink. Likewise if the text is dark gray and links are dark red they blend right in.
Regarding traffic lights, one accident involving an old horizontally mounted traffic light on a two lane in Connecticut. A lose/lose situation: stop and get rear-ended or proceed and broadside someone....
If you have any Windows programming experience, you should be able to knock up a program quite quickly. I'm away from home so I can't check at the moment. Alternatively, five minutes on Google may turn up a program to do this.
From memory, the API calls you need are GetDesktopWindow, GetDC (or possibly GetWindowDC) ReleaseDC, GetPixel and SetPixel. GetDC(0) may work to access the whole screen, otherwise you need to call GetDesktopWindow. It's been ages since I've used any of these so I may have some names wrong.
Kaled.
Over time I have changed the colors on my site to a very bascic white background. Almost universally I use Aqua as the color for any backgrounds where I want something other than white.
But I don't see it as Aqua, I see it as I think is light blue.
So why did I choose Aqua? Well, I know where it is located (physically) on my color picker chart.
The absolute worst for me is trying to read a "dark" font on a "dark" background.
Dark is VERY subjective!
The farther you get from black on white the harder it is for me to read.
White on black isn't too bad, until you try finding a blue link. Forget finding a visited link, they just seem to disappear into the background completely.
Let me put this in perspective of a real world experience. A friend once park my bright green 1 ton crew cab pickup truck (21 feet long) on the grass. I couldn't see the truck from fifty feet. Even with the chrome and and tires, etc, there just was too much green for me to differentiate the truck from the grass surrounding it. Only when I got down low so the truck was above the horizon, so to speak, and contrasted with the blue sky could I see it.
All my important text is white-on-black.
I'd say this can be a problem too. The contrast may be too stark for long reading times. I like to use a white background, but make the text a very dark grey.
Books are easy to read because the paper is yellow, not white.
I set up a custom colour scheme for this forum which uses light yellow for the background. I find it nicer to read than stark white.
Obviously yellow isn't going to be suitable for every layout.
About the Windows shutdown, if you look closely, you'll see that it never fades the screen to greyscale completely. There is always a layer of colour left. (I can still make out yellows for instance.) I'm not sure why they do that. (Use a wallpaper like the tropical island one to see it.)
As for 'dark' colours, these can differ a lot, depending on your monitor, and its location. Anyone remember Boulderdash on the Commodore 64? I hated the way it used a dark blue text colour on black. But if you turned out all the lights, you could read it. (I remember reading how some gamers worked that way.)
Color blind people still see color.
Kaled.
I set up a custom colour scheme for this forum which uses light yellow for the background.
One of the techniques I use a lot - and a black that is not quite pure black - often with a slight warm tint to it that does not register conciously. I think it make the pages feel, well, friendly.
I'd opt for using a plug-in for Photoshop like Vischeck [vischeck.com] (it's freeware) or I'd use their
free on-line service called Daltonize [vischeck.com]
As well, you can always use a colour picker like Color schemes generator 2 [wellstyled.com] (I find it awesome).
[PS. I am in no way related to both sites and I hope I am not breaking any rule by giving both urls. If so, please forgive me :) ]
[w3.org...]
Color brightness is determined by the following formula:
((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000
Note: This algorithm is taken from a formula for converting RGB values to YIQ values. This brightness value gives a perceived brightness for a color.Color difference is determined by the following formula:
(maximum (Red value 1, Red value 2) - minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) - minimum (Green value 1, Green value 2)) + (maximum (Blue value 1, Blue value 2) - minimum (Blue value 1, Blue value 2))The rage (sic) for color brightness difference is 125. The range for color difference is 500.
A good summary of the formula, and tool for testing two #hex ref's is at the excellent juicy studio [juicystudio.com]
hope the link is ok.
Decrease the contrast a little and my reading time goes down and comprehension goes up
hi monkeythumpa
this is interesting to note. On one of our sites we offer a variety of different styesheets - including some with grey background/black text and pastel background/black text. but we havent really had any feedback from real users.
What colour combo's do you find work best for you?
Thanks
Ben
Excuse me, please, if I grab the occasion to make you a question:
Do you find easier to read short phrase in short paragraphs? Is the longitude of texts and paragraphs relevant as a dislexic user?
If so, which one is best: Short / Medium / Long paragraps or a comination of all of them to avoid confussion?
Thanks (and sorry for highjacking a bit the colour blindness issue).
