A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.md 3.2KB

3 years ago
1234567891011121314151617
  1. title: Why light text on dark background is a bad idea
  2. url: https://tatham.blog/2008/10/13/why-light-text-on-dark-background-is-a-bad-idea/
  3. hash_url: 9f3a8d345963dac24bef4df547fef72c
  4. <p><strong>Update, Oct 2014:</strong> This post was written in 2008, based on me scrounging together some complementary links at the time. It’s now 2014, and accessibility is a well thought-out problem, which is generally well solved. Use the colour scheme that makes you happy. I use a black background on my Windows Phone, a dark navy in Sublime Text, a mid-grey chrome around my Office documents, and a bright white background through Outlook and my email.</p>
  5. <hr>
  6. <p>As this is a suggestion which comes up quite regularly, I felt it valuable to document some of the research I have collected about the readability of light text on dark backgrounds.</p>
  7. <p>The science of readability is by no means new, and some of the best research comes from advertising works in the early 80s. This information is still relevant today.</p>
  8. <p>First up is this quote from a paper titled “Improving the legibility of visual display units through contrast reversal”. In present time we think of contrast reversal meaning black-on-white, but remember this paper is from 1980 when VDUs (monitors) where green-on-black. This paper formed part of the research that drove the push for this to change to the screen formats we use today.</p>
  9. <blockquote><p>However, most studies have shown that dark characters on a light background are superior to light characters on a dark background (when the refresh rate is fairly high). For example, Bauer and Cavonius (1980) found that participants were 26% more accurate in reading text when they read it with dark characters on a light background.</p>
  10. <p>Reference: Bauer, D., &amp; Cavonius, C., R. (1980). Improving the legibility of visual display units through contrast reversal. In E. Grandjean, E. Vigliani (Eds.), Ergonomic Aspects of Visual Display Terminals (pp. 137-142). London: Taylor &amp; Francis</p></blockquote>
  11. <p>Ok, 26% improvement – but why?</p>
  12. <blockquote><p>People with astigmatism (aproximately 50% of the population) find it harder to read white text on black than black text on white. Part of this has to do with light levels: with a bright display (white background) the iris closes a bit more, decreasing the effect of the “deformed” lens; with a dark display (black background) the iris opens to receive more light and the deformation of the lens creates a much fuzzier focus at the eye.</p>
  13. <p><a href="http://www.cs.ubc.ca/labs/spin/people/harrison-jason.html" target="_blank">Jason Harrison</a> – Post Doctoral Fellow, Imager Lab Manager – Sensory Perception and Interaction Research Group, University of British Columbia</p></blockquote>
  14. <p>The “fuzzing” effect that Jason refers to is known as halation.</p>
  15. <p>It might feel strange pushing your primary design goals based on the vision impaired, but when 50% of the population of have this “impairment” it’s actually closer to being the norm than an impairment.</p>
  16. <p>The web is rife with research on the topic, but I think these two quotes provide a succinct justification for why light text on a dark background is a bad idea.</p>