Which Font Colour is Best?

[90DC]

Picture this. Website with a fair bit of white background. Which font colour would you choose?

I've taken a look at my website and am about to change all my black font to a mid-grey as i think it is more appealing and easier on the eye.

It is a lenghty change, but a simple one.

Does font colour really make a website look better? And if so, which ones go best on the old white background?

Please bear in mind my website is very text based.

Thanks!

 

[DesignerNick]

Surely you can simply change it in the CSS?

I personally like a Dark Grey than a Black as it takes the edge off.

A #333333 or #666666 will do the trick.

 

[90DC]

Thanks for this. I thought it took the edge off too.

 

[Kernowman]

Bit too light for me.

I prefer a cobalt or navy blue text which isn't as stark as black, yet isn't wishy washy either.

By the way, the picture link on the right hand side is broken, above the "We offer the following eco cleaning solutions;" text

 

[fisicx]

Black on white. always black on white. Use colours for your headers and other features but stick to 1em black for your content. No other colour combination has such a good conversion rate.

Concur about the CSS, it's a single line change so will only take a moment. If you aren't using CSS then you need to get this sorted, it will help in all sorts of areas.

 

[Dawg]

^^^
He's right you know.
Black on white with a reasonable sized font.

(In smartarze: it adds to the cognitive fluency. You don't have to work or think at all to get the information.)

 

[LicensedToTrade]

Bit too light for me.

I prefer a cobalt or navy blue text which isn't as stark as black, yet isn't wishy washy either.

By the way, the picture link on the right hand side is broken, above the "We offer the following eco cleaning solutions;" text

Yep, your source tried to locate the image at

http://b***cc.co.uk/images/find-icon.png/bmi_orig_img/find-icon.png

When it is actually located on your server here...

http://b***cc.co.uk/images/find-icon.png

EDIT: I've altered your domain so this doesn't appear on google results.

 

[danielmeade]

I think you are right to question this as black and white can be a little too bright for users reading a great deal of content. Maybe dim down the background colour instead of the white, a very subtle cream can make a huge difference without changing the look entirely. A deep grey for text is a sensible option too in my opinion. You may find it beneficial to take a look at other content sites like the times online and telegraph etc. Sites where they expect users to spend a lot of time. What are they doing?

 

[fisicx]

You may find it beneficial to take a look at other content sites like the times online and telegraph etc. Sites where they expect users to spend a lot of time. What are they doing?

Err, black on white - check the CSS:

body{font:62.5% Georgia, "Times New Roman", Times, serif;;  color:#000}

Same colour as Google, facebook, twitter, amazon and every other major website plus newspapers, books, magazines....

There has been loads of testing done on font colours and black wins every time. Try it. Change to grey and check your stats over a period of time. Bounce rate will increase and time on site decrease as it is far more difficult for people to concentrate.

 

[Paldan]

I would also prefer dark grey, since the colour may be combinated with any other colours and thus creating a nice combinations.

 

[90DC]

Bit too light for me.

I prefer a cobalt or navy blue text which isn't as stark as black, yet isn't wishy washy either.

By the way, the picture link on the right hand side is broken, above the "We offer the following eco cleaning solutions;" text

It is intended to be broken. I am in the process of sorting the pages out that will be linked from there (Although there is a link in my navigation bar that i will remove promptly!)

Thanks everyone. For now i will go with a mid grey on white, against the advice of some of you. (I'd like to test the idea) But i will reconsider this if i feel it makes a negative impact on page views and people contacting me too.

Thanks again.

 

[PhoneTrader1221]

I prefer black because it looks professional

 

[daveTwizzlebird]

black on white does present some accessibility issues for dyslexic readers or folks who suffer from photoscopic sensitivity. It may convert better but if accessibility is key then soften the contrast a little

 

[deniser]

We use a dark taupe colour. It is easier on the eye and looks professional IMO.

 

[bdw]

Black on white may not always the best answer. Other factors must be considered for readability such as text size and line height. In some case black on white is too much of a contrast so I would agree that toning it back to a shade of grey could be a better idea. I have however looked at your current settings and I would say that it may be just a little too light.

Regarding conversion, I am surprised to here that anything other than black and white lowers conversion. On print most people would not be able to determine the difference between dark grey and black?

 

[90DC]

Black on white may not always the best answer. Other factors must be considered for readability such as text size and line height. In some case black on white is too much of a contrast so I would agree that toning it back to a shade of grey could be a better idea. I have however looked at your current settings and I would say that it may be just a little too light.

Regarding conversion, I am surprised to here that anything other than black and white lowers conversion. On print most people would not be able to determine the difference between dark grey and black?

Thanks for this. I will change this as soon as i can.

 

[fisicx]

Regarding conversion, I am surprised to here that anything other than black and white lowers conversion. On print most people would not be able to determine the difference between dark grey and black?

A very dark colour then. The important feature is the colour contrast, as long as there is clear delineation you can get away with dark shades.

It really does make a difference though. I have a site which has lots of copy (5000+ words per page). When I changed the font colour away from black bounce rate increased. When I increased the font size bounce rate decreased.

With regards accesibility I agree that some dislexics need different colour contrasts (usually the page colour) and those with colour blindness have all sorts of problems with anything other than black: http://www.btplc.com/inclusion/Gettingonline/Accessible/Adviceforwebdevelopers/palette.htm and http://www.visibone.com/colorblind/.

 

[Probafix]

Anything like bright red will stand out and go well. you can go onto video effects and get a bar across the bottom although that can look cheap.

 

[bdw]

You'll have to enlighten me, I must be missing something. What has a video bar got to do with this?

Added: I understand the red is bad for colour blind people.

 

[lucyrussell]

Other way to expose yourself to suitable colour combinations that established companies and people use on the internet is to surf around and keep an eye out for popular sites. You can be sure one of the reasons why they're popular is because of the colour combination they use

 

[bdw]

That is simple but very good advice for all manner of website design questions.

.

 

[fisicx]

Other way to expose yourself to suitable colour combinations that established companies and people use on the internet is to surf around and keep an eye out for popular sites. You can be sure one of the reasons why they're popular is because of the colour combination they use

Or more likley because they have great content, simple navigation and are trusted.

Colour helps but only as a supporting element. Note also that some colour combinations no matter how great they look on your computer turn out to be shades of mud for someone with colour blindness and difficult to read for people with wonky eyes (like me).