2

I'm in charge of a website that looks more or less like this:

enter image description here

It needs some work, but I'm mostly worried about defending one aspect of the design: keeping the text black or at least grayscale. My main argument for this is because color is used for links and buttons to make them stand out from text that is not interactive. However, my clients want to "keep the website from looking like a black and white term paper."

What research is there on the effectiveness of keeping body and headings black/grayscale vs. colored to help distinguish them from links? What is generally considered best practice when deciding to make textual elements colored?

This question may generally overlap with design, but to keep it on topic I'm specifically concerned about usability, accessibility, etc.

Improve this question
1
  • I'd suggest the white background needs to be slightly more opaque because the dark lines/edges of the trees and building features are "interfering" with the lines of the text. As Devin suggests, contrast is king!
    – kwah
    Commented Jul 19, 2016 at 9:43

2 Answers 2

Reset to default
9

While the final color combination will depend on the UI design, branding specs and other considerations, the keyword is CONTRAST. and as such, you're on the right path, black on white is the maximum contrast you may look for. However, there's another consideration to keep: eye strain. Undoubtly, staring at a pure white screen for a long period of time will cause a certain degree of eye strain, depending on many factors ( health, age, amount of rest and so on). So it's quite common to choose an almost pure white (such as #f9f9f9 ) to reduce brilliance a bit.

Anyways, as far as colors and contrast goes, take a look to Applying Color Theory to Digital Displays, which has some explanations and a lot of examples for your question

Improve this answer
1
  • I was also curious about hue—contrast aside, usually we associate hue with links (e.g. grey text is not interactive, but colored text even of the same value is). I'm worried that colored headings might look like links for example. I've rarely seen colored headings that aren't links in well-designed websites. Is there any research treating that issue specifically?
    – intcreator
    Commented Jul 20, 2016 at 16:38
2

Both answers here are great, however I'd like to add if you're considering Usability, consider to weigh the factor of Colour Blindness as well.

There's a great chrome app called Daltonize: http://www.daltonize.org/2010/05/chrome-daltonize-color-accessibility-in_13.html

It's also quite useful to test contrast levels.

Improve this answer
1

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.