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.
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.
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]:
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 :
It's "OK" for now, till I find a better approach to this..
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