Black on White or Grey on Grey?

100things

#1

Second discussion on the table for our November theme is one that I think about often in my work when I’m helping clients to customise their forums.

Susan says:

Black text on white is the most readable.

My personal experience is that dark grey on light grey is more readable because the contrast is less jarring.

Take our forum (out-of-the-box Discourse) vs this forum as examples.

What are your thoughts?


Help! I need your ideas / questions / thoughts
#2

So funny you chose that example as I was reading that line in the book on my iPad, which I have set to white on black background, because I find it less bright. The extensive white light on screens becomes hard to look at after a while. I’m with you to some extent with the grey on grey as long as the contrast ratio remains high.


#3

I had wondered the same thing, so I decided to have a quick look around the web for some research on the topic. Turns out, it is damn difficult to find any sort of empirical test that consider BOTH readability AND eye strain. In terms of sheer readability, the research is pretty clear: Black on white always wins, and particularly so with participants with less than perfect vision.

At the same time, however, pure black on white puts a huge strain on our eyes later in the day, as bright white light pours from our monitors. It can be downright jarring to read anything after the sun has gone down, if the text is pure black on a pure white background.

It is also worthy of note that many dyslexic users are sensitive to brightness and very high contrast, which can cause words to blur together (according to uxmovement.com’s article, the source link, however, is broken.)

I think that as long as you adhere to the AA (Contrast ratio of 4.5:1) or AAA (Contrast ratio of 7:1) criterion set by W3.org, you can safely venture into the proverbial and literal gray area.

I found this website to be the quickest and easiest way to calculate the contrast ratio.


#4

This is interesting @DavidSkodt. I am not dyslexic but have floaters and I find brightness and high contrast exacerbates how distracting they can be.


#5

Well, there we go! Another good reason to soften up the contrast just a little bit.
Going into reading up on this, I actually thought that pure black on white would be optimal,
and that people just had to reduce the brightness on their screens.

Live and learn!


#6

Personally, I prefer Black on a little bit of Grey(just not totally white).
Because it looks like a bit more soft to eyes compared to Black on All White.


#7

WebAim also has a great contrast checker that provides compliance across all three WCAG categories https://webaim.org/resources/contrastchecker/