Simulate Reading Mode on webpage

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 ?


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

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


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.


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



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.

Source : Link , Question Author : Alin , Answer Author : Uros

Leave a Comment