What's the best way to darken a color until it is readable?
I have a series of titles which have an associated color, but some of these colors are very light and any text drawn in them is unreadable. I've been messing around with HSB and I can't seem to get an algorithm down that darkens the color without making it look silverish.
I think I want to alter the saturation too. Is there a standard way of doing this?
With HSB, you generally reduce B to get a darker version of a given color, and possibly increase S as you go if the color looks too dull. This works for most colors except yellow (it ends up as an ugly muddy color), but only because there's no such thing as "dark yellow."
I don't know why you'd get silverish unless your starting color is white, but it's fair to say silver is "dark white," just like brown is "dark orange."
If you still don't like the results, don't change your colors but instead use black text on light backgrounds and white text on dark backgrounds. See Choosing high contrast text color (in relation to background color) dynamically.
If you convert the color to another colorspace, e.g. YIQ, YUV or better yet CIE-L*ab, CIE-L*CH, then instead of RGB's Red Green and Blue channels you end up with three different channels, where one is the intensity.
In YIQ, YUV the Y channel approximates the intensity and in Lab and LCH the L channel does this.
You can then easily reduce the intensity channel, then convert back to RGB.
For high contrast, I recommend changing the intensity until you have at least half a range contrast between the foreground and the background.
E.g. if you range is 0...255 then at least 127 difference in intensity channel.
Note: YIQ has the simplest conversion from and to RGB:
Y = 0.299 * R + 0.587 * G + 0.114 * B
I = 0.596 * R - 0.274 * G - 0.322 * B
Q = 0.212 * R - 0.523 * G + 0.311 * B
R = 1.0 * Y + 0.956 * I + 0.621 * Q
G = 1.0 * Y - 0.272 * I - 0.647 * Q
B = 1.0 * Y - 1.105 * I + 1.702 * Q
Edit: Using the W3C guideline
Contrast ratio: (L1 + 0.05) / (L2 + 0.05)
where L1 is the relative luminance of the lighter of the colors
and L2 is the relative luminance of the darker of the colors.
Contrast (Minimum): For regular text 4.5:1, for large-scale text 3:1
If the background is brighter, then use the Y channel of the background as L1 and the Y channel of the foreground as L2.
If the foreground is brighter, then use the Y channel of the foreground as L1 and the Y channel of the background as L2.
Notes:
If you are using a 0...255 range for RGB channels, divide them (or Y) by 255 before using in contrast formula, as the formula seems to be for the normalized range of 0...1
The contrast formula demonstrates that the darker the colors, the smaller the difference between the colors needs to be in order to achieve a high contrast. (Bright colors on black are easier to perceive than light colors on white.)
WCAG2.0 has a well researched and internationally agreed standard for what constitutes acceptable contrast, eliminating the subjectivity mentioned by Bevan.
There's a very good checker here that lets you tweak colours via the sliders until they're at the minimum required level. You're aiming for a 'yes' on the rght hand side, depending on what level of AA/AAA compliance you're aiming for.
http://snook.ca/technical/colour_contrast/colour.html
There is a link on there to more detail on the formula used to calculate the acceptable level.
"Readable" is a somewhat subjective measure, dependent on things like monitor settings, gender (most colour deficiency is in Males) and age.
You could take a slightly "brute force" approach by preserving the hue, forcing saturation to 1.0 and brightness to 0.5.
(As I recall from an article I read a couple of years ago, the amount of light going through the cornea of a 60 year old is under 25% of what used to go through at age 18. According to an article I found here, the figure is worse still - light transmission ranges from a high of 16% (1/6th) and a low of 6% (1/16th) depending on conditions.)
