{"id":957,"date":"2016-11-08T11:00:31","date_gmt":"2016-11-08T19:00:31","guid":{"rendered":"http:\/\/blogs.lanecc.edu\/webteam\/?p=957"},"modified":"2016-12-12T13:07:16","modified_gmt":"2016-12-12T21:07:16","slug":"understanding-wcag-2-0-contrast","status":"publish","type":"post","link":"https:\/\/blogs.lanecc.edu\/webteam\/2016\/11\/08\/understanding-wcag-2-0-contrast\/","title":{"rendered":"Understanding WCAG 2.0: 1.4.3 &#8211; Contrast"},"content":{"rendered":"<p>The next standard we&#8217;ll explore in our series on understanding WCAG 2.0 is <a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/visual-audio-contrast-contrast.html\">1.4.3, Contrast<\/a>. This standard is required for WCAG level AA compliance, which is part of what Section 508 requires. Here&#8217;s the complete text:<\/p>\n<blockquote><p><strong>1.4.3 Contrast (Minimum)<\/strong>: The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)<\/p>\n<ul>\n<li style=\"margin-left: 2em;\">Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;<\/li>\n<li style=\"margin-left: 2em;\">Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.<\/li>\n<li style=\"margin-left: 2em;\">Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.<\/li>\n<\/ul>\n<\/blockquote>\n<p>Low contrast ratios have been something of an unfortunate <a href=\"https:\/\/backchannel.com\/how-the-web-became-unreadable-a781ddc711b6#.hdsrgy1p1\">design trend<\/a> recently. Before we get into what contrast ratios should be, let&#8217;s look at a couple of examples:<\/p>\n<p style=\"margin-left: 4em;\">Hello!<\/p>\n<p>Black text on a white background. Simple. Classic. Easy to read. Here&#8217;s another example:<\/p>\n<p style=\"margin-left: 4em;\"><span style=\"color: #ffff99;\">Hello!<\/span><\/p>\n<p>Yellow on white. It&#8217;s pretty obvious this is harder to read. But we can actually quantify just how much harder it is to read by calculating a contrast ratio. Getting the actual contrast ratio is kind of tricky, because color on screens is actually defined as a mix of three colors: red, green, and blue. The W3C provides a formula (<a href=\"https:\/\/www.w3.org\/TR\/WCAG20-TECHS\/G17.html\">at the bottom of this page<\/a>), which calculates the luminance (a measure of the intensity of light) of the foreground color and divides it by the luminance of the background color to get a contrast ratio. But I found it easier to just use a <a href=\"http:\/\/leaverou.github.io\/contrast-ratio\/\">calculator<\/a>.<\/p>\n<p>This blog doesn&#8217;t use a true black for the text, it uses a black with a little bit of white in it (because, as a rule of thumb, <a href=\"https:\/\/ianstormtaylor.com\/design-tip-never-use-black\">never use a true black on the web<\/a>). So while true black on white has a ratio of 21, the ratio in our first example is 11.9, which easily meets our requirements. But our second example, which is yellow on white, has a ratio of 1, which is as bad as it gets.<\/p>\n<p>To achieve AA compliance, we need a ratio of at least 4.5. But I find even 4.5 to be difficult to read, especially in a really bright room:<\/p>\n<p style=\"color: #000; margin-bottom: 0;\">This line has a contrast ratio of 21:1<\/p>\n<p style=\"color: #3c3c3c; margin: 0;\">This line has a contrast ratio of 11:1<\/p>\n<p style=\"color: #595959; margin: 0;\">This line has a contrast ratio of 7:1<\/p>\n<p style=\"color: #777; margin: 0;\">This line has a contrast ratio of 4.5:1<\/p>\n<p style=\"color: #959595; margin: 0;\">This line has a contrast ratio of 3:1<\/p>\n<p style=\"color: #b7b7b7; margin-top: 0;\">This line has a contrast ratio of 2:1<\/p>\n<p>So we may want to consider always shooting for AAA compliance, which requires at least a 7. After a while, you kind of get a feel for contrast with black, white, and grey. But color is a lot harder. Let&#8217;s analyze a page on the website:<\/p>\n<p><a href=\"https:\/\/blogs.lanecc.edu\/webteam\/wp-content\/uploads\/sites\/25\/2016\/10\/Screen-Shot-2016-10-21-at-3.45.19-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-964 size-full\" src=\"https:\/\/blogs.lanecc.edu\/webteam\/wp-content\/uploads\/sites\/25\/2016\/10\/Screen-Shot-2016-10-21-at-3.45.19-PM.png\" alt=\"A screenshot of the top of the Lane community website.\" width=\"1730\" height=\"664\" srcset=\"https:\/\/blogs.lanecc.edu\/webteam\/wp-content\/uploads\/sites\/25\/2016\/10\/Screen-Shot-2016-10-21-at-3.45.19-PM.png 1730w, https:\/\/blogs.lanecc.edu\/webteam\/wp-content\/uploads\/sites\/25\/2016\/10\/Screen-Shot-2016-10-21-at-3.45.19-PM-300x115.png 300w, https:\/\/blogs.lanecc.edu\/webteam\/wp-content\/uploads\/sites\/25\/2016\/10\/Screen-Shot-2016-10-21-at-3.45.19-PM-768x295.png 768w, https:\/\/blogs.lanecc.edu\/webteam\/wp-content\/uploads\/sites\/25\/2016\/10\/Screen-Shot-2016-10-21-at-3.45.19-PM-1024x393.png 1024w, https:\/\/blogs.lanecc.edu\/webteam\/wp-content\/uploads\/sites\/25\/2016\/10\/Screen-Shot-2016-10-21-at-3.45.19-PM-500x192.png 500w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><\/p>\n<p>There&#8217;s a lot of different color combinations there. When we designed the website, we tried to make sure we&#8217;d have sufficient contrast to make it readable by everyone. But we didn&#8217;t have any guidelines in mind, and just tried our best. It turns out it&#8217;s harder to judge contrast in colors.<\/p>\n<p>Let&#8217;s start up at the top, on the four tabs for navigation to our different audience landing pages. The white on blue has a ratio of 7.4. But the yellow on blue for &#8220;The Community&#8221; has a ratio of just 3.8 &#8211; something that we&#8217;ll need to fix.<\/p>\n<p>The banner had two surprises for me. I thought the white on blue would have fairly high contrast, but it was actually just a 3. While that&#8217;s on the edge, that&#8217;s actually sufficient here, because the text is considered large scale (at least 18pt, or a bold 14pt). I felt like the black text on the blue banner would have a fairly low ratio, but it&#8217;s a 7. So our banner checks out.<\/p>\n<p>The announcements box has some troubles. The orange &#8220;Announcements&#8221; text has a ratio of just 2.3, partly because the background of that box is a little transparent, and partly because that orange is kind of bright. On the other hand, the linked announcement links are sufficiently contrasting, with a ratio of 5.5.<\/p>\n<p>While I can fix the contrast on the website theme, this standard is part of the reason we encourage you not to change colors on your pages. In addition to <a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/visual-audio-contrast-without-color.html\">not conveying information strictly through color<\/a>, and keeping with the branding standards of the college, you need to make sure to keep sufficient contrast.<\/p>\n<p>If you&#8217;d like to read more about color contrast, you may also be interested in <a href=\"https:\/\/www.w3.org\/TR\/2016\/NOTE-WCAG20-TECHS-20161007\/G174\">these techniques<\/a>, which provide examples and more detail.<\/p>\n<p>Interested in more? Check out the listing of <a href=\"http:\/\/blogs.lanecc.edu\/webteam\/2016\/10\/11\/updated-accessibility-requirements\/\">all the posts in this series<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The next standard we&#8217;ll explore in our series on understanding WCAG 2.0 is 1.4.3, Contrast. This standard is required for WCAG level AA compliance, which is part of what Section 508 requires. Here&#8217;s the complete text: 1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least &hellip; <a href=\"https:\/\/blogs.lanecc.edu\/webteam\/2016\/11\/08\/understanding-wcag-2-0-contrast\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Understanding WCAG 2.0: 1.4.3 &#8211; Contrast&#8221;<\/span><\/a><\/p>\n","protected":false},"author":86,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":"","_wpscppro_dont_share_socialmedia":false,"_wpscppro_custom_social_share_image":0,"_facebook_share_type":"","_twitter_share_type":"","_linkedin_share_type":"","_pinterest_share_type":"","_linkedin_share_type_page":"","_instagram_share_type":"","_medium_share_type":"","_threads_share_type":"","_google_business_share_type":"","_selected_social_profile":[],"_wpsp_enable_custom_social_template":false,"_wpsp_social_scheduling":{"enabled":false,"datetime":null,"platforms":[],"status":"template_only","dateOption":"today","timeOption":"now","customDays":"","customHours":"","customDate":"","customTime":"","schedulingType":"absolute"},"_wpsp_active_default_template":true},"categories":[31,26],"tags":[6,25],"class_list":["post-957","post","type-post","status-publish","format-standard","hentry","category-wcag-20","category-web","tag-accessibility","tag-drupal"],"_links":{"self":[{"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/posts\/957","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/users\/86"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/comments?post=957"}],"version-history":[{"count":7,"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/posts\/957\/revisions"}],"predecessor-version":[{"id":1052,"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/posts\/957\/revisions\/1052"}],"wp:attachment":[{"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/media?parent=957"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/categories?post=957"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/tags?post=957"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}