: What colors to choose for displaying blocks of texts on a colored background? I know, that color of the background and of the text should have enough contrast to each other. That rule in mind,

@Steve758

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.

Vote Up Vote Down

@Sherry646

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

Vote Up Vote Down

@Pope1402555

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.

Vote Up Vote Down