6

Latest UPDATE :

After days of searching without a single conclusive (not even close) option or study regarding the topic I decided to create my own survey to narrow it down. This survey is only for GD users.

I've created an entire webpage for it and really hope it turns out ok. The options I have listed in this survey come from different (smaller) studies and opinions.

PLEASE take the time to complete this, it has only 2 input fields and a 1 out of 10 options selection.

As soon as I have enough votes to create statistics, they will be posted on the page and announced here.

The survey page


Original post :

While designing my own website, the articles section to be exact, I thought about creating a function that simulates the Reading Mode on Android/Samsung devices.

I want to keep it as simple as possible, therefore my function will be a jQuery UI function that animates the background color to warm it up and font color upon user interaction.

[from update_2 below] I can also adjust my function to have the reading mode adapt to the date and time, considering the difference in lighting between seasons and, say, 3 stages of the day.

Is there a study/theory regarding the best background (yellowish) color and font color for reading ?


Update_1

Zach Saucier I don't agree that color and font combination depends on the culture. Eye strain has been associated with blue light emitted by digital display devices. Since that, a lot of apps have been developed to apply a "filter" that reduce blue light intensity.

Glarminy.com has studies on this and they also say:

Depending on your background/text color choice and digital screen model it may “filter” up to 75-95% of blue light as compared to black text on white background (estimate based on LEDMuseum and f.luxometer data).

From the above, I can't control the user's digital screen model but I can do something about the background/text color.

enter image description here

Ryan As you said, I am trying to give users the best possible experience since extensive reading will induce eye strain. While searching up and down the internet last night, some studies say that "Best color choices have low blue light content: reds, oranges, or yellows for text and black for background."[Also from Glarminy.com].

But I'm not going to change the background color to black since that seams a little too extreme. I've also seen yellowish backgrounds with grays from green text colors.

PS: Word 2013 apparently has a Reading mode function that turns the "paper" to sepia [among other things]:

enter image description here


Update_2

I've got from f.luxometer to the f.lux website. It's a software to make your life better, as they put it. "It makes the color of your computer's display adapt to the time of day, warm at night and like sunlight during the day."

Also, their website is kinda'extreme with the background color but it's so much easier to read. Just try it, read the text from their homepage and then switch to another tab with black on white text. Your eyes (at least mine do) will feel the difference.

I can also adjust my function to have the reading mode adapt to the date and time, considering the difference in lighting between seasons and, say, 3 stages of the day.


Update_3

After searching and reading a lot about it, I came to the conclusion that most of the apps simply add a sort of Sepia Filter with click through property over the document you are reading, therefore what I did is:

  • I took a screenshot of my website and took it inside PS
  • Added a Sepia Photo filter of about 20% Density over it
  • Used the Eyedropper tool to get the new colors from the body background and container background so that :
    • #fff turned to #f1ece8
    • #ebebeb turned to #ded9d6

And it looks something like this: enter image description here

It's "OK" for now, till I find a better approach to this..


Side-note (kinda)


While doing my research, I found a study from Chiba University, Dept. of Design & Architecture conducted on 146 undergraduate students regarding Effects of background colors on user's experience in reading website.

In one of the tests it would show you a website with a background color (each student got only one of the five : white, red, green, blue and yellow) and were given some tasks to do on the page.

After all the tests, they were asked in a form how much time they think it took them to complete.

Here is a time error chart for each color (the time error in yellow was significantly smaller than all others) and the entire paper

enter image description here

22
  • 1
    The "best" color and font combination depends on the culture, light, device, etc. and thus I'm voting to close this question as opinion based Nov 27, 2015 at 0:30
  • 5
    @ZachSaucier I disagree that there's no best option. Culture has little to do with how light is perceived. Light and device is more of a factor but it seems really silly to me to not consider the best combination on account of the consumer probably not looking at it on a calibrated device anyways.
    – Ryan
    Nov 27, 2015 at 4:12
  • 4
    There is no 'best'. There is, in general, 'not enough' and 'too much' contrast between fore and background colors. What those specific lines are in the contrast scale will differ depending on context and who you ask.
    – DA01
    Nov 27, 2015 at 19:29
  • 2
    @DA01 While there might not be a 'best' way of doing this, there certainly is a better way. I only left aside the fact that I don't know it and started searching for it. And since our eyes are biologically the same and they all react in one way or another to blue light emissions...you get my point.
    – Alin
    Nov 30, 2015 at 14:09
  • 2
    Since you're trying to test readability in your survey, I would highly suggest changing the text on your sample image to English instead of using the Lorem Ipsum.
    – Leslie P.
    Dec 1, 2015 at 21:15

2 Answers 2

4

Alin,

Disclosure: I came across your question because I am associated with Glarminy to which you referred in your question. (I don't know anything about web design, though, so I hope this is not completely useless).

I find readability and text/background color choice an important topic and most of the time a neglected one!

I'll try to say briefly what I know and think might help you make your decisions (if interested in a more thorough review with references to research papers see this post.

It appears that by choosing colors with low blue light content you are on the right track, but it will be difficult to find a "one-size-fits-all" solution because our eyes differ.

Our thresholds to discomfort glare (what sooner or later leads to computer eye strain), and is essentially what you are trying to reduce/avoid vary due to the fact that we have different levels of Macular Pigment Optical Density (MPOD). See "MPOD Score" in the image below to get an idea of its distribution (US population).

Macular Pigment (MP, aka yellow spot) is a filter in the eye that filters blue light to protect photoreceptors from damage.

People with high MPOD (MP absorbs/filters/blocks more blue light) will prefer white/lighter background while those with low MPOD will prefer background with lower blue light content.

This is why the experiment you are doing won't be conclusive (as was for decades the case with the research on whether yellow tinted glasses improve vision or not - now it is clear that it depends on each individual's MPOD). That is probably also why some people can't stand f.lux, while others love it.

What I am trying to get at is that your idea to give your users an option is a good one. It will cater those with high MPOD (black on white) and lower MPOD (black on yellow). If you wanted to improve on that you might give your users the option to increase or reduce the blue light content of your background and let them determine, what feels most comfortable. (But that is probably difficult to implement?)

I hope this is helpful.

3
  • Hey there, I've been waiting quite a while for this answer! Thank you for taking the time to write, I highly appreciate it !!! While implementing a slider that slightly reduces the blue light from my background might be more difficult to implement, now that I have more info on the matter I am more than willing to stick to this today and create a script for it. I want to give my readers the best experience they can get from their devices. I don't want my decisions to be based on how hard it is for me but how easy it will be for my visitors.
    – Alin
    Jan 13, 2016 at 10:12
  • Also, if I am not asking too much, I would like to write an entire article about this and I think it would also be a great idea if I could do a little interview about Glarminy, so, if you would be willing to answer some questions, please write back so I can give you my email address and we can get in touch. Thank you once again !!!
    – Alin
    Jan 13, 2016 at 10:23
  • Alin, I'd be happy to answer your questions. Sorry for late response. You can contact me via glarminy.com/contact glarminy.com/contact.
    – Uros
    Feb 1, 2016 at 16:30
3
+50

After all the research (part of which I added in my question) and the decision of conducting my own Survey, the results so far, after 150 votes (and still counting) are:

#1

enter image description here enter image description here

Some people have also commented that while during the day, they prefer the writer2001.com #1 option (the one with 28 votes), during the night, they will change to a light font color on dark background.

Some argued that the green (mint) one is refreshing and easy on the eyes, attention grabber but not disturbing. But not too many agreed (only 9 people) I felt like mentioning it cause the people that voted for this color, also commented and were cheerful and also, eager to help with the survey and get help from their friends, even though we didn't know each-other. Maybe this can be related to color influence.

enter image description here

I will keep on going with the survey, my goal is over 1000 participants and will also keep updating this answer. If you want to help, it only takes one minute and it doesn't require any personal info, only and ID or Initials, while not required, the country would be appreciated too and to choose one of the ten options.

The link renaing survey.imagins.ro

PS: It's too early to draw any conclusions regarding the cultural factor, I will leave that for when I get enough votes.

Also, HERE is my 9gag post asking for help, there are over 60 comments so you can see reactions and discussions on the topic.

2
  • 1
    A reason for downvoting would be nice though.
    – Alin
    Dec 6, 2015 at 0:12
  • 2
    I'm not going to downvote, because there's effort here, but at the end of the day, this is really just an opinion generator. And opinions are certainly fine, but this shouldn't be confused as actual data that would be applicable in other context. Note that a lot of 'reading mode' apps simply let users choose from a variety of options...namely because there's a lot of opinion involved.
    – DA01
    Dec 6, 2015 at 6:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.