Behind the pixels
I know last week I spoke briefly about contrast from a visual sense and how that effects an image, and draws a viewer in. In the course of doing that, I "discovered" there are different TYPES of color blindess. Under these types, there are underlying catagories "based on the number of primary hues needed to match a given sample in the visible spectrum."  So depending on the color blindness and the subcatagory of it, it will completely affect how an image will appear. The sub catagories are monochromacy, dichromacy, and anomlous trichromacy. I'm not going to go into the details on each, but rather the visual effects some of the subcatagories have on visuals - but if you're interested in more details, Google it.
This kind of blew my mind, because all that I've ever heard of is red-green and blue-yellow. So if you take a rainbow and how a normal person would see it, it would look like this:
If a person has no perception of red what so ever, which would be a type of dichromacy, and red would appear dark, almost like a dark brown:
If a person has no perception of green, it will also affect the ability to tell the difference in the red and green hues, which mean the yellow and blue pigments are the primary colors seen:
AND THEN if there is a total absence of blue pigment receptors the rainbow will look like this:
Fascinating stuff, isn't it? A bit mind boggling at the same time. But why is this important to consider, as a designer, as a developer? Because we put stuff on the web to be consumed, and we want it to be consumed by everyone and be accessible to everyone, and we can do that with contrast, "the percieved difference in colors that are in close proximity to each other" !
There are different ways to approach this. Some designers will start a design in black, white, and shades of gray. Others would use tools like graybit.com  or Color Scheme Designer 3  to make sure the color scheme would work. The latter sucked me in for a bit, as I played with it - good times.
I also tested some of our current feature graphics with Fujitsu ColorDoctor  to see how we've done with our contrast in the grayscale conversion, and I've noticed that we need to up the contrast on the background color, for some of them.
We've got a bit of work to do, but learning new (to me) stuff is fascinating!
*Image samples of the rainbows are from the wikipedia.com entry on color-blindness
VictoriaO 06000145NY Tags:  bueller illustrations color dropshadows graphics captions dosdon't callouts 1 Comment 3,210 Views
I've been training a new graphics person for our little graphics team over the past two weeks, and during that time, I've told him that we take the artwork provided with the submitted content and extract every ounce of personality from it.
At developerWorks, we want our tech art and screen caps to look like they came from the economics teacher (Ben Stein) in "Ferris Bueller's Day Off"... Bueller?... Bueller?... Bueller? ::snicker:: One of the great movies of the 80's.
Why?, you ask. Simple - we like things...well... simple and legible.
Let me show you what I mean. The top image is the one that was provided by the author, the bottom is the one created by the graphics team (read - ME.).
Which one is more legible? Is there sufficient contrast from the background color and the font color?
These are important in technical illustrations - if your reader can't read or understand your illustration, the point of it is lost.
Why did I remove the gradients? Aren't they pretty and make it more visually interesting?
Why didn't I use a dark background and keep the white text?
Other things to avoid in your artwork, besides dark backgrounds, white, italicized text, and gradients...
If it's there, we will remove it and the drop shadow that goes with it. Period. And with my example, that would mean some of the text would be lost too - hope it wasn't important.
Which leads me on to my next point - DROP SHADOWS
I realize that some operating systems have a drop shadow built in and your screen shots might have that - it's fine, we'll just crop it out. Not a big deal. What is a big deal is when you have drop shadows all over your screen cap and under your arrows, your ellipses, rectangles, etc. It's distracting, especially when it goes over important bits of your screen cap.
Notice the difference between the two? While it's certainly cooler to have the effect, at developerWorks, in our content, we're not cool - remember - we're that economy teacher in Ferris Bueller's day off...
Like I said - NOT COOL. (We don't REALLY look like that, and we're all actually pretty interesting, once you get to know us, but that's besides the point.)
Call outs work the same way - use neutral colors (gray) for the balloon/box/cloud/arrow, black text, 12 pt font, and no drop shadows.
Captions are also not needed in your artwork, but rather they should be in your text. Captions will be removed from your artwork and coded in.
And finally - what happens if you have any of these things in your content?
Simple - they will get sent back to you, with a note from your editor basically stating that the graphics people are mean, cruel people and want you to remove the unwanted elements from the noted screen caps. Now the first part about us being mean and cruel might not be in the note, but asking for new screen caps will be.
Trust me, mean is when authors submit 140 screen caps that are 80% covered in drop shadows that need to be removed. Cruel is when you spend 3+ days removing those drop shadows and then vowing to never do that again - and I haven't.