Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

By how much should the color yellow be darkened to get the same contrast values as other colors displayed on a computer screen?

This is something that i would do by sight, but i was wondering if there aren't any rules around this.

I created 6 rows of blocks in 6 different colors. Each row has a light, normal, dark and text block.
The second block in each row is the color reference and is the color in its brightest form(#FF0000, #FF00FF, #0000FF, ...).
The first blocks are lighter color codes and the third blocks are darker color codes. Each is of these is lighter or darker with the same amount as the other colors.
The fourth block is the same as the first block with text in the color of the reference block.

color table

As you can see, yellow has the smallest contrast in comparison to the other colors, even though the colors are proportional.
To get the yellow text near the same contrast as let's say green, you already need to change the text color from (255,255,0) to (245,245,0).

Why is yellow on white so low in contrast and by how much should yellow be darkened to get the same contrast as the other colors?

share|improve this question
2  
Try passing the hex codes through something like snook.ca. –  JonW Feb 20 at 14:12
1  
You are talking about contrast, but is obvious that a light colour contrasts against a dark colour much more than against a light one. So if you plan on using yellow, you should think about darkening the background. –  PatomaS Feb 20 at 14:30
    
You may find that shifting towards beige/brown will give you more appealing results (unless, of course, you're a fan of that poopy-yellow color). –  cimmanon Feb 20 at 15:30
    
Possible duplicate of ux.stackexchange.com/q/16679/687 –  Danny Varod Feb 28 at 12:23

1 Answer 1

up vote 6 down vote accepted

Matching Brightness of Two Different Colors

You can calculate the perceived gray-scale brightness of a color on a “typical” monitor with the following formula:

Y = 0.2126 * (R/255)^2.2  +  0.7151 * (G/255)^2.2  +  0.0721 * (B/255)^2.2

So, for example, high saturation pure green (0, 255, 0) has a brightness of:

Y = 0.2126 * (0/255)^2.2  +  0.7151 * (255/255)^2.2  +  0.0721 * (0/255)^2.2
Y = 0.7151

For shades of yellow, I’ll assume you mean colors where R = G, and B = 0. Let X = R = G. So the brightness of yellow is:

Y = 0.2126 * (X/255)^2.2  +  0.7151 * (X/255)^2.2  +  0.0721 * (0/255)^2.2
Y = (0.2126  + 0.7151) * (X/255)^2.2  
Y = 0.9277 * (X/255)^2.2

Solving for X:

X = ((Y/0.9277) ^ 0.4545) * 255

So to match the brightness of green (Y = 0.7151):

R = G = X = ((0.7151/0.9277) ^ 0.4545) * 255 = 227

Or, an RGB of 227, 227, 0. Pretty close to what your eyeballs told you. It’s never exact in any case because monitors vary from one to another.

Matching Contrast between Two Pairs of Colors

Two colors with the same Y value will appear equally bright (except for monitor variations). To get two pairs of colors with equal brightness contrast (e.g. to get green text on a greenish background to be as legible as yellow text on a yellowish background), you need to calculate and compare the contrast of each pair. To get contrast, calculate the Y’s for each color in a pair (call them Y1 and Y2), and calculate the brightness ratio C for each pair:

C = (Y1 + 0.05) / (Y2 + 0.05)

For comparing brightness ratios, always put the brighter color (larger Y) on top.

To match contrasts, adjust the colors until the C for both pairs is equal. You have four colors, so there are a lot of options. For example, in your table, the red “Foo” is 255, 0, 0, so Y2 = 0.2126. It’s pale red background is 255, 221, 221, so Y1 = 0.7873. The brightness ratio is:

C = (0.7873 + 0.05) / (0.2126 + 0.05) = 3.19

For the yellow “Foo” (255, 255, 0) on the pale yellow background (255, 255, 221):

C = (0.9804 + 0.05) / (0.9278 + 0.05) = 1.05

The lower the contrast, the harder it is to read, which is why your yellow on pale yellow is harder to see than your red on pale red.

One way to match the contrast of yellow to your red is, as you suggest, to darken the yellow. Cut-and-try (because I’m too lazy to derive another formula) finds that 146, 146, 0 does the job:

C = (0.9804 + 0.05) / (0.2720 + 0.05) = 3.20

The darkened yellow’s Y (0.2720) is brighter than your red’s Y (0.2126) because you’re showing the yellow on a brighter background (0.9804 vs. 0.7873)

BTW, for accessibility, W3C recommends C of text on a background be at least 3.0.

Why is Yellow so Bright?

The human eye evolved to be most sensitive to the strongest light frequencies found on Earth in daytime. That would be light from the sun. The sun is strongest around the yellow frequencies (that’s why it looks yellow), so that’s why yellow appears brightest to us. As an added kicker, LCDs make yellow by shining light through two subpixels rather than one (e.g., like green does). Second brightest are the frequencies near yellow –green, cyan, and orange, so high-saturation values of these contrast poorly with pale colors and well with dark colors. The frequencies furthest from yellow, blue and red, appear darkest, and their high-saturation values contrast relative well on pale colors and poorly on dark.

I’ve more details on colors and contrast at Breaking the Color Code.

share|improve this answer
    
I do wish SE would let met hand out a +10 now and again. Will have to settle for the +1 until they do... Thanks for this answer and the link to your blog. Helped me a lot as yellow is my favorite color and it always poses problems for me when I try and use it on a site. –  Marjan Venema Feb 20 at 18:41
    
+1 from me, but to be honest, I find your article too long. Just the Why is Yellow so Bright? paragraph would have done it (plus the link for further information). –  Mike Lischke Feb 21 at 8:05
    
Thanks for this very awesome answer! –  jan Feb 21 at 11:41
    
W3C recommends 3:1 for large text and 4.5:1 for regular text. –  Danny Varod Feb 28 at 12:25

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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