4

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?

4
  • Hi Mark, welcome to UX! This is a community for UX designers and researchers, so assume two things: we don't know C#, and we don't think in algorithms. Expect a great answer telling you why to darken a colour and what approach to use, but no code explaining how to do so. If you're looking for code, I recommend asking a separate specific question about code on Stack Overflow.
    – Rahul
    Jan 29, 2012 at 11:46
  • 2
    This will not answer your question but very relevant: the contrast rebellion Jan 29, 2012 at 19:11
  • For background, why are you using color coding on your titles?
    – Erics
    Jan 30, 2012 at 0:15
  • I don't think this is a UX question. Jan 30, 2012 at 14:02

4 Answers 4

4

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.

1
  • I was able to work something out where if the brightness is too high I reduce it. Its a fairly naive implementation because its sort of guess and check with RGB, but it visually gets very nice results.
    – Mark
    Jan 30, 2012 at 0:19
8

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:

  1. 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

  2. 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.)

1

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.

0

"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.)

4
  • Bevan can you please provide some link to that statistic that the amount of light going through the cornea of a 60 year under 25% of what it used to be at the age of 18,I find it interesting
    – Mervin
    Jan 29, 2012 at 6:25
  • I read that statistic in a magazine article (Wired?) a couple of years ago, and it stuck in my brain as I'm halfway between 18 and 60 and noticing changes to my vision. A quick google found this link (agingeye.net/visionbasics/theagingeye.php) which gives the amount of light as between 16% (1/6th) and 6% (1/16th).
    – Bevan
    Jan 29, 2012 at 6:45
  • Thanks ! I was just wondering since its always useful to have a reference
    – Mervin
    Jan 29, 2012 at 8:02
  • @Bevan edit that into your answer! :)
    – Rahul
    Jan 29, 2012 at 11:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.