Simulate Reading Mode on webpage

Question

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.

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]:

---

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:

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

Answer 1

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.

Answer 2

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

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.

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.