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.

I've built this BBC feed which people find nicely styled (please ignore the animation glitch - I'm working on it!). However, people have been telling me (and I've felt it also) that the colors hurt their eyes.

Do you think it's the colors that are the problem? How can I make the feed more "gentle" on the eyes?

share|improve this question
    
The colors of the black background where the default content is? Other than that it looks fine. –  Matt Rockwell Oct 31 '11 at 17:37
1  
The red is a bit harsh, always use red sparingly and try to avoid super saturated reds. –  Ben Brocka Oct 31 '11 at 18:21
    
The only red I am seeing is in the code and used for strings. The red used for these purposes is a subdued red. Is there something I am not seeing? –  Matt Rockwell Oct 31 '11 at 18:39
    
@MattRockwell It's in the Javascript not the CSS unfortunately –  Ben Brocka Oct 31 '11 at 18:47
    
Then I guess it doesn't show up at all for me, in Firefox and IE9. That might be worth looking into. The "black" area is just black with white text that reads "BBC" –  Matt Rockwell Oct 31 '11 at 19:08
show 1 more comment

5 Answers 5

up vote 28 down vote accepted

In and of themselves the colors are fine; I think it's the particular combination of colors that you are using. The red rgb(192, 55, 47) is at 46% luminance, and your eyes will adjust to that accordingly; but the white text is 100% luminance, which requires your eyes to adjust slightly. On bright enough monitors, it can actually be kind of jarring, although I wouldn't say it's all that bad. If you want to stick with a black background, I would probably just dial down the white a bit, somewhere between 46% and 78% luminance, depending on your audience.

enter image description here
This is 68% luminance. Note that the red text used is all the same color.

share|improve this answer
2  
interesting - that second option is noticably easier to read. nice example. –  Jon White Nov 27 '11 at 6:35
add comment

If there's one problem with the design, it's that it's Loud. I don't just mean the colors. The fonts, the transitions and the gradients are all very bold and cross into flashy.

I took the liberty of forking your JS Fiddle, here's my fiddle. enter image description here

In addition I noticed your font didn't anti-alias well on chrome so I replaced it with Impact in my fiddle; Impact is certainly loud but it displays a bit more smoothly and I think it's quite a bit easier on the eyes. I changed the synopsis font to Helvetica, anything more than a headline should be a simple, non-bold easy to read font, IMO Battersea doesn't cut it even for a relatively short chunk, but part of that may just be because of how it looks in Chrome.

I made the red less saturated; it's not quite BBC red and I'm not 100% happy with it but I think it shows that red can be used in the same place without being so hard on the eyes. I killed the gradient on that background; not everything needs a gradient, just consider that.

I personally found the transition effect very bothersome but there was no easy way to tinker with it. The shrink AND slide is just a bit much IMO.

share|improve this answer
    
Note that font antialiasing of Chrome has been changed in the last couple of months or so, see my answer to a question on SO. Now the problem is with text-shadows on bold fonts. –  Camilo Martin Dec 20 '11 at 2:00
add comment

Change the background color to a dark gray ... maybe something like: #595855 and see if that helps.

share|improve this answer
add comment

I think it is clearly a problem with the combinations. White on black is harsh on the eyes. Red is often harsh, especially against black or white. I think if you were to make the background less black and the white less white - that is, take the intensity down in both cases - you would be fine.

Overall, as per @stoicfury, I think the red is probably OK, but you need to adjust some of the other colours around this to ease the contrasts. It is one of those oddities that both low and high contrast between text and background are hard to read. The need is to get it somewhere in the middle.

share|improve this answer
add comment

It's not the particular colors in this case, but the contrast. A dark background on screen with 100% white type is the hardest on the eyes of nearly any combination in terms of contrast. That's why back in the day we had amber and green type on black screens.

In your case, the solution is to decrease the contrast. The simplest option is likely to knock the white back a bit to perhaps 60-80% white (ie, light gray).

You could also consider using a sans-serif face. Serif faces on dark backgrounds don't always work as the little details of a serif face tend to become highlighted more than they need to be.

EDIT: Somehow I completely missed stoicfury's answer. That's the answer to go with!

share|improve this answer
add comment

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.