a11y_contrast_check/index.html at master · shelleyvadams/a11y_contrast_check · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Contrast Checker</title>
    <link rel="stylesheet" href="style.css" type="text/css"/>
  </head>
  <body>
    <main>
      <h1>Contrast Checker</h1>
      <form id="color_select">
        <fieldset>
          <legend>Select Colors</legend>
          <label>Foreground <input id="fg_color" type="color" value="#000000"/></label>
          <label>Background <input id="bg_color" type="color" value="#ffffff"/></label>
        </fieldset>
        <label>Contrast Rating <small>(Ratio)</small>
          <output id="contrast" for="bg_color fg_color">
            <span id="rating"></span>
            <small>(<data id="ratio"></data>)</small>
          </output>
        </label>
        <details>
          <summary>Rating details &amp; definitions</summary>
          <dl>
            <dt>Great!</dt>
            <dd>The contrast ratio is 7:1 or higher. This follows the <abbr title="Web Content Accessibility Guidelines, version 2.0">WCAG 2.0</abbr> <a href="https://www.w3.org/TR/WCAG20/#visual-audio-contrast7" title="Guideline 1.4.6">Level AAA <q>Contrast (Enhanced)</q></a> guideline.</dd>
            <dt>Good.</dt>
            <dd>The contrast ratio is 4.5:1 or higher. This follows:
              <ul>
                <li>The <abbr title="Web Content Accessibility Guidelines, version 2.0">WCAG 2.0</abbr> <a href="https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast" title="Guideline 1.4.3">Level AA <q>Contrast (Minimum)</q></a> guideline, and</li>
                <li>The <abbr title="Web Content Accessibility Guidelines, version 2.0">WCAG 2.0</abbr> <a href="https://www.w3.org/TR/WCAG20/#visual-audio-contrast7" title="Guideline 1.4.6">Level AAA <q>Contrast (Enhanced)</q></a> guideline for <em>large scale text</em>.</li>
              </ul>
            </dd>
            <dt>Acceptable for large text.</dt>
            <dd>The contrast ratio is 3:1 or higher. This follows the <abbr title="Web Content Accessibility Guidelines, version 2.0">WCAG 2.0</abbr> <a href="https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast" title="Guideline 1.4.3">Level AA <q>Contrast (Minimum)</q></a> guideline for <em>large scale text</em>.</dd>
            <dt>Poor.</dt>
            <dd>The contrast ratio is less than 3:1. Unless this is <q>Incidental</q> text or text within a logo, it does not follow with the <abbr title="Web Content Accessibility Guidelines, version 2.0">WCAG 2.0</abbr> contrast guidelines. Depending on other factors, it may still follow the <abbr title="Web Content Accessibility Guidelines, version 2.0">WCAG 2.0</abbr> <a href="https://www.w3.org/TR/WCAG20/#visual-audio-contrast-without-color" title="Guideline 1.4.1">Level A <q>Use of Color</q></a> guideline.</dd>
            <dt>Large scale text</dt>
            <dd><a href="https://www.w3.org/TR/WCAG20/#larger-scaledef">Defined</a> as <q>&hellip;at least 18 point or 14 point bold&hellip; roughly equivalent to 1.2 and 1.5&nbsp;em&hellip;</q>; given typical defaults:
              <ul>
                <li>1.2em&nbsp;=&nbsp;19.2<abbr title="pixels">px</abbr>,</li>
                <li>1.5em&nbsp;=&nbsp;24<abbr title="pixels">px</abbr>.</li>
              </ul>
            </dd>
          </dl>
        </details>
      </form>
      <section>
        <header>
        <h1>Sample</h1>
        <aside>
          <h1><abbr title="Cascading Stylesheets">CSS</abbr> Code</h1>
          <pre>color: <output id="fg_hex" for="fg_color" form="color_select"></output>;<br/>background-color: <output id="bg_hex" for="bg_color" form="color_select"></output>;</pre>
        </aside>
        <form id="sample_visibility">
          <label>Show text
            <select id="visibility">
              <option value="*">With any contrast level</option>
              <option value="minimum">With at least minimum contrast</option>
              <option value="enhanced">With enhanced contrast only</option>
            </select>
          </label>
        </form>
        </header>

        <blockquote id="sample">
          <h2 class="sample-large" title="large scale: 1.5em (normal weight)">Lorem ipsum dolor sit amet</h2>
          <p class="sample-default">Consectetur adipiscing elit. Ut vitae odio sed augue venenatis ullamcorper sit amet eu diam. Proin turpis dui, dapibus nec arcu ut, rutrum venenatis leo. Integer non leo ac leo tempor suscipit vitae at diam. <em title="example italic text">Morbi feugiat mattis egestas.</em> Fusce sit amet bibendum justo, in volutpat dui. Aenean quis massa vitae ante lobortis auctor. Aliquam erat volutpat. Curabitur tempor dui tortor, in dictum arcu tristique non. <strong title="example bold text">Nullam lacinia metus nisi.</strong> Quisque vitae metus eu nisi ornare varius quis eu arcu. Proin cursus lectus nisl, et pretium nunc pharetra vitae. Donec ligula odio,<sup title="example superscript">42</sup> venenatis sit amet risus et, eleifend vehicula velit. Praesent eget enim vehicula, pretium eros et, condimentum enim.</p>
          <form id="sample_form">
            <fieldset>
              <legend class="sample-large" title="large scale: 1.2em bold">Cras at lectus eu dolor tempus porttitor eu ac lorem</legend>
              <div class="sample-default">
                <label>Cras ligula nisi</label>
                <input type="text" value="auctor sed volutpat quis, mattis vitae eros"/>
              </div>
              <div class="sample-incidental" title="Incidental text (inactive form element)">
                <label class="disabled">Pellentesque</label>
                <input type="text" disabled="disabled" value="habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas"/>
              </div>
            </fieldset>
          </form>
          <p class="sample-default">Donec pulvinar rutrum augue iaculis maximus. Nulla auctor, orci sed semper tristique, elit sapien condimentum lectus, sit amet semper libero felis ut felis. Sed mollis ipsum non lacus dignissim, ac dictum dolor tempus. Pellentesque dignissim ligula bibendum, tristique augue a, placerat ex. Aenean sed laoreet purus. Aliquam fermentum purus a augue ullamcorper faucibus.</p>
        </blockquote>
      </section>
      <section>
        <h1>References</h1>
        <ul>
          <li>Caldwell, Ben; Cooper, Michael; Reid, Loretta Guarino &amp; Vanderheiden, Gregg (<abbr title="editors">eds.</abbr>) (<time datetime="2008-12-11">11 December 2008</time>).
            <cite><a href="https://www.w3.org/TR/WCAG20/">Web Content Accessibility Guidelines (WCAG) 2.0</a></cite> <abbr title="World Wide Web Consortium">W3C</abbr>.</li>
          <li>Lipsum.com (<abbr title="no date">n.d.</abbr>). <cite><a href="http://lipsum.com">Lipsum generator</a>.</cite></li>
        </ul>
        <h2>Inspirations</h2>
        <ul>
          <li>Morse, Adam (<time datetime="2016-01-20">20 January 2016</time>). <q><a href="http://clrs.cc/a11y/">A11y Stats</a>.</q> <cite>Colors.</cite></li>
          <li><cite>Juicy Studio</cite> (<abbr title="no date">n.d.</abbr>). <q><a href="http://juicystudio.com/services/luminositycontrastratio.php">Luminosity Colour Contrast Ratio Analyser</a>.</q></li>
        </ul>
      </section>
      <footer>
        <p>A nifty tool by <a href="https://github.com/shelleyvadams" rel="author">Shelley V. Adams.</a></p>
        <dl>
          <dt>GitHub</dt>
          <dd><a href="https://github.com/shelleyvadams/a11y_contrast_check">Source Code</a></dd>
          <dd><a href="http://shelleyvadams.github.io/a11y_contrast_check/">Demo</a></dd>
        </dl>
      </footer>
    </main>
    <!-- Fetch scripts last to speed up page load -->
    <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="contrast.js"></script>
  </body>
</html>