{"id":3017,"date":"2018-08-03T08:31:56","date_gmt":"2018-08-03T14:31:56","guid":{"rendered":"https:\/\/esa.org\/communication-engagement\/?p=3017"},"modified":"2018-08-03T08:31:56","modified_gmt":"2018-08-03T14:31:56","slug":"resource-of-the-week-what-is-most-accessible-light-text-on-dark-background-or-vice-versa","status":"publish","type":"post","link":"https:\/\/esa.org\/communication-engagement\/2018\/08\/03\/resource-of-the-week-what-is-most-accessible-light-text-on-dark-background-or-vice-versa\/","title":{"rendered":"Resource of the Week: What is most accessible, light text on dark background or vice versa?"},"content":{"rendered":"

\"\"<\/a><\/p>\n

Image: screenshot from the article<\/em><\/p>\n

We\u2019re stepping a little outside our standard one-link-a-week format for this one.<\/p>\n

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\u2019s complicated and user-dependent. Below are a few articles which delve further into the topic.<\/p>\n

\n

\u00a0<\/p>\n

Accessibility Requirements for People with Low Vision \u2013 Public Working Draft <\/strong>(link<\/a>)<\/p>\n

From the\u00a0Low Vision Accessibility Task Force<\/a>\u00a0(LVTF), a Task Force of the\u00a0Web Content Accessibility Guidelines Working Group<\/a>\u00a0(WCAG WG), part of\u00a0World Wide Web Consortium<\/a> (W3C)<\/em><\/p>\n

The key takeaway relevant to the topic we\u2019re posting about today, is that everyone is different. If possible, the LVTF recommends that you design to meet this user need: \u201cUsers can set the background color and the text color from the full color spectrum.\u201d How can you work that into your current or future web and app development projects? Here\u2019s an article<\/a> showing several visual impairment-oriented design solutions.<\/p>\n

On the other hand, that may not be possible with a presentation you\u2019re giving live, so check out W3C\u2019s Web Accessibility Initiative<\/a> for advice about How to Make Your Presentations Accessible to All<\/a>.<\/p>\n

\n

Penn State Accessibility and Usability: Color and Contrast on Web Pages\u00a0<\/strong>(link<\/a>)\u00a0and Textured Backgrounds<\/strong> (link<\/a>)<\/p>\n

Two key excerpts from a couple of quick-read web pages loaded with visual examples:<\/p>\n

    \n
  1. \u201cAlthough 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.\u201d<\/li>\n<\/ol>\n

    2. \u201cAn 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\u2014such as navy, dark green, or maroon for darks, and pastels for lights\u2014to lessen the contrast.\u00a0However, some modern designs are so \u201csubtle\u201d 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.\u201d Read the full web page<\/a> (quick read) for suggested color palettes and online tools that will test your contrast ratios.<\/p>\n

    \n

    Readability Of Websites With Various Foreground \/ Background Color Combinations, Font Types And Word Styles <\/strong>(link<\/a>)<\/p>\n

    Dr. Lauren Sharff and then-student Alyson Hill,\u00a0Department of Psychology,\u00a0Stephen F. Austin State University<\/em><\/p>\n

    From a specific focus on color<\/a> in this research: \u201c\u2026The most readable color combination is black text on white background; overall, there is a stronger preference for any combination containing black [\u2026] 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).\u201d<\/p>\n

    \n

    The effect of web page text-background color combinations on retention and perceived readability, aesthetics, and behavioral intention <\/strong>(link)<\/a><\/p>\n

    By Richard H. Hall and Patrick Hanna (An Americas Conference on Information Systems presentation written up into the proceedings)<\/em><\/p>\n

    Abstract excerpt: \u201c\u2026black text on a white background (BW) and light\u00a0blue on dark blue (B) pages received the highest ratings for readability [\u2026]; c) B pages\u00a0received the highest ratings for the aesthetic qualities; d) BW pages were perceived as most \u201cprofessional\u201d;\u00a0e) Subjective readability ratings significantly predicted retention; and f) Users view \u201cprofessionalism\u201d as more\u00a0strongly related to readability than aesthetics.\u201d<\/p>\n

    \n

    How the Web Became Unreadable <\/strong>(link<\/a>)<\/p>\n

    Kevin Marks for\u00a0<\/em>Wired;\u00a0member of the Advisory Council of the Open Rights Group, a UK-based Digital Rights campaigning organization; Open Web Advocate<\/em><\/p>\n

    A physicist takes an interesting foray into the legibility of contrast ratios between background and text colors.\u00a0This article corresponds with the image for this post.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

    Image: screenshot from the article We\u2019re 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\u2019s complicated and user-dependent. Below are a few articles which…<\/p>\n","protected":false},"author":5470,"featured_media":3018,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,15,16],"tags":[],"class_list":["post-3017","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news-blog-scicomm-by-scientists","category-resource-of-the-week","category-resources"],"_links":{"self":[{"href":"https:\/\/esa.org\/communication-engagement\/wp-json\/wp\/v2\/posts\/3017","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/esa.org\/communication-engagement\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/esa.org\/communication-engagement\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/esa.org\/communication-engagement\/wp-json\/wp\/v2\/users\/5470"}],"replies":[{"embeddable":true,"href":"https:\/\/esa.org\/communication-engagement\/wp-json\/wp\/v2\/comments?post=3017"}],"version-history":[{"count":0,"href":"https:\/\/esa.org\/communication-engagement\/wp-json\/wp\/v2\/posts\/3017\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/esa.org\/communication-engagement\/wp-json\/wp\/v2\/media\/3018"}],"wp:attachment":[{"href":"https:\/\/esa.org\/communication-engagement\/wp-json\/wp\/v2\/media?parent=3017"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/esa.org\/communication-engagement\/wp-json\/wp\/v2\/categories?post=3017"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/esa.org\/communication-engagement\/wp-json\/wp\/v2\/tags?post=3017"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}