One Common Blog Design Mistake You MUST Avoid
Here’s a mistake that I see coming up all too often in the blogging world: using white text on a black or coloured background.
The most readable combination is black text on a white background (in practice, this is usually very dark grey text on a very light grey background, to avoid the contrast being too glaring).
So why are combinations other than white-on-black such a problem?
Because they lose you readers.
Think of it this way: are you going to stick around on a site which is hard to read?
Just as a too-small font will send readers away, tricky colour combinations will quickly have them decide that your site isn’t worth the effort. Plus, particularly weird and wacky combinations (white on blue, dark red on light green, etc) will make your blog look amateurish.
Why So Many Bloggers Get This One Wrong
Some free WordPress themes default to white text on black, or white text on colour. Here are just a few examples:
The MNML theme:
Of course you can choose a theme which has a dark background, but make sure the background of the content area is light.
Here’s a good example of how a dark background can work, using the Hybrid theme:
Can’t You EVER Use White on a Dark Background?
Using white text on dark backgrounds as a highlighting tool is a smart way to call out important elements that users often scan.
– Anthony T, When to Use White Text on a Dark Background, UXMovement
It’s fine to use white text on a dark background for elements like:
- Post titles / subheadings
- “Buy now” buttons
- (Short) calls to action
The key is to keep the text to a minimum. Reading a couple of white words on a dark background is fine; reading a couple of paragraphs isn’t.
Bottom line: Use a theme that has black (or very dark grey) text on a light background.
I’d love to see your examples of hard-to-read sites – drop a comment below to let me know about any that use weird colour combinations.
Browse all articles on the Blog Design category
20 Responses to “One Common Blog Design Mistake You MUST Avoid”
I like the common error #2″
Using white text on dark backgrounds will keep readers focus on the contents. The readers will enjoy the text and do not forget not to put much ads because it will distract readers attention.
I used to have data on this for display ads that we split tested. Don’t have it handy, but as I remember “white on black” did about 2x better.
thanks for your writing. I am a blogger and I always want to have good traffic for my blog. After reading your writing today, I realize that I will have to change some points for my blog in order not to create an attractive niche. I hope that after I created my onw niche, more readers will join it.
Noa, the backlight can make whites quite glaring (which is why a light grey or off white is often preferable) — but I’ve never come across a web designer saying that a dark background and light text is comfortable.
It may well be the case that a few individuals find this more readable, but the most popular combination for MOST people is a very dark grey text on a very light grey background (what you’d look at and describe as “black on white” even though it’s not pure black and white).
I remember back in my early time of blogging, I ever try any color combination of text and background. But after all, dark or grey with hex code #333; as h5bp recommendation, in a white background is the most combjnation I use for years now.
Thanks for the write up Ali 🙂
Awwww… You reminded me of my early days of blogging where I would do the exact same thing that you are telling to avoid and thank God I soon understood my mistake. It is a creative post for those who are just stepping into blogging or are not aware of much things about blog design. Good job.
This old and dead rule of design of white paper black text and not black paper white text is true on paper in a screen the talk about is HARD to read on a dark background is bullshit, ‘cuz (guess what) the screen has backlight what actualy mades more confortable to the lector a dark background and a lighter text;
Wow, looks like I’ve hit on something that bugs you guys too!
@nordie — Very good point about accessibility. As you say, it’s not hard: keeping things simple is best for ALL your users, including those with dyslexia, impaired vision, or any other difficulties that might make it even harder for them to read your text.
@Wilfred — I agree this is a problem with older websites (it can look a bit 1990s!) which is another reason bloggers should avoid it. You don’t want your site to look like it’s not been updated in 15 years.
@Ryan — Images and other formatting can definitely help make posts more reasonable.
@Paul — I agree it’s probably not QUITE as “black and white” (ho ho) as I’ve presented it, but I’ve never personally come across a site with easily readable white-text-on-black.
This is what I did for one of my sites where I wanted a dark feel:
— the front page has a black background, but the rest of the site uses white for the central post / page backgrounds.
But if you’ve come across sites where white-text-on-black seems to be working well, do let me know!
White space looks attractive, as you mention — but it doesn’t distract from text, just creates a sense of space.
I think a glance through the comments here shows how much people dislike reading white on black!
I agree with you. White text on a black or coloured background may be used occasionally in headers – but it looks crappy in website body. I know it completely puts me off.
Great tips. I couldn’t agree more. I personally dislike when blogs use white text on a black background, it just feels so unnatural and difficult to read after a while.
Matthew Kaboomis Loomis
Great to see a writer like you taking design into consideration. You will be happy to know that my blog does not make this common mistake.
Thanks for getting this message out to bloggers.
When designing your website, it’s important to remember that one of the most important aspects is that the reader can easily read your content and navigate without any difficulty. Great post. In my opinion, less is more. A clean theme and layout similar to what you have here will produce better results than a layout with too much going on.
This is one of the biggest usability fails for many webmasters. Last time I had a dark background and light text was in 2003. I was still a beginner and some more experienced webmasters advised me to use the opposite setting. I never looked back since.
Paul Alan Clifford (@PaulAlanClif)
My blog is “right” according to you, but what evidence do you have that “they lose you readers”? I buy that hard to read blogs will lose readers, but isn’t the eye attracted to light? Won’t the eye be attracted to a large white background more than the text itself?
Done right, is there any way to have a dark background with light text (say for a gothic-themed blog)? I just don’t think it’s as hard and fast as a simple “always black text on a white background unless it’s a short CTA or navigational element”.
Ouch. White text on a black background is rough on the eyes. Go with the easy to digest dark text on a light background.
Some bloggers go with cheap themes while others try to stand out from the crowd by being different.
This is one area where you want to go with the tide.
I would add that going light on images is another design mistake. Some of the most popular sites on earth – like the sensationalist UK Sites – go HEAVY on images and fairly light on text.
People need eye candy. Serve it up. This is why I have been posting 730 pixel wide images of my current trip around the world to my last few posts. An eye-catching part of my brand.
Thanks for sharing!
I have always seen in older websites the clash of colors. I am in the process of redesigning my site and so this post was very relevant to me. I have noticed the dark text on the light grey background or dark text on a light background seems much cleaner.
I have been looking at sites to help me determine, but that is only my opinion. so it is really good to have this article confirm what ii am seeing.
Hey Ali agree with you, I prefer white background with black text. Also text should be simple font-family not with heavy italic or bold….
Like you mentioned if we want can try dark background being light background at text area…
Something that many bloggers fail to consider is “accessability”. Not all people have 20:20 perfect colour perception and vision. White on black (Or brown on brown etc) can actually cause issues for readers and they wont want to stay. Nor will text being too small (really anything below 10pt and VI people wont even stick around).
Also with regards to animated imagery – there are certain colours and rotations that can trigger off epilectic fits. In the UK, news reports have to put a warning ahead of any footage where “this footage contains flash photography/flashing images” to allow those who may be affected to turn over etc. The designers of the moving London Olympic Logo were criticised for having the animation move at the cycling limit that can trigger fits.
Keep it simple eh: black on white, not too small, not to big, and no flashing images. it’s not that hard
Good points on consistency, Shawn. And you’re right that design in general is hugely important.
I’ve seen this text-colour issue on a fair few blogs by new bloggers (I won’t name and shame any!) I think it happens because people want to make something “eye-catching” or “different” but they don’t understand the fundamentals of usability.
I have never encountered such a problem. I think that(these days) design is one of the most important factors. People will not stick around on poorly designed blogs, websites, videos or music. Nothing. They simply won’t stick around because something better is out there.
I think another thing that could have been mentioned was site-wide consistency. If you had a forum community, photo gallery and blog on your website what would look better, different themes across the site or one unified theme? I’d always go with the latter. It’s what I did with my website, StepSpeak and I don’t regret spending 75$ to have the themes match.
Great article. Very insightful 🙂
Comments are closed.