Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I know, that color of the background and of the text should have enough contrast to each other. That rule in mind, blue (#0000ff) text on red (#ff0000) background should be fine. But I get the feeling that's not good. What should be considered, for choosing colors for text and background? Does it change anything, if the background actually is a color gradient?

share|improve this question
    
Possible duplicate: graphicdesign.stackexchange.com/questions/19/… –  e100 Jan 20 '11 at 19:11
    
I don't think so. I said, that contrast doesn't seem enough to pick a good color-combination, or is it? What else is to take into account? –  Mnementh Jan 20 '11 at 20:30
    
Contrast should be high but not too high -- and the answer to the other question gives an optimal value and tools. But there's certainly more material that could be added. –  e100 Jan 20 '11 at 21:35
add comment

3 Answers 3

up vote 4 down vote accepted

that color of the background and of the text should have enough contrast to each other ... blue (#0000ff) text on red (#ff0000) background should be fine.

Absolutely not! :D Your instinct it is right to say that it doesn't feel right.

What you need it is to learn a bit about theory of colours.
Interaction of Color (Book) - Google book link
Color-theory-for-digital-displays-a-quick-reference
http://www.colorsontheweb.com/colorcontrasts.asp

I do not suggest to go for Hue contrast normally they are awful combinations because they are too vibrant colours. It is much better go for Brightness and Saturation contrast, or at least mix the Hue contrast with the Brightness and Saturation.

When you choose your colours make quick check of the contrast by transforming your coloured design in a desaturated way (black, grey and white) and check how well readable it is (you can achieve it with Photoshop or some browser addon). Try with your Red and Blue and you will see.

Here some link for testing contrast (it is a pity that you cannot select the value):
http://www.rotorbrain.com/foote/interactive/hacks/colorinteraction1.html
http://www.rotorbrain.com/foote/interactive/hacks/colorinteraction2.html

And do not forget you have to consider that exist people with color blindeness as well, so it is important to chose your colours right.

share|improve this answer
add comment

Rule of thumb is to provide light background and darker color text. Here both can be different shade of same color or different color with the good contrast.

Important thing is to remember what kind of text you are working with. Are you talking about Body text where the font size is 10 or 12 px ? Are you talking about Header text with H1 , H2 tags and large size fonts ?

If you notice almost always small font should be darker color and large font can be but not necessarily light colors.

At the end of the day we are all developers and are not really trained for this so I tend to follow inspire from good website like in this example look at Microsoft.com home page. They have it all....small fonts , large fonts and gradient back ground.

Bottom line you would want background to not over power the font color. At the end the main purpose of the text is for user to read.

share|improve this answer
add comment

Rule of thumb "Lighter background and darker text" doesn't always apply. Studies tell, that while one remembers text slightly better if its black on white background, he/she reads it faster if it's white on black background.

Also, keep in mind that most users have their monitors brightness level set up way too high for human eye. Dim background offers a pleasant experience, while straying from the widely used standard of white background. I would bet average user "likes" the all-damaging white background more, because one is so used to it that anything other than that is "odd", thus harder to use.

High contrast bleeds light, so instead of black/white, you should always aim for light grey/dark grey. There's standards for suggested minimum/enhanced contrasts for web in Opera: Web Standards Curriculum. Section 26: Accessibility testing stating the following:

Accessibility Guidelines 2.0 draft:

1.4.3 Contrast (Minimum): Text and images of text have a contrast ratio of at least 5:1, except for the following: (Level AA)

  • Large Print: Large-scale text and large-scale images of text have a
    contrast ratio of at least 3:1;
  • Incidental: Text or images of text that are part of an inactive user
    interface component, that are pure
    decoration, that are incidental text
    in an image, or that are not visible
    to anyone, have no minimum contrast
    requirement. Note: Success Criteria 1.4.3 and 1.4.6 can be met via a contrast control available on or from the page.

1.4.6 Contrast (Enhanced): Text and images of text have a contrast ratio of at least 7:1, except for the following: (Level AAA)

  • Large Print: Large-scale text and large-scale images of text have a
    contrast ratio of at least 5:1;
  • Incidental: Text or images of text that are part of an inactive user
    interface component, that are pure
    decoration, that are incidental text
    in an image, or that are not visible
    to anyone, have no minimum contrast
    requirement.

I would only use white background and black text if my client wanted it. If it was up to me, we'd be changing the standards as I write.

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.