In designing educational software, I'm concerned about eye health. What colors are best for backgrounds, and how can we optimize contrast and brightness?
Pretend that you are designing for individuals with partial visual impairment. You can use some of the guidelines found here:
http://www.lighthouse.org/accessibility/design/accessible-print-design/making-text-legible/
The guidelines referred to were useful to some degree. Other issues not covered but which are of interest relate to breaking up a background to reduce 'brightness'. A full screen of white, for example, can be hard to look at, but if it is broken into smaller sections, for example, by a frame, it can be easier to view without eye strain. Some screens may be effective for a short viewing, but can cause strain if looked at for too long, to complete a task, for example. I find a light grey easier on the eyes than a bright white. I need to know why this is so.
Filippo, thanks for your suggestion. I have taken your advice and added ergonomics and human factors.
Hi Lance, try this pdf I made ;) I hope it will help you.
https://www.dropbox.com/s/sugtiozebl2ug64/graphic_user_interface.pdf?dl=0
Hi Martin... Thanks. It is useful. Do you know of any 'science' behind this? For example, a solid white background vs a background that may have ripples or some other effect to break it up. How does this impact on the eyes? I am especially concerned about children using our programs.
Hey, the science behind that are design principles from psychology. I found a pdf in german :( on the www. I think there will be some in english on the internet. ... but here is the link to the german
https://www.medien.ifi.lmu.de/lehre/ws1112/lt/folien/Gestaltungsprinzipien.pdf
... and another pdf ... from page 108 ... the explanation about color
http://www.gestaltung.hs-mannheim.de/designwiki/files/8500/form_und_farbe.pdf
Dear All human visual fatigue can be reduce( 1) by selecting font size use always 12 font size which is compatible to human eyes & machine.(2 ) you can follow 20-20-20 situation that is monitor distance 20 cm, 20 inches screen size,20 sec rest after every twenty min of continuous use of computer (3.) you can use optical illusion every fifty min of continuous use of computer followed by ten min looking to optical illusion to reduce visual fatigue till real image is seen.(4) Reduce visual noise during work around you (5) every four hour of work plash cold water to eyes, look at green close your eyes with palm for three min . all these techniques are beneficial to reduce visual fatigue PCG,CLI, Chennai
12 point font is adequate for *most* users when reading a document hard copy or on screen. Keep in mind that users with varying degres of visual impairment may benefit from even larger font size. More generally, the farther away the user is from the text, the larger the print size needs to be. There is a Human Factors Design standard which relates font size and viewing distance. There is a a nice concise discussion of the relationship on this Georgia Tech webpage: http://accessibility.gtri.gatech.edu/assistant/acc_info/font_size.php.
What an excellent question Lance.
Although designing a web page using impairment references, or larger text on the page, as has been mentioned here are interesting ideas, I would like to add my two cents worth. First, we need to have a basic understanding of why the eyes are under more strain looking at a computer screen, compared to reading printed materials. In printing, the eyes can naturally focus on a solid objects (1200 dpi or more) without an issue. When the eyes are trying to focus on a screen made up of tiny pixels (72 dpi), the eyes continuously move between the image on the screen and then naturally relax to a focal point slightly past the background of the screen. The constant shifting between the two points stresses our eyes after a while and fatigues them.
The only way to alleviate the symptoms is to help the individual reduce strain during the viewing process. I would like to suggest using off-white, or 5-20% grey (15% gray is a standard in TV production) in combination to highlight or draw attention to a specific area of the web page for use as a background color. Percentages of blue also work well. This helps reduce the contrast between competing elements on the web page and reduces strain. By incorporating large open areas, referred to as white space in printing, you are creating ‘Rest Stops’ for the eyes as the viewer works through the page. Avoid multiple colors and multiple fonts. Use only a few to make it more comfortable for the reader’s eyes. The way the eye moves through the page (eyetracking) is also something we can control to help with eye strain. Eyetracking studies reveal that in print viewing, the gaze pattern we usually use is a ‘Z’ or a backward ‘S’. But when viewing a web page, we use a gaze pattern that is described as an ‘F’, often referred to as the Golden Triangle. Sandra J. Blum describes the pattern this way “The eye scans vertically along the left, then right apparently only if something catches the eye or is deemed relevant. The golden triangle, then, is across the top, angling back to the left of the page down to the bottommost "above the fold" point, typically in the third or fourth position on the page. The right mid-section and right-most side of the page get little attention.” I hope this helps answer your question.
I have already offer five simple solutions to be practice on shop floor office for reduction of visual fatigue on 2.10.2014 pcg,Chennai
To all who have responded, my concern is not with text readability, but with game and interactive content, where iconic, graphical images are placed against a background. Any further comments along these lines would be most helpful. Why is it, for example, that so many games have a darker background? Look at the colors of the backgrounds and how the characters and images work against that background? Thanks!
Approximately 8 % of men and 1/2 % of women are colorblind (more accurately termed color vision deficiency). Most often the deficiency is in the red/green spectrum. These colors either fade into the background or are perceived and indistinguishable from grays and browns. When designing presentations or graphical images, please avoid reds and greens. If they must be used, select greens with a high amount of yellow and reds with a high amount of blue.
- Badges
- Science topic
- Similar topics
- Correction