G17: Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the text

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US"><head><title>G17: Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the text | Techniques for WCAG 2.0 </title><link rel="canonical" href="https://www.w3.org/TR/WCAG20-TECHS/G17.html" /><link rel="stylesheet" type="text/css" href="https://www.w3.org/StyleSheets/TR/2016/W3C-WG-NOTE.css" /><link rel="stylesheet" type="text/css" href="additional.css"/><link rel="stylesheet" type="text/css" href="slicenav.css"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/></head><body class="slices toc-inline"><div id="masthead"><p class="logo"><a href="https://www.w3.org/"><img width="72" height="48" alt="W3C" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C"/></a></p><p class="collectiontitle"><a href="./">Techniques for WCAG 2.0</a></p></div><div id="skipnav"><p class="skipnav"><a href="#maincontent">Skip to Content (Press Enter)</a></p></div><a name="top"> </a><ul id="navigation"><li><strong><a href="Overview.html#contents" title="Table of Contents">Contents</a></strong></li><li><strong><a href="intro.html" title="Introduction to Techniques for WCAG 2.0"><abbr title="Introduction">Intro</abbr></a></strong></li><li><a title="G15: Using a tool to ensure that content does not violate the general flash threshold or red flash threshold" href="G15.html"><strong>Previous: </strong> Technique G15</a></li><li><a title="G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) 
 and background behind the text" href="G18.html"><strong>Next: </strong> Technique G18</a></li></ul><div class="navtoc"><p>On this page:</p><ul id="navbar"><li><a href="#G17-disclaimer">Important Information about Techniques</a></li><li><a href="#G17-applicability">Applicability</a></li><li><a href="#G17-description">Description</a></li><li><a href="#G17-examples">Examples</a></li><li><a href="#G17-resources">Resources</a></li><li><a href="#G17-related-techs">Related Techniques</a></li><li><a href="#G17-tests">Tests</a></li></ul></div><div class="skiptarget"><a id="maincontent">-</a></div> <h1><a name="G17" id="G17"> </a>G17: Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the text</h1><div id="G17-disclaimer"><h2>Important Information about Techniques</h2><p>See <a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/understanding-techniques.html">Understanding Techniques for WCAG Success Criteria</a> for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.0 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.0.</p></div><div class="applicability"><h2 id="G17-applicability">Applicability</h2><div class="textbody"><p>Any technology that produces visual output.</p></div></div><p class="referenced">This technique relates to:</p><ul><li><a href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast7"> Success Criterion 1.4.6 (Contrast (Enhanced))</a><ul><li><a href="https://www.w3.org/WAI/WCAG20/quickref/20160105/#visual-audio-contrast7"> How to Meet 1.4.6 (Contrast (Enhanced)) </a></li><li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/visual-audio-contrast7.html"> Understanding Success Criterion 1.4.6 (Contrast (Enhanced)) </a></li></ul></li></ul><h2 id="G17-description">Description</h2><div class="textbody"><p>The objective of this technique is to make sure that users can read text that is presented over a background. This technique goes beyond the 4.5:1 contrast technique to provide a higher level of contrast to make it easier for people with low vision to read.</p><p>If the background is a solid color (or all black or all white) then the contrast ratio of the text can be maintained by making sure that each of the text letters have a 7:1 contrast ratio with the background.</p><p>If the background or the letters vary in relative luminance (or are patterned), then the background around the letters can be chosen or shaded so that the letters maintain a 7:1 contrast ratio with the background behind them even if they do not have that contrast ratio with the entire background.</p><p>The contrast ratio can sometimes be maintained by changing the relative luminance of the letters as the relative luminance of the background changes across the page.</p><p>Another method is to provide a halo around the text that provides the necessary contrast ratio if the background image or color would not normally be sufficiently different in relative luminance.</p></div><h2 class="small-head" id="G17-examples">Examples</h2><ul><li><p>A black background is chosen so that light colored letters that match the company's logo can be used.</p></li><li><p>Text is placed over a picture of the college campus. Since a wide variety of colors and darknesses appear in the picture the area behind the text is fogged white so that the picture is very faint and the maximum darkness is still light enough to maintain a 7:1 contrast ratio with the black text written over the picture.</p></li></ul><h2 id="G17-resources">Resources</h2><div class="textbody"><p>Resources are for information purposes only, no endorsement implied.</p><ul><li><p> <a href="https://www.paciellogroup.com/resources/contrastanalyser/">Contrast Analyser – Application</a> </p></li><li><p> <a href="http://juicystudio.com/services/luminositycontrastratio.php">Contrast Ratio Analyser - online service</a> </p></li><li><p> <a href="http://juicystudio.com/article/colour-contrast-analyser-firefox-extension.php">Colour Contrast Analyser - Firefox Extension</a> </p></li><li><p> <a href="http://trace.wisc.edu/contrast-ratio-examples/">Color Contrast Samples</a> </p></li><li><p> <a href="https://www.w3.org/Graphics/atypical-color-response">Atypical colour response</a> </p></li><li><p> <a href="http://www.colorsontheweb.com/colorcontrast.asp">Colors On the Web Color Contrast Analyzer</a> </p></li><li><p> <a href="http://www.vischeck.com/daltonize/runDaltonize.php">Tool to convert images based on color loss so that contrast is restored as luminance contrast when there was only color contrast (that was lost due to color deficiency)</a> </p></li><li><p> <a href="http://www.456bereastreet.com/archive/200709/10_colour_contrast_checking_tools_to_improve_the_accessibility_of_your_design/">List of color contrast tools</a> </p></li></ul></div><h2 id="G17-related-techs">Related Techniques</h2><div class="textbody"><ul><li><a href="G148.html">G148: Not specifying background color, not specifying text color, and not using technology features that change those defaults</a></li><li><a href="G174.html">G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast</a></li></ul></div><h2 id="G17-tests">Tests</h2><div class="textbody"><h3 class="small-head" id="G17-procedure">Procedure</h3><ol class="enumar"><li><p>Measure the relative luminance of each letter (unless they are all uniform) using the formula:</p><ul><li><p>L = 0.2126 * <strong>R</strong> + 0.7152 * <strong>G</strong> + 0.0722 * <strong>B</strong> where <strong>R</strong>, <strong>G</strong> and <strong>B</strong> are defined as:</p><ul><li><p>if R <sub>sRGB</sub> <= 0.03928 then <strong>R</strong> = R <sub>sRGB</sub> /12.92 else <strong>R</strong> = ((R <sub>sRGB</sub> +0.055)/1.055) ^ 2.4</p></li><li><p>if G <sub>sRGB</sub> <= 0.03928 then <strong>G</strong> = G <sub>sRGB</sub> /12.92 else <strong>G</strong> = ((G <sub>sRGB</sub> +0.055)/1.055) ^ 2.4</p></li><li><p>if B <sub>sRGB</sub> <= 0.03928 then <strong>B</strong> = B <sub>sRGB</sub> /12.92 else <strong>B</strong> = ((B <sub>sRGB</sub> +0.055)/1.055) ^ 2.4</p></li></ul><div class="note"><p class="prefix">and R <sub>sRGB</sub>, G <sub>sRGB</sub>, and B <sub>sRGB</sub> are defined as:</p></div><ul><li><p>R <sub>sRGB</sub> = R <sub>8bit</sub> /255</p></li><li><p>G <sub>sRGB</sub> = G <sub>8bit</sub> /255</p></li><li><p>B <sub>sRGB</sub> = B <sub>8bit</sub> /255</p></li></ul><div class="note"><p class="prefix">The "^" character is the exponentiation operator.</p></div></li></ul><div class="note"><p class="prefix"><em>Note: </em>For aliased letters, use the relative luminance value found two pixels in from the edge of the letter.</p></div></li><li><p>Measure the relative luminance of the background pixels immediately next to the letter using same formula.</p></li><li><p>Calculate the contrast ratio using the following formula.</p><ul><li><p>(L1 + 0.05) / (L2 + 0.05), where</p><ul><li><p>L1 is the <a href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef" class="gl-ref">relative luminance</a> of the lighter of the foreground or background colors, and</p></li><li><p>L2 is the <a href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef" class="gl-ref">relative luminance</a> of the darker of the foreground or background colors.</p></li></ul></li></ul></li><li><p>Check that the contrast ratio is equal to or greater than 7:1</p></li></ol><h3 class="small-head" id="G17-results">Expected Results</h3><ul><li><p>#4 is true</p></li></ul><p>If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.</p></div><ul id="navigationbottom"><li><strong><a href="#top">Top</a></strong></li><li><strong><a href="Overview.html#contents" title="Table of Contents">Contents</a></strong></li><li><strong><a href="intro.html" title="Introduction to Techniques for WCAG 2.0"><abbr title="Introduction">Intro</abbr></a></strong></li><li><a title="G15: Using a tool to ensure that content does not violate the general flash threshold or red flash threshold" href="G15.html"><strong>Previous: </strong> Technique G15</a></li><li><a title="G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) 
 and background behind the text" href="G18.html"><strong>Next: </strong> Technique G18</a></li></ul><div class="footer"><p class="copyright">This Web page is part of <a href="Overview.html">Techniques and Failures for Web Content Accessibility Guidelines 2.0</a> (see the <a href="https://www.w3.org/TR/WCAG20-TECHS/G17.html">latest version of this document</a>). The entire document is also available as a <a href="complete.html">single HTML file</a>. See the <a href="https://www.w3.org/WAI/intro/wcag20">The WCAG 2.0 Documents</a> for an explanation of how this document fits in with other Web Content Accessibility Guidelines (WCAG) 2.0 documents. To send public comments, please follow the <a href="https://www.w3.org/WAI/WCAG20/comments/">Instructions for Commenting on WCAG 2.0 Documents</a>. </p><p class="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2016 <a href="https://www.w3.org/"><acronym title="World Wide Web Consortium">W3C</acronym></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute of Technology">MIT</acronym></a>, <a href="http://www.ercim.eu/"><acronym title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>, <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply.</p></div></body></html>

CINXE.COM

G17: Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the text | Techniques for WCAG 2.0