Resource of the Week: What is most accessible, light text on dark background or vice versa?
Image: screenshot from the article
We’re stepping a little outside our standard one-link-a-week format for this one.
The TL;DR is that high contrast between background and text colors is important, and that for many users, black text on a white background is a) most legible and b) most professional-appearing. However, it’s complicated and user-dependent. Below are a few articles which delve further into the topic.
Accessibility Requirements for People with Low Vision – Public Working Draft (link)
From the Low Vision Accessibility Task Force (LVTF), a Task Force of the Web Content Accessibility Guidelines Working Group (WCAG WG), part of World Wide Web Consortium (W3C)
The key takeaway relevant to the topic we’re posting about today, is that everyone is different. If possible, the LVTF recommends that you design to meet this user need: “Users can set the background color and the text color from the full color spectrum.” How can you work that into your current or future web and app development projects? Here’s an article showing several visual impairment-oriented design solutions.
On the other hand, that may not be possible with a presentation you’re giving live, so check out W3C’s Web Accessibility Initiative for advice about How to Make Your Presentations Accessible to All.
Penn State Accessibility and Usability: Color and Contrast on Web Pages (link) and Textured Backgrounds (link)
Two key excerpts from a couple of quick-read web pages loaded with visual examples:
- “Although changing a background on a Web page to a bright color can add excitement, these backgrounds can also make it difficult to read Web pages. In general, it is best to use dark text on light colors for long passages.”
2. “An important aspect of color on the Web for both low vision and colorblind users is sufficient contrast between foreground (text or graphics) and the background. Maximum contrast is black versus white, but this combination can be considered too overwhelming (it might cause glare). Other colors can be used—such as navy, dark green, or maroon for darks, and pastels for lights—to lessen the contrast. However, some modern designs are so “subtle” that the contrast can actually be insufficient for some readers. Examples include contrasting light grey versus middle grey, middle pastels versus darks, or white versus light cyan (blue-green). If you plan to use a subtle color palette, it is recommended that you use a color analyzer to ensure there is sufficient contrast.” Read the full web page (quick read) for suggested color palettes and online tools that will test your contrast ratios.
Readability Of Websites With Various Foreground / Background Color Combinations, Font Types And Word Styles (link)
Dr. Lauren Sharff and then-student Alyson Hill, Department of Psychology, Stephen F. Austin State University
From a specific focus on color in this research: “…The most readable color combination is black text on white background; overall, there is a stronger preference for any combination containing black […] Also, in every color combination surveyed, the darker text on a lighter background was rated more readable than its inverse (e.g. blue text on white background ranked higher then white text on blue background).”
The effect of web page text-background color combinations on retention and perceived readability, aesthetics, and behavioral intention (link)
By Richard H. Hall and Patrick Hanna (An Americas Conference on Information Systems presentation written up into the proceedings)
Abstract excerpt: “…black text on a white background (BW) and light blue on dark blue (B) pages received the highest ratings for readability […]; c) B pages received the highest ratings for the aesthetic qualities; d) BW pages were perceived as most “professional”; e) Subjective readability ratings significantly predicted retention; and f) Users view “professionalism” as more strongly related to readability than aesthetics.”
How the Web Became Unreadable (link)
Kevin Marks for Wired; member of the Advisory Council of the Open Rights Group, a UK-based Digital Rights campaigning organization; Open Web Advocate
A physicist takes an interesting foray into the legibility of contrast ratios between background and text colors. This article corresponds with the image for this post.