<div dir="ltr"><div><div class="m_-5471640817950478390gmail_signature" data-smartmail="gmail_signature"><div dir="ltr"><div><div dir="ltr"><div><div dir="ltr">
<table class="m_-5471640817950478390backgroundTable" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" valign="top">
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="border-top:0px solid rgb(0,0,0);border-bottom:1px solid rgb(255,255,255);background-color:rgb(255,255,255);text-align:center" align="center"><span style="font-size:10px;color:rgb(96,96,96);line-height:200%;font-family:verdana;text-decoration:none">Email not displaying correctly? <a href="http://www.oplin.org/4cast/" style="font-size:10px;color:rgb(0,0,255);line-height:200%;font-family:verdana;text-decoration:none" target="_blank">View it in your browser.</a></span></td>
</tr>
<tr>
<td style="border-top:0px solid rgb(51,51,51);border-bottom:0px solid rgb(255,255,255);background-color:rgb(255,255,255)">
<center><a><img id="m_-5471640817950478390editableImg1" src="http://www.oplin.org/4cast/wp-content/themes/unlimited/assets/images/4cast_email_header.png" title="OPLIN" alt="OPLIN 4Cast" align="middle" border="0"></a></center>
</td>
</tr>
</tbody>
</table>
<table style="width:763px;height:877px" bgcolor="#ffffff" cellpadding="20" cellspacing="0">
<tbody>
<tr>
<td style="font-size:12px;color:rgb(0,0,0);line-height:150%;font-family:'Gothic Sans',sans-serif" bgcolor="#ffffff" valign="top">
<p> <span style="font-size:20px;font-weight:bold;color:rgb(0,0,0);font-family:arial;line-height:110%">OPLIN 4cast #518: Do your website’s colors measure up?</span><br>
<span style="font-size:11px;font-weight:normal;color:rgb(102,102,102);font-style:italic;font-family:arial">November 30th, 2016</span></p>
<p style="text-align:justify;font-size:16px;font-family:arial;line-height:110%"><img align="left" class="m_-5471640817950478390alignleft m_-5471640817950478390size-full m_-5471640817950478390wp-image-6101" src="http://4cast.oplin.org/wp-content/uploads/2016/11/Fotolia_50693065_XS.jpg" alt="The magnifying glass standing on a leaf of the test print" width="130" height="94" style="padding-right: 14px; padding-top: 4px; padding-bottom: 4px;" title=""> We’re all generally aware that websites – and perhaps library websites especially – should be accessible to people with impaired vision. One aspect of that accessibility is the contrast between the color of the text and the background color of a webpage; too little contrast and the text becomes too difficult for some people to read. Fortunately, there is no need to guess about the proper contrast, because there are standard measures and a number of software tools that can calculate the contrast ratio and tell you if it is within the correct range. Unfortunately, some web designers ignore color contrast in the interest of making websites prettier – at least to their eyes on their monitors.</p><div> </div>
<li style="text-align:justify;font-size:16px;font-family:arial;line-height:110%"><a href="https://material.google.com/usability/accessibility.html#accessibility-color-contrast" target="_blank">Usability: Accessibility</a> (Material design | Google) “The contrast ratio between a color and its background ranges from 1-21 based on its luminance, or intensity of light emitted, according to the <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" target="_blank">World Wide Web Consortium (W3C)</a>. Contrast ratios represent how different a color is from another color, commonly written as 1:1 or 21:1. The higher the difference between the two numbers in the ratio, the greater the difference in relative luminance between the colors.”</li>
<li style="text-align:justify;font-size:16px;font-family:arial;line-height:110%"><a href="http://www.ilovefreesoftware.com/09/featured/calculate-contrast-ratio-of-two-colors-as-per-wacg-guidelines.html" target="_blank">Calculate contrast ratio of two colors as per WACG guidelines</a> (ilovefreesoftware | Salman Khan) “<a href="http://webaim.org/blog/wcag-2-0-and-link-colors/" target="_blank">WACG 2.0</a> (Web Content Accessibility Guideline 2.0) is actually a set of rules for content accessibility (mainly for people with impairment or color deficiency), and color contrast is one of the aspects of accessibility. The color contrast ratio is measured in two different types of accessibility compliant i.e. AA and AAA. According to the WACG 2.0, the standard AA ratio for normal text should be at least 4.5:1 and for larger text 3:1, whereas, the standard AAA ratio should be at least 7:1 for normal text and 4.5:1 for larger text. So, using these websites you can generate color contrast and check whether they pass or fail AA and AAA standard ratios.”</li>
<li style="text-align:justify;font-size:16px;font-family:arial;line-height:110%"><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/visual-audio-contrast-contrast.html" target="_blank">Contrast (Minimum): Understanding SC 1.4.3</a> (W3C Working Group Note) “Text that is larger and has wider character strokes is easier to read at lower contrast. The contrast requirement for larger text is therefore lower. This allows authors to use a wider range of color choices for large text, which is helpful for design of pages, particularly titles. 18 point text or 14 point bold text is judged to be large enough to require a lower contrast ratio. […] ‘18 point’ and ‘bold’ can both have different meanings in different fonts but, except for very thin or unusual fonts, they should be sufficient.”</li>
<li style="text-align:justify;font-size:16px;font-family:arial;line-height:110%"><a href="https://backchannel.com/how-the-web-became-unreadable-a781ddc711b6" target="_blank">How the web became unreadable</a> (Backchannel | Kevin Marks) “As LCD technology advanced and screens achieved higher resolutions, a fashion for slender letterforms took hold. Apple led the trend when it designated <a href="https://kevinmarks.github.io/colourandcontrast.html" target="_blank">Helvetica Neue Ultralight</a> as its system font in 2013. (Eventually, Apple backed away from the trim font by adding a <a href="https://www.macobserver.com/tmo/article/ios-7-go-bold-for-easy-to-read-text" target="_blank">bold text</a> option.) As screens have advanced, designers have taken advantage of their increasing resolution by using lighter typeface, lower contrast, and thinner fonts. However, as more of us switch to laptops, mobile phones, and tablets as our main displays, the ideal desktop conditions from design studios are increasingly uncommon in life.”</li>
<div style="text-align:left"> </div>
<p style="text-align:left;font-size:20px;font-family:arial;line-height:110%"><small><strong><em>Articles from <a href="http://ohioweblibrary.org" target="_blank">Ohio Web Library</a>:</em></strong></small><br>
</p>
<div style="text-align:justify;font-size:16px;font-family:arial;line-height:110%">
<ul> <li><a href="http://search.ebscohost.com.proxy.oplin.org/login.aspx?direct=true&db=cmh&AN=58478965" target="_blank">Web accessibility, libraries, and the law.</a> (<em>Information Technology & Libraries</em>, March 2011, p.34-43 | Camilla Fulton)</li> <li><a href="http://search.ebscohost.com.proxy.oplin.org/login.aspx?direct=true&db=cmh&AN=109424537" target="_blank">Vision: Brightness and contrast.</a> (<em>Salem Health: Psychology & Behavioral Health</em>, 2015, p.1992-1995 | Bonnie S. Sherman)</li> <li><a href="http://search.ebscohost.com.proxy.oplin.org/login.aspx?direct=true&db=cmh&AN=112316569" target="_blank">Accessibility is more than curb cuts and ALT tags.</a> (<em>Computers in Libraries</em>, Jan./Feb. 2016, p.22-24 | jessamyn west)</li>
</ul>
</div>
<div style="text-align:left"> </div>
</td>
</tr>
<tr>
<td valign="top" width="760"><span style="font-size:10px;color:rgb(96,96,96);line-height:100%;font-family:verdana"> <hr>
<div style="text-align:justify">The <strong><em>OPLIN 4cast</em></strong> is a weekly compilation of recent headlines, topics, and trends that could impact public libraries. You can subscribe to it in a variety of ways, such as: <br>
</div>
<div style="text-align:left"> </div>
<ul>
<li style="text-align:justify"><strong>RSS feed.</strong> You can receive the OPLIN 4cast via RSS feed by subscribing to the following URL: <a href="http://www.oplin.org/4cast/index.php/?feed=rss2" target="_blank">http://www.oplin.org/4cast/<wbr>index.php/?feed=rss2</a>.</li>
<li style="text-align:justify"><strong>Live Bookmark.</strong> If you're using the Firefox web browser, you can go to the 4cast website (<a href="http://www.oplin.org/4cast/" target="_blank">http://www.oplin.org/4cast/</a>) and click on the orange "radio wave" icon on the right side of the address bar. In Internet Explorer 7, click on the same icon to view or subscribe to the 4cast RSS feed.</li>
<li style="text-align:justify"><strong>E-mail.</strong> You can have the OPLIN 4cast delivered via e-mail (a'la OPLINlist and OPLINtech) by subscribing to the 4cast mailing list at <a href="http://lists.oplin.org/mailman/listinfo/OPLIN4cast" target="_blank">http://lists.oplin.org/<wbr>mailman/listinfo/OPLIN4cast</a>.</li>
</ul> </span> </td>
</tr>
<tr>
<td style="text-align:center;font-family:'Century Gothic',sans-serif;border-top:0px solid rgb(255,255,255);background-color:#2c4587;color:#fff" valign="top" width="760">© 2016 Ohio Public Library Information Network<br> <a href="http://www.slideshare.net/oplin" title="Find us on Slideshare" target="_blank"><img src="http://www.oplin.org/4cast/wp-content/themes/unlimited/assets/images/slideshare3.png" alt="Find us on Slideshare"></a> <a href="http://www.facebook.com/oplin.org" title="Find us on Facebook" target="_blank"><img src="http://www.oplin.org/4cast/wp-content/themes/unlimited/assets/images/facebook_0.png" alt="Find us on Facebook"></a> <a href="https://plus.google.com/107751358238995507967" title="Find us on Google+" target="_blank"><img src="http://www.oplin.org/4cast/wp-content/themes/unlimited/assets/images/google+.png" alt="Find us on Google+"></a> <a href="http://www.twitter.com/oplin" title="Find us on Twitter" target="_blank"><img src="http://www.oplin.org/4cast/wp-content/themes/unlimited/assets/images/twitter_0.png" alt="Find us on Twitter"></a> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div></div></div></div></div></div></div>
</div>