CINXE.COM

<!DOCTYPE html> <html class="no-js" lang="en" dir="ltr" prefix="og: http://ogp.me/ns#"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script> document.documentElement.className = document.documentElement.className.replace('no-js', 'has-js'); function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "/WAI/assets/scripts/main.js?1732321439590790613"; document.body.appendChild(element); } window.addEventListener("load", downloadJSAtOnload, false); </script> <link rel="stylesheet" href="/WAI/assets/css/style.css?1732321439590790613"> <title> Adding WCAG Conformance Logos | Web Accessibility Initiative (WAI) | W3C</title> <meta name="generator" content="Jekyll v4.3.3" /> <meta property="og:title" content="Adding WCAG Conformance Logos" /> <meta name="author" content="W3C Web Accessibility Initiative (WAI)" /> <meta property="og:locale" content="en" /> <meta name="description" content="W3C WAI provides conformance logos for websites that meet Web Content Accessibility Guidelines (WCAG) 2." /> <meta property="og:description" content="W3C WAI provides conformance logos for websites that meet Web Content Accessibility Guidelines (WCAG) 2." /> <link rel="canonical" href="https://www.w3.org/WAI/standards-guidelines/wcag/conformance-logos/" /> <meta property="og:url" content="https://www.w3.org/WAI/standards-guidelines/wcag/conformance-logos/" /> <meta property="og:site_name" content="Web Accessibility Initiative (WAI)" /> <meta property="og:image" content="https://www.w3.org/WAI/content-images/wcag/conformance-logos-social.jpg" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" /> <meta property="twitter:image" content="https://www.w3.org/WAI/content-images/wcag/conformance-logos-social.jpg" /> <meta property="twitter:title" content="Adding WCAG Conformance Logos" /> <meta name="twitter:site" content="@w3c_wai" /> <meta name="twitter:creator" content="@W3C Web Accessibility Initiative (WAI)" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"WebPage","author":{"@type":"Person","name":"W3C Web Accessibility Initiative (WAI)"},"description":"W3C WAI provides conformance logos for websites that meet Web Content Accessibility Guidelines (WCAG) 2.","headline":"Adding WCAG Conformance Logos","image":"https://www.w3.org/WAI/content-images/wcag/conformance-logos-social.jpg","url":"https://www.w3.org/WAI/standards-guidelines/wcag/conformance-logos/"}</script>  <link rel="alternate" type="application/rss+xml" href="/WAI/feed.xml"> </head> <body id="top" class="page-adding-wcag-conformance-logos "> <nav aria-label="Skip Link and Language Selector" id="controls" class="default-grid"> <ul> <li><a href="#main">Skip to Content</a></li> <li class="opt"> <a href="/WAI/meta/customize/">Change Text Size or Colors</a> </li> <li class="opt"> <a href="/WAI/translations/">All Translations <svg focusable="false" aria-hidden="true" class="icon-translations "><use xlink:href="/WAI/assets/images/icons.svg#icon-translations"></use></svg></a> </li> </ul></nav> <header id="site-header" class="default-grid with-gap"> <div class="logos"> <a lang="en" class="home w3c" href="https://www.w3.org/"> <svg role="img" aria-label="W3C" viewBox="0 0 68 34" xmlns="http://www.w3.org/2000/svg"><g><path d="m16.117 1.006 5.759 19.58 5.759-19.58h4.17 11.444v1.946l-5.879 10.128c2.065.663 3.627 1.868 4.686 3.615 1.059 1.748 1.589 3.799 1.589 6.155 0 2.914-.775 5.363-2.324 7.348s-3.555 2.978-6.017 2.978c-1.854 0-3.469-.589-4.845-1.767-1.377-1.178-2.396-2.773-3.058-4.786l3.256-1.35c.477 1.218 1.106 2.178 1.887 2.879.781.702 1.701 1.052 2.76 1.052 1.112 0 2.052-.622 2.82-1.866.768-1.245 1.152-2.74 1.152-4.489 0-1.933-.411-3.429-1.231-4.488-.954-1.244-2.45-1.867-4.489-1.867h-1.588v-1.906l5.56-9.612h-6.712l-.382.65-8.163 27.548h-.397l-5.958-19.937-5.957 19.937h-.397l-9.53-32.168h4.17l5.759 19.58 3.892-13.185-1.906-6.395z"/><path d="m64.92 1.006c-.819 0-1.554.295-2.111.861-.591.6-.92 1.376-.92 2.178s.313 1.545.887 2.128c.583.591 1.334.912 2.145.912.793 0 1.562-.321 2.161-.903.574-.557.887-1.3.887-2.136 0-.811-.321-1.57-.878-2.136-.584-.592-1.344-.904-2.171-.904zm2.643 3.065c0 .701-.271 1.351-.768 1.832-.524.507-1.174.777-1.892.777-.675 0-1.342-.278-1.84-.785s-.777-1.157-.777-1.849.287-1.368.802-1.891c.481-.49 1.131-.751 1.84-.751.726 0 1.376.271 1.883.785.49.489.752 1.147.752 1.882zm-2.559-1.807h-1.3v3.445h.65v-1.469h.642l.701 1.469h.726l-.769-1.57c.498-.102.785-.439.785-.929 0-.625-.472-.946-1.435-.946zm-.118.422c.608 0 .886.169.886.591 0 .405-.278.549-.87.549h-.549v-1.14z"/><path d="m59.807.825.676 4.107-2.391 4.575s-.918-1.941-2.443-3.015c-1.285-.905-2.122-1.102-3.431-.832-1.681.347-3.587 2.357-4.419 4.835-.995 2.965-1.005 4.4-1.04 5.718-.056 2.113.277 3.362.277 3.362s-1.452-2.686-1.438-6.62c.009-2.808.451-5.354 1.75-7.867 1.143-2.209 2.842-3.535 4.35-3.691 1.559-.161 2.791.59 3.743 1.403 1 .854 2.01 2.721 2.01 2.721z"/><path d="m60.102 24.063s-1.057 1.889-1.715 2.617c-.659.728-1.837 2.01-3.292 2.651s-2.218.762-3.656.624c-1.437-.138-2.772-.97-3.24-1.317s-1.664-1.369-2.34-2.322-1.733-2.859-1.733-2.859.589 1.91.958 2.721c.212.467.864 1.894 1.789 3.136.863 1.159 2.539 3.154 5.086 3.604 2.547.451 4.297-.693 4.73-.97s1.346-1.042 1.924-1.66c.603-.645 1.174-1.468 1.49-1.962.231-.36.607-1.092.607-1.092z"/></g></svg> </a> <a lang="en" class="home" href="/WAI/"> <span class="wai"><span class="wa">Web Accessibility</span> <span class="i"><span class="initieative">Initiative</span> <span>WAI</span></span></span> </a> <div class="claim"> <span>Strategies, standards, resources to make the Web accessible to people with disabilities</span> </div> <button class="button button-menu" aria-haspopup="true" aria-expanded="false" id="openmenu"><span><svg focusable="false" aria-hidden="true" class="icon-menu "><use xlink:href="/WAI/assets/images/icons.svg#icon-menu"></use></svg> Menu</span></button> </div> <div class="navigations"> <nav class="metanav" aria-label="Meta & Search" lang="en"> <ul> <li><a href="/WAI/about/participating/">Get Involved</a></li> <li><a href="/WAI/about/">About W3C WAI</a></li> <li> <form action="/WAI/search/" role="search"> <div> <label for="header-search"> <span class="visuallyhidden">Search:</span> <input id="header-search" type="search" name="q" placeholder="Search" aria-label="Search"> </label> <button class="button button-icon button-nobg button-noborder"><span><svg focusable="false" aria-label="Submit Search" class="icon-search "><use xlink:href="/WAI/assets/images/icons.svg#icon-search"></use></svg></span></button> </div> </form> </li> </ul> </nav> </div> </header><nav class="mainnav" aria-label="Main" lang="en"><ul><li><a lang="en" href="/WAI/fundamentals/"><span>Accessibility Fundamentals</span></a></li><li><a lang="en" href="/WAI/planning/"><span>Planning & Policies</span></a></li><li><a lang="en" href="/WAI/design-develop/"><span>Design & Develop</span></a></li><li><a lang="en" href="/WAI/test-evaluate/"><span>Test & Evaluate</span></a></li><li><a lang="en" href="/WAI/teach-advocate/"><span>Teach & Advocate</span></a></li><li><a lang="en" href="/WAI/standards-guidelines/"><span>Standards/<wbr>Guidelines</span></a></li></ul></nav><nav class="default-grid breadcrumb" aria-label="Breadcrumb" lang="en"> <ul style="align-self: center;"> <li><a href="/WAI/" lang="en">Home</a></li><li><a lang="en" href="/WAI/standards-guidelines/"><span>Standards/<wbr>Guidelines</span></a></li><li><a lang="en" href="/WAI/standards-guidelines/wcag/"><span>Web Content – WCAG 2</span></a></li><li><a lang="en" href="/WAI/standards-guidelines/wcag/conformance-logos/" aria-current="page"><span>Conformance Logos</span></a></li></ul> </nav> <div class="default-grid with-gap leftcol"> <div class="sidenav"><nav class="sn-contents" aria-label="Secondary"> <ul class="sidenav--list"> <li> <a lang="en" href="/WAI/standards-guidelines/" class="page-link"><span>Standards/<wbr>Guidelines</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/wcag/" aria-current="location" class="page-link"><span>Web Content – WCAG 2</span></a><ul><li> <a lang="en" href="https://www.w3.org/WAI/WCAG21/quickref/" class="page-link"><span>How to Meet WCAG 2 (Quick Reference)</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/wcag/glance/" class="page-link"><span>At a Glance</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/wcag/docs/" class="page-link"><span>The Documents</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/wcag/non-web-ict/" class="page-link"><span>Applying to Non-Web ICT</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/wcag/new-in-22/" class="page-link"><span>New in 2.2</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/wcag/new-in-21/" class="page-link"><span>New in 2.1</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/wcag/translations/" class="page-link"><span>Translations</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/wcag/commenting/" class="page-link"><span>Commenting</span></a></li> <li> <a lang="en" href="/WAI/standards-guidelines/wcag/conformance-logos/" aria-current="page" class="page-link"><span>Conformance Logos</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/wcag/faq/" class="page-link"><span>FAQ</span></a></li></ul></li><li> <a lang="en" href="/WAI/standards-guidelines/wcag/wcag3-intro/" class="page-link"><span>WCAG 3 Draft</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/atag/" class="page-link"><span>Authoring Tool Accessibility Guidelines (ATAG) Overview</span></a><ul><li> <a lang="en" href="/WAI/standards-guidelines/atag/glance/" class="page-link"><span>At a Glance</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/atag/education/" class="page-link"><span>For LMS</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/atag/no-code/" class="page-link"><span>For No-Code Tools</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/atag/social-media/" class="page-link"><span>For Social Media Platforms</span></a></li></ul></li><li> <a lang="en" href="/WAI/standards-guidelines/uaag/" class="page-link"><span>User Agents – UAAG</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/aria/" class="page-link"><span>WAI-ARIA</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/evaluation/" class="page-link"><span>Evaluation – ACT & EARL</span></a><ul><li> <a lang="en" href="/WAI/standards-guidelines/act/" class="page-link"><span>Accessibility Conformance Testing – ACT</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/earl/" class="page-link"><span>Evaluation and Report Language – EARL</span></a></li></ul></li><li> <a lang="en" href="/WAI/adapt/" class="page-link"><span>WAI-Adapt</span></a></li><li> <a lang="en" href="/WAI/pronunciation/" class="page-link"><span>Pronunciation</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/harmonization/" class="page-link"><span>Standards Harmonization is Essential</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/w3c-process/" class="page-link"><span>W3C Process for Developing Standards</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/linking/" class="page-link"><span>Referencing and Linking to Standards</span></a></li><li> <a lang="en" href="/WAI/cognitive/" class="page-link"><span>Cognitive Accessibility at W3C</span></a></li><li> <a lang="en" href="/WAI/standards-guidelines/mobile/" class="page-link"><span>Mobile Accessibility at W3C</span></a></li></ul></nav> </div> <main id="main" lang="en"> <header> <h1> Adding WCAG Conformance Logos </h1></header> <aside class="box box-full"><header class="box-h box-h-full"> <h2> Summary </h2></header><div class="box-i"> <p>This page provides information about conformance logos for WCAG 2.</p> </div></aside> <nav class="box box-simple box-simple" aria-labelledby="tocheading" id="toc"> <header id="tocheading" class="box-h box-h-simple box-h-simple"> Page Contents</header> <div class="box-i"> <ul id="markdown-toc"> <li><a href="#howto" id="markdown-toc-howto">How to use the logos</a> <ul> <li><a href="#wcag-22" id="markdown-toc-wcag-22">WCAG 2.2</a></li> <li><a href="#wcag-21" id="markdown-toc-wcag-21">WCAG 2.1</a></li> <li><a href="#wcag-20" id="markdown-toc-wcag-20">WCAG 2.0</a></li> </ul> </li> <li><a href="#logos" id="markdown-toc-logos">Logos</a> <ul> <li><a href="#wcag-22-logos" id="markdown-toc-wcag-22-logos">WCAG 2.2 Logos</a></li> <li><a href="#wcag-21-logos" id="markdown-toc-wcag-21-logos">WCAG 2.1 Logos</a></li> <li><a href="#wcag-20-logos" id="markdown-toc-wcag-20-logos">WCAG 2.0 Logos</a></li> </ul> </li> <li><a href="#responsibility" id="markdown-toc-responsibility">Responsibility for accuracy of claims</a></li> <li><a href="#scope" id="markdown-toc-scope">Scope of the claim</a></li> </ul> </div> </nav> <p>W3C provides conformance logos for <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web Content Accessibility Guidelines (WCAG) 2</a>. Content providers can use these logos on their sites to indicate a claim of conformance to a specified conformance level of WCAG.</p> <p><strong>Note that these logos do not represent review or validation of conformance by W3C and/or WAI.</strong></p> <p>Conformance to WCAG 2 is defined in the <a href="https://www.w3.org/TR/WCAG/#conformance">Conformance section</a> of WCAG. Here is the excerpt that defines the conformance levels:</p> <ul> <li>For Level A conformance (the minimum level of conformance), the Web page satisfies all the Level A Success Criteria, or a conforming alternate version is provided.</li> <li>For Level AA conformance, the Web page satisfies <em>all the Level A and Level AA Success Criteria</em>, or a Level AA conforming alternate version is provided.</li> <li>For Level AAA conformance, the Web page satisfies <em>all the Level A, Level AA and Level AAA Success Criteria</em>, or a Level AAA conforming alternate version is provided.</li> </ul> <p>Please see <a href="https://www.w3.org/TR/WCAG/#conformance">WCAG 2 Conformance section</a> for more information on what is required in a conformance claim.</p> <h2 id="howto">How to use the logos</h2> <p>Place the icon for the appropriate conformance level using the HTML source code below.</p> <h3 id="wcag-22">WCAG 2.2</h3> <h4 id="wcag-22-level-a-conformance">WCAG 2.2 Level A Conformance</h4> <p>Put the following HTML markup in your page:</p> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://www.w3.org/WAI/WCAG2A-Conformance"</span> <span class="na">title=</span><span class="s">"Explanation of WCAG 2 Level A Conformance"</span><span class="nt">></span> <span class="nt"><img</span> <span class="na">height=</span><span class="s">"32"</span> <span class="na">width=</span><span class="s">"88"</span> <span class="na">src=</span><span class="s">"https://www.w3.org/WAI/WCAG22/wcag2.2A"</span> <span class="na">alt=</span><span class="s">"Level A conformance, W3C WAI Web Content Accessibility Guidelines 2.2"</span><span class="nt">></span> <span class="nt"></a></span> </code></pre></div></div> <p>If you would like to use the blue logo, append “-blue” to the image src.</p> <h4 id="wcag-22-level-aa-conformance">WCAG 2.2 Level AA Conformance</h4> <p>Put the following HTML markup in your page:</p> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://www.w3.org/WAI/WCAG2AA-Conformance"</span> <span class="na">title=</span><span class="s">"Explanation of WCAG 2 Level AA conformance"</span><span class="nt">></span> <span class="nt"><img</span> <span class="na">height=</span><span class="s">"32"</span> <span class="na">width=</span><span class="s">"88"</span> <span class="na">src=</span><span class="s">"https://www.w3.org/WAI/WCAG22/wcag2.2AA"</span> <span class="na">alt=</span><span class="s">"Level AA conformance, W3C WAI Web Content Accessibility Guidelines 2.2"</span><span class="nt">></span> <span class="nt"></a></span> </code></pre></div></div> <p>If you would like to use the blue logo, append “-blue” to the image src.</p> <h4 id="wcag-22-level-aaa-conformance">WCAG 2.2 Level AAA Conformance</h4> <p>Put the following HTML markup in your page:</p> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://www.w3.org/WAI/WCAG2AAA-Conformance"</span> <span class="na">title=</span><span class="s">"Explanation of WCAG 2 Level AAA conformance"</span><span class="nt">></span> <span class="nt"><img</span> <span class="na">height=</span><span class="s">"32"</span> <span class="na">width=</span><span class="s">"88"</span> <span class="na">src=</span><span class="s">"https://www.w3.org/WAI/WCAG22/wcag2.2AAA"</span> <span class="na">alt=</span><span class="s">"Level AAA conformance, W3C WAI Web Content Accessibility Guidelines 2.2"</span><span class="nt">></span> <span class="nt"></a></span> </code></pre></div></div> <p>If you would like to use the blue logo, append “-blue” to the image src.</p> <h3 id="wcag-21">WCAG 2.1</h3> <h4 id="wcag-21-level-a-conformance">WCAG 2.1 Level A Conformance</h4> <p>Put the following HTML markup in your page:</p> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://www.w3.org/WAI/WCAG2A-Conformance"</span> <span class="na">title=</span><span class="s">"Explanation of WCAG 2 Level A Conformance"</span><span class="nt">></span> <span class="nt"><img</span> <span class="na">height=</span><span class="s">"32"</span> <span class="na">width=</span><span class="s">"88"</span> <span class="na">src=</span><span class="s">"https://www.w3.org/WAI/WCAG21/wcag2.1A-v"</span> <span class="na">alt=</span><span class="s">"Level A conformance, W3C WAI Web Content Accessibility Guidelines 2.1"</span><span class="nt">></span> <span class="nt"></a></span> </code></pre></div></div> <p>If you would like to use the blue logo, append “-blue” to the image src.</p> <h4 id="wcag-21-level-aa-conformance">WCAG 2.1 Level AA Conformance</h4> <p>Put the following HTML markup in your page:</p> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://www.w3.org/WAI/WCAG2AA-Conformance"</span> <span class="na">title=</span><span class="s">"Explanation of WCAG 2 Level AA conformance"</span><span class="nt">></span> <span class="nt"><img</span> <span class="na">height=</span><span class="s">"32"</span> <span class="na">width=</span><span class="s">"88"</span> <span class="na">src=</span><span class="s">"https://www.w3.org/WAI/WCAG21/wcag2.1AA-v"</span> <span class="na">alt=</span><span class="s">"Level AA conformance, W3C WAI Web Content Accessibility Guidelines 2.1"</span><span class="nt">></span> <span class="nt"></a></span> </code></pre></div></div> <p>If you would like to use the blue logo, append “-blue” to the image src.</p> <h4 id="wcag-21-level-aaa-conformance">WCAG 2.1 Level AAA Conformance</h4> <p>Put the following HTML markup in your page:</p> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://www.w3.org/WAI/WCAG2AAA-Conformance"</span> <span class="na">title=</span><span class="s">"Explanation of WCAG 2 Level AAA conformance"</span><span class="nt">></span> <span class="nt"><img</span> <span class="na">height=</span><span class="s">"32"</span> <span class="na">width=</span><span class="s">"88"</span> <span class="na">src=</span><span class="s">"https://www.w3.org/WAI/WCAG21/wcag2.1AAA-v"</span> <span class="na">alt=</span><span class="s">"Level AAA conformance, W3C WAI Web Content Accessibility Guidelines 2.1"</span><span class="nt">></span> <span class="nt"></a></span> </code></pre></div></div> <p>If you would like to use the blue logo, append “-blue” to the image src.</p> <h3 id="wcag-20">WCAG 2.0</h3> <h4 id="wcag-20-level-a-conformance">WCAG 2.0 Level A Conformance</h4> <p>Put the following HTML markup in your page:</p> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://www.w3.org/WAI/WCAG2A-Conformance"</span> <span class="na">title=</span><span class="s">"Explanation of WCAG 2 Level A Conformance"</span><span class="nt">></span> <span class="nt"><img</span> <span class="na">height=</span><span class="s">"32"</span> <span class="na">width=</span><span class="s">"88"</span> <span class="na">src=</span><span class="s">"https://www.w3.org/WAI/wcag2A"</span> <span class="na">alt=</span><span class="s">"Level A conformance, W3C WAI Web Content Accessibility Guidelines 2.0"</span><span class="nt">></span> <span class="nt"></a></span> </code></pre></div></div> <p>If you would like to use the blue logo, append “-blue” to the image src.</p> <h4 id="wcag-20-level-aa-conformance">WCAG 2.0 Level AA Conformance</h4> <p>Put the following HTML markup in your page:</p> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://www.w3.org/WAI/WCAG2AA-Conformance"</span> <span class="na">title=</span><span class="s">"Explanation of WCAG 2 Level AA conformance"</span><span class="nt">></span> <span class="nt"><img</span> <span class="na">height=</span><span class="s">"32"</span> <span class="na">width=</span><span class="s">"88"</span> <span class="na">src=</span><span class="s">"https://www.w3.org/WAI/wcag2AA"</span> <span class="na">alt=</span><span class="s">"Level AA conformance, W3C WAI Web Content Accessibility Guidelines 2.0"</span><span class="nt">></span> <span class="nt"></a></span> </code></pre></div></div> <p>If you would like to use the blue logo, append “-blue” to the image src.</p> <h4 id="wcag-20-level-aaa-conformance">WCAG 2.0 Level AAA Conformance</h4> <p>Put the following HTML markup in your page:</p> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://www.w3.org/WAI/WCAG2AAA-Conformance"</span> <span class="na">title=</span><span class="s">"Explanation of WCAG 2 Level AAA conformance"</span><span class="nt">></span> <span class="nt"><img</span> <span class="na">height=</span><span class="s">"32"</span> <span class="na">width=</span><span class="s">"88"</span> <span class="na">src=</span><span class="s">"https://www.w3.org/WAI/wcag2AAA"</span> <span class="na">alt=</span><span class="s">"Level AAA conformance, W3C WAI Web Content Accessibility Guidelines 2.0"</span><span class="nt">></span> <span class="nt"></a></span> </code></pre></div></div> <p>If you would like to use the blue logo, append “-blue” to the image src.</p> <h2 id="logos">Logos</h2> <p>The blue and gold colors do not indicate any difference. We offer the two options for flexibility with your visual design.</p> <p>Below are the logos as they will appear in your site.</p> <p>You may also choose to download and use local copies of the logos, using the links provided for each logo. You will have to adjust the HTML accordingly, and please use the same alternative text and link for the logo.</p> <h3 id="wcag-22-logos">WCAG 2.2 Logos</h3> <table> <thead> <tr> <th> </th> <th scope="col">A</th> <th scope="col">AA</th> <th scope="col">AAA</th> </tr> </thead> <tbody> <tr> <th scope="row">Gold</th> <td><img src="https://www.w3.org/WAI/WCAG22/wcag2.2A.png" alt="Level A conformance icon, W3C-WAI Web Content Accessibility Guidelines 2.2" width="88" height="31" /><br /> (<a href="https://www.w3.org/WAI/WCAG22/wcag2.2A.png" title="PNG version of WCAG 2.2 Level A conformance icon">png</a>, <a href="https://www.w3.org/WAI/WCAG22/wcag2.2A.gif" title="GIF version of WCAG 2.2 Level A conformance icon">gif</a>, <a href="https://www.w3.org/WAI/WCAG22/wcag2.2A.svg" title="SVG version of WCAG 2.2 Level A conformance icon">svg</a>, <a href="https://www.w3.org/WAI/WCAG22/wcag2.2A.eps" title="EPS version of WCAG 2.2 Level A conformance icon">eps</a>)</td> <td><img src="https://www.w3.org/WAI/WCAG22/wcag2.2AA.png" alt="Level AA conformance icon, W3C-WAI Web Content Accessibility Guidelines 2.2" width="88" height="31" /><br /> (<a href="https://www.w3.org/WAI/WCAG22/wcag2.2AA.png" title="PNG version of WCAG 2.2 Level AA conformance icon">png</a>, <a href="https://www.w3.org/WAI/WCAG22/wcag2.2AA.gif" title="GIF version of WCAG 2.2 Level AA conformance icon">gif</a>, <a href="https://www.w3.org/WAI/WCAG22/wcag2.2AA.svg" title="SVG version of WCAG 2.2 Level AA conformance icon">svg</a>, <a href="https://www.w3.org/WAI/WCAG22/wcag2.2AA.eps" title="EPS version of WCAG 2.2 Level AA conformance icon">eps</a>)</td> <td><img src="https://www.w3.org/WAI/WCAG22/wcag2.2AAA.png" alt="Level AAA conformance icon, W3C-WAI Web Content Accessibility Guidelines 2.2" width="88" height="31" /><br /> (<a href="https://www.w3.org/WAI/WCAG22/wcag2.2AAA.png" title="PNG version of WCAG 2.2 Level AAA conformance icon">png</a>, <a href="https://www.w3.org/WAI/WCAG22/wcag2.2AAA.gif" title="GIF version of WCAG 2.2 Level AAA conformance icon">gif</a>, <a href="https://www.w3.org/WAI/WCAG22/wcag2.2AAA.svg" title="SVG version of WCAG 2.2 Level AAA conformance icon">svg</a>, <a href="https://www.w3.org/WAI/WCAG22/wcag2.2AAA.eps" title="EPS version of WCAG 2.2 Level AAA conformance icon">eps</a>)</td> </tr> <tr> <th scope="row">Blue</th> <td><img src="https://www.w3.org/WAI/WCAG22/wcag2.2A-blue.png" alt="Level A conformance icon, W3C-WAI Web Content Accessibility Guidelines 2.2 (blue)" width="88" height="31" /><br /> (<a href="https://www.w3.org/WAI/WCAG22/wcag2.2A-blue.png" title="PNG version of WCAG 2.2 Level A conformance icon (blue)">png</a>, <a href="https://www.w3.org/WAI/WCAG22/wcag2.2A-blue.gif" title="GIF version of WCAG 2.2 Level A conformance icon (blue)">gif</a>, <a href="https://www.w3.org/WAI/WCAG22/wcag2.2A-blue.svg" title="SVG version of WCAG 2.2 Level A conformance icon (blue)">svg</a>, <a href="https://www.w3.org/WAI/WCAG22/wcag2.2A-blue.eps" title="EPS version of WCAG 2.2 Level A conformance icon (blue)">eps</a>)</td> <td><img src="https://www.w3.org/WAI/WCAG22/wcag2.2AA-blue.png" alt="WCAG 2.2 AA (blue)" width="88" height="31" /><br /> (<a href="https://www.w3.org/WAI/WCAG22/wcag2.2AA-blue.png" title="PNG version of WCAG 2.2 Level AA conformance icon (blue)">png</a>, <a href="https://www.w3.org/WAI/WCAG22/wcag2.2AA-blue.gif" title="GIF version of WCAG 2.2 Level AA conformance icon (blue)">gif</a>, <a href="https://www.w3.org/WAI/WCAG22/wcag2.2AA-blue.svg" title="SVG version of WCAG 2.2 Level AA conformance icon (blue)">svg</a>, <a href="https://www.w3.org/WAI/WCAG22/wcag2.2AA-blue.eps" title="EPS version of WCAG 2.2 Level AA conformance icon (blue)">eps</a>)</td> <td><img src="https://www.w3.org/WAI/WCAG22/wcag2.2AAA-blue.png" alt="Level AAA conformance icon, W3C-WAI Web Content Accessibility Guidelines 2.2 (blue)" width="88" height="31" /><br /> (<a href="https://www.w3.org/WAI/WCAG22/wcag2.2AAA-blue.png" title="PNG version of WCAG 2.2 Level AAA conformance icon (blue)">png</a>, <a href="https://www.w3.org/WAI/WCAG22/wcag2.2AAA-blue.gif" title="GIF version of WCAG 2.2 Level AAA conformance icon (blue)">gif</a>, <a href="https://www.w3.org/WAI/WCAG22/wcag2.2AAA-blue.svg" title="SVG version of WCAG 2.2 Level AAA conformance icon (blue)">svg</a>, <a href="https://www.w3.org/WAI/WCAG22/wcag2.2AAA-blue.eps" title="EPS version of WCAG 2.2 Level AAA conformance icon (blue)">eps</a>)</td> </tr> </tbody> </table> <h3 id="wcag-21-logos">WCAG 2.1 Logos</h3> <table> <thead> <tr> <th> </th> <th scope="col">A</th> <th scope="col">AA</th> <th scope="col">AAA</th> </tr> </thead> <tbody> <tr> <th scope="row">Gold</th> <td><img src="https://www.w3.org/WAI/wcag21/wcag2.1A-v.png" alt="Level A conformance icon, W3C-WAI Web Content Accessibility Guidelines 2.1" width="88" height="31" /><br /> (<a href="https://www.w3.org/WAI/wcag21/wcag2.1A-v.png" title="PNG version of WCAG 2.1 Level A conformance icon">png</a>, <a href="https://www.w3.org/WAI/wcag21/wcag2.1A-v.gif" title="GIF version of WCAG 2.1 Level A conformance icon">gif</a>, <a href="https://www.w3.org/WAI/wcag21/wcag2.1A-v.svg" title="SVG version of WCAG 2.1 Level A conformance icon">svg</a>, <a href="https://www.w3.org/WAI/wcag21/wcag2.1A-v.eps" title="EPS version of WCAG 2.1 Level A conformance icon">eps</a>)</td> <td><img src="https://www.w3.org/WAI/wcag21/wcag2.1AA-v.png" alt="Level AA conformance icon, W3C-WAI Web Content Accessibility Guidelines 2.1" width="88" height="31" /><br /> (<a href="https://www.w3.org/WAI/wcag21/wcag2.1AA-v.png" title="PNG version of WCAG 2.1 Level AA conformance icon">png</a>, <a href="https://www.w3.org/WAI/wcag21/wcag2.1AA-v.gif" title="GIF version of WCAG 2.1 Level AA conformance icon">gif</a>, <a href="https://www.w3.org/WAI/wcag21/wcag2.1AA-v.svg" title="SVG version of WCAG 2.1 Level AA conformance icon">svg</a>, <a href="https://www.w3.org/WAI/wcag21/wcag2.1AA-v.eps" title="EPS version of WCAG 2.1 Level AA conformance icon">eps</a>)</td> <td><img src="https://www.w3.org/WAI/wcag21/wcag2.1AAA-v.png" alt="Level AAA conformance icon, W3C-WAI Web Content Accessibility Guidelines 2.1" width="88" height="31" /><br /> (<a href="https://www.w3.org/WAI/wcag21/wcag2.1AAA-v.png" title="PNG version of WCAG 2.1 Level AAA conformance icon">png</a>, <a href="https://www.w3.org/WAI/wcag21/wcag2.1AAA-v.gif" title="GIF version of WCAG 2.1 Level AAA conformance icon">gif</a>, <a href="https://www.w3.org/WAI/wcag21/wcag2.1AAA-v.svg" title="SVG version of WCAG 2.1 Level AAA conformance icon">svg</a>, <a href="https://www.w3.org/WAI/wcag21/wcag2.1AAA-v.eps" title="EPS version of WCAG 2.1 Level AAA conformance icon">eps</a>)</td> </tr> <tr> <th scope="row">Blue</th> <td><img src="https://www.w3.org/WAI/wcag21/wcag2.1A-blue-v.png" alt="Level A conformance icon, W3C-WAI Web Content Accessibility Guidelines 2.1 (blue)" width="88" height="31" /><br /> (<a href="https://www.w3.org/WAI/wcag21/wcag2.1A-blue-v.png" title="PNG version of WCAG 2.1 Level A conformance icon (blue)">png</a>, <a href="https://www.w3.org/WAI/wcag21/wcag2.1A-blue-v.gif" title="GIF version of WCAG 2.1 Level A conformance icon (blue)">gif</a>, <a href="https://www.w3.org/WAI/wcag21/wcag2.1A-blue-v.svg" title="SVG version of WCAG 2.1 Level A conformance icon (blue)">svg</a>, <a href="https://www.w3.org/WAI/wcag21/wcag2.1A-blue-v.eps" title="EPS version of WCAG 2.1 Level A conformance icon (blue)">eps</a>)</td> <td><img src="https://www.w3.org/WAI/wcag21/wcag2.1AA-blue-v.png" alt="WCAG 2.1 AA (blue)" width="88" height="31" /><br /> (<a href="https://www.w3.org/WAI/wcag21/wcag2.1AA-blue-v.png" title="PNG version of WCAG 2.1 Level AA conformance icon (blue)">png</a>, <a href="https://www.w3.org/WAI/wcag21/wcag2.1AA-blue-v.gif" title="GIF version of WCAG 2.1 Level AA conformance icon (blue)">gif</a>, <a href="https://www.w3.org/WAI/wcag21/wcag2.1AA-blue-v.svg" title="SVG version of WCAG 2.1 Level AA conformance icon (blue)">svg</a>, <a href="https://www.w3.org/WAI/wcag21/wcag2.1AA-blue-v.eps" title="EPS version of WCAG 2.1 Level AA conformance icon (blue)">eps</a>)</td> <td><img src="https://www.w3.org/WAI/wcag21/wcag2.1AAA-blue-v.png" alt="Level AAA conformance icon, W3C-WAI Web Content Accessibility Guidelines 2.1 (blue)" width="88" height="31" /><br /> (<a href="https://www.w3.org/WAI/wcag21/wcag2.1AAA-blue-v.png" title="PNG version of WCAG 2.1 Level AAA conformance icon (blue)">png</a>, <a href="https://www.w3.org/WAI/wcag21/wcag2.1AAA-blue-v.gif" title="GIF version of WCAG 2.1 Level AAA conformance icon (blue)">gif</a>, <a href="https://www.w3.org/WAI/wcag21/wcag2.1AAA-blue-v.svg" title="SVG version of WCAG 2.1 Level AAA conformance icon (blue)">svg</a>, <a href="https://www.w3.org/WAI/wcag21/wcag2.1AAA-blue-v.eps" title="EPS version of WCAG 2.1 Level AAA conformance icon (blue)">eps</a>)</td> </tr> </tbody> </table> <h3 id="wcag-20-logos">WCAG 2.0 Logos</h3> <table> <thead> <tr> <th> </th> <th scope="col">A</th> <th scope="col">AA</th> <th scope="col">AAA</th> </tr> </thead> <tbody> <tr> <th scope="row">Gold</th> <td><img src="https://www.w3.org/WAI/wcag2A" alt="Level A conformance icon, W3C-WAI Web Content Accessibility Guidelines 2.0" width="88" height="31" /><br /> (<a href="https://www.w3.org/WAI/wcag2A.png" title="PNG version of WCAG 2.0 Level A conformance icon">png</a>, <a href="https://www.w3.org/WAI/wcag2A.gif" title="GIF version of WCAG 2.0 Level A conformance icon">gif</a>, <a href="https://www.w3.org/WAI/wcag2A-v.svg" title="SVG version of WCAG 2.0 Level A conformance icon">svg</a>, <a href="https://www.w3.org/WAI/wcag2A-v.eps" title="EPS version of WCAG 2.0 Level A conformance icon">eps</a>)</td> <td><img src="https://www.w3.org/WAI/wcag2AA" alt="Level AA conformance icon, W3C-WAI Web Content Accessibility Guidelines 2.0" width="88" height="31" /><br /> (<a href="https://www.w3.org/WAI/wcag2AA.png" title="PNG version of WCAG 2.0 Level AA conformance icon">png</a>, <a href="https://www.w3.org/WAI/wcag2AA.gif" title="GIF version of WCAG 2.0 Level AA conformance icon">gif</a>, <a href="https://www.w3.org/WAI/wcag2AA-v.svg" title="SVG version of WCAG 2.0 Level AA conformance icon">svg</a>, <a href="https://www.w3.org/WAI/wcag2AA-v.eps" title="EPS version of WCAG 2.0 Level AA conformance icon">eps</a>)</td> <td><img src="https://www.w3.org/WAI/wcag2AAA" alt="Level AAA conformance icon, W3C-WAI Web Content Accessibility Guidelines 2.0" width="88" height="31" /><br /> (<a href="https://www.w3.org/WAI/wcag2AAA.png" title="PNG version of WCAG 2.0 Level AAA conformance icon">png</a>, <a href="https://www.w3.org/WAI/wcag2AAA.gif" title="GIF version of WCAG 2.0 Level AAA conformance icon">gif</a>, <a href="https://www.w3.org/WAI/wcag2AAA-v.svg" title="SVG version of WCAG 2.0 Level AAA conformance icon">svg</a>, <a href="https://www.w3.org/WAI/wcag2AAA-v.eps" title="EPS version of WCAG 2.0 Level AAA conformance icon">eps</a>)</td> </tr> <tr> <th scope="row">Blue</th> <td><img src="https://www.w3.org/WAI/wcag2A-blue" alt="Level A conformance icon, W3C-WAI Web Content Accessibility Guidelines 2.0 (blue)" width="88" height="31" /><br /> (<a href="https://www.w3.org/WAI/wcag2A-blue.png" title="PNG version of WCAG 2.0 Level A conformance icon (blue)">png</a>, <a href="https://www.w3.org/WAI/wcag2A-blue.gif" title="GIF version of WCAG 2.0 Level A conformance icon (blue)">gif</a>, <a href="https://www.w3.org/WAI/wcag2A-blue-v.svg" title="SVG version of WCAG 2.0 Level A conformance icon (blue)">svg</a>, <a href="https://www.w3.org/WAI/wcag2A-blue-v.eps" title="EPS version of WCAG 2.0 Level A conformance icon (blue)">eps</a>)</td> <td><img src="https://www.w3.org/WAI/wcag2AA-blue" alt="WCAG 2.0 AA (blue)" width="88" height="31" /><br /> (<a href="https://www.w3.org/WAI/wcag2AA-blue.png" title="PNG version of WCAG 2.0 Level AA conformance icon (blue)">png</a>, <a href="https://www.w3.org/WAI/wcag2AA-blue.gif" title="GIF version of WCAG 2.0 Level AA conformance icon (blue)">gif</a>, <a href="https://www.w3.org/WAI/wcag2AA-blue-v.svg" title="SVG version of WCAG 2.0 Level AA conformance icon (blue)">svg</a>, <a href="https://www.w3.org/WAI/wcag2AA-blue-v.eps" title="EPS version of WCAG 2.0 Level AA conformance icon (blue)">eps</a>)</td> <td><img src="https://www.w3.org/WAI/wcag2AAA-blue" alt="Level AAA conformance icon, W3C-WAI Web Content Accessibility Guidelines 2.0 (blue)" width="88" height="31" /><br /> (<a href="https://www.w3.org/WAI/wcag2AAA-blue.png" title="PNG version of WCAG 2.0 Level AAA conformance icon (blue)">png</a>, <a href="https://www.w3.org/WAI/wcag2AAA-blue.gif" title="GIF version of WCAG 2.0 Level AAA conformance icon (blue)">gif</a>, <a href="https://www.w3.org/WAI/wcag2AAA-blue-v.svg" title="SVG version of WCAG 2.0 Level AAA conformance icon (blue)">svg</a>, <a href="https://www.w3.org/WAI/wcag2AAA-blue-v.eps" title="EPS version of WCAG 2.0 Level AAA conformance icon (blue)">eps</a>)</td> </tr> </tbody> </table> <h2 id="responsibility">Responsibility for accuracy of claims</h2> <p>Content providers are solely responsible for the use of these logos. Before using these logos as part of a conformance claim, we recommend that the provider understand <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web Content Accessibility Guidelines (WCAG) 2</a> and sufficiently <a href="https://www.w3.org/WAI/test-evaluate/conformance/">evaluate accessibility</a> to ensure that pages using this logo meet the conformance level claimed. Providers should also ensure that anyone maintaining or updating the site is familiar with WCAG and the logo use, and either re-reviews the page or removes the logo from the page if they are unsure whether it still meets a specified conformance level.</p> <p><strong>Please note that use of this logo is not based on an automated test.</strong> No tool alone can determine if a page conforms to WCAG requirements. Sometimes evaluation tools can produce false or misleading results. Knowledgeable human evaluation is required to determine if a page is accessible. For these reasons, the logos on this page are used to indicate only a claim of conformance made by thorough evaluation, <em>not only tool evaluation</em>.</p> <h2 id="scope">Scope of the claim</h2> <p>By default, a conformance icon refers to a single page. If the claim is meant to apply to include more than one page, the conformance icon must be accompanied by explicit scope information explaining which pages are covered by the claim.</p> <aside class="box box-icon box-space-above" id="helpimprove" aria-label="feedback"><header class="box-h box-h-icon box-h-space-above box-h-icon"> <svg focusable="false" aria-hidden="true" class="icon-comments "><use xlink:href="/WAI/assets/images/icons.svg#icon-comments"></use></svg> <h2> Help improve this page </h2></header><div class="box-i"><p>Please share your ideas, suggestions, or comments via e-mail to the publicly-archived list <a href="mailto:wai@w3.org?body=%5Binclude%20a%20relevant%20email%20Subject%5D%0A%0A%5Bput%20comment%20here...%5D%0A%0AI%20give%20permission%20to%20share%20this%20to%20a%20publicly-archived%20e-mail%20list.">wai@w3.org</a> or via GitHub.</p> <div class="button-group"> <a href="mailto:wai@w3.org?body=%5Binclude%20a%20relevant%20email%20Subject%5D%0A%0A%5Bput%20comment%20here...%5D%0A%0AI%20give%20permission%20to%20share%20this%20to%20a%20publicly-archived%20e-mail%20list." class="button"><span>E-mail</span></a><a href=" https://github.com/w3c/wai-website/edit/main/pages/standards-guidelines/wcag/conformance-logos.md " class="button"><span>Fork & Edit on GitHub</span></a><a href="https://github.com/w3c/wai-website/issues/new?template=content-issue.yml&wai-resource-id=wai-wcag-intro&wai-url=https://www.w3.org/WAI/standards-guidelines/wcag/conformance-logos/" class="button"><span>New GitHub Issue</span></a></div></div></aside> <a class="button button-backtotop" href="#top"><span><svg focusable="false" aria-hidden="true" class="icon-arrow-up "><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-up"></use></svg> Back to Top</span></a> </main> </div> <footer id="wai-site-footer" class="page-footer default-grid" aria-label="Page"> <div class="inner"><p><strong>Updated:</strong> 15 October 2020.</p><p><strong>Editor:</strong> <a href="https://www.w3.org/People/Shawn">Shawn Lawton Henry</a>. <p>Developed with input from the Accessibility Education and Outreach Working Group (<a href="https://www.w3.org/WAI/about/groups/eowg/">EOWG</a>) and the Accessibility Guidelines Working Group (<a href="https://www.w3.org/WAI/about/groups/agwg/">AG WG</a>).</p> </div> </footer> <footer class="site-footer grid-4q" aria-label="Site"> <div class="q1-start q3-end about"> <div> <p><a class="largelink" href="https://www.w3.org/WAI/" lang="en" dir="auto" translate="no">W3C Web Accessibility Initiative (WAI)</a></p> <p>Strategies, standards, and supporting resources to make the Web accessible to people with disabilities.</p> </div> <div class="social" lang="en" dir="auto" translate="no"> <ul> <li><a href="https://w3c.social/@wai"><svg focusable="false" aria-hidden="true" class="icon-mastodon "><use xlink:href="/WAI/assets/images/icons.svg#icon-mastodon"></use></svg> Mastodon</a></li> <li><a href="https://www.linkedin.com/company/w3c-wai/"><svg focusable="false" aria-hidden="true" class="icon-linkedin "><use xlink:href="/WAI/assets/images/icons.svg#icon-linkedin"></use></svg> LinkedIn</a></li> <li><a href="https://www.w3.org/WAI/feed.xml"><svg focusable="false" aria-hidden="true" class="icon-rss "><use xlink:href="/WAI/assets/images/icons.svg#icon-rss"></use></svg> Feed</a></li> <li><a href="https://www.youtube.com/channel/UCU6ljj3m1fglIPjSjs2DpRA/playlists/"><svg focusable="false" aria-hidden="true" class="icon-youtube "><use xlink:href="/WAI/assets/images/icons.svg#icon-youtube"></use></svg> YouTube</a></li> <li><a href="https://www.w3.org/WAI/news/subscribe/" class="button">Get News in Email</a></li> </ul> </div> <div lang="en" dir="auto" translate="no"> <p>Copyright © 2024 World Wide Web Consortium (<a href="https://www.w3.org/">W3C</a><sup>®</sup>). See <a href="/WAI/about/using-wai-material/">Permission to Use WAI Material</a>.</p> </div> </div> <div lang="en" dir="auto" translate="no" class="q4-start q4-end"> <ul style="margin-bottom:0"> <li><a href="/WAI/about/contacting/">Contact WAI</a></li> <li><a href="/WAI/sitemap/">Site Map</a></li> <li><a href="/WAI/news/">News</a></li> <li><a href="/WAI/sitemap/#archive">Archive</a></li> <li><a href="/WAI/about/accessibility-statement/">Accessibility Statement</a></li> <li><a href="/WAI/translations/"> Translations</a></li> <li><a href="/WAI/roles/">Resources for Roles</a></li> </ul> </div> </footer> <script src="/WAI/assets/scripts/details4everybody.js?1732321439590790613"></script>  <script src="/WAI/assets/scripts/svg4everybody.js?1732321439590790613"></script> <script> svg4everybody(); </script><script> var translationStrings = {}; </script> </body> </html>