Understanding the Contrast Ratio

HTML

            
              <div class="nes-container">
  <main class="main-content">
    <h1> Understanding Contrast</h1>

    <div class="nes-field is-inline">
      <label for="color1">Color 1</label>
      <input type="text" maxlength="7" placeholder="Hex Color 1" id="hex1" class="nes-input hexcolor">
      <div class="nes-container is-rounded color" id="color1"></div>
    </div>

    <div class="nes-field is-inline">
      <label for="color1">Color 2</label>
      <input type="text" placeholder="Hex Color 2" id="hex2" class="nes-input hexcolor">
      <div class="nes-container color is-rounded " id="color2"></div>
    </div>

    <table class="nes-table is-bordered is-centered results">
      <tr>
        <td class="reportgrade">
          <p class="textcenter">Contrast Ratio</p>
          <h3 id="ratioResult" class="rr">###</h3><br/>
          <div class="resultHearts">
            <div class="icon-list">
              <i class="nes-icon is-medium heart is-empty"></i>
              <i class="nes-icon is-medium heart is-empty"></i>
              <i class="nes-icon is-medium heart is-empty"></i><br/>
              <i class="nes-icon is-medium star is-empty"></i>
            </div>
          </div>

        </td>
        <td>
          <p class="textcenter">WCAG Grade</p>
<!--           <h3 id="wcagResult" class="wr">###</h3><br/> -->
          <div class="lists">
            <ul id="wcagChart" class="nes-list is-disc">
              <li id="ratio-Fail">Fail: Less than 3.0</li>

              <li id="ratio-AA">&nbsp;AA: 3.0 for text 18pt+</li>

              <li id="ratio-AAL">&nbsp;AA: 4.5 for smaller text</li>

              <li id="ratio-AAA">AAA: 7.0 gold star</li>
          </div>

        </td>
      </tr>
    </table>

    <section class="message-list">
      <div class="message">
        <span class="avatar contrastPrincess right"></span>
        <!-- Balloon -->
        <div class="nes-balloon from-right left">
          <p>How do we calculate the contrast ratio?</p>
        </div>
      </div>
      <div class="message">
        <span class="avatar contrastPrincess left"></span>
        <!-- Balloon -->
        <div class="nes-balloon from-left -left right">
          <p>First, We need to determine the <br/>
            <em>relative luminance</em> for each color.</p>
        </div>
      </div>
    </section>
    <h4 class="nes-text is-primary">1. Convert the HEX color to RGB.</h4>

    <div class="nes-table-responsive">
      <table class="nes-table is-bordered is-centered results ">
        <tr>
          <td id="rgb1">RGB 1</td>
          <td id="rgb2">RGB 2</td>
        </tr>
      </table>
    </div>
    <h4 class="nes-text is-primary">2. Divide each color by 255 to get a linear value between 0 and 1. </h4>

    <div class="nes-table-responsive results">
      <table class="nes-table is-bordered is-centered results">
        <tr>
          <td>
            r: <span id="c1-d-r"></span><br/> g: <span id="c1-d-g"></span><br/> b:
            <span id="c1-d-b"></span><br/></td>
          <td>
            r: <span id="c2-d-r"></span><br/> g: <span id="c2-d-g"></span><br/> b:
            <span id="c2-d-b"></span><br/></td>
        </tr>
      </table>
    </div>
    <h4 class="nes-text is-primary">3. Apply Gamma Correction</h4>

    <p>If value
      < than .03928, divide by 12.92.</p>
        <p> Otherwise, add .055 and divide total by 1.055 and take result to the power of 2.4</p>
        <div class="nes-table-responsive">
          <table class="nes-table is-bordered is-centered results">
            <tr>
              <td>
                r: <span id="c1-gc-r"></span><br/> g:
                <span id="c1-gc-g"></span><br/> b:
                <span id="c1-gc-b"></span><br/></td>
              <td>r: <span id="c2-gc-r"></span><br/> g:
                <span id="c2-gc-g"></span><br/> b:
                <span id="c2-gc-b"></span><br/></td>
            </tr>
          </table>

          <div class="message-list">
            <div class="message">
              <div class="nes-balloon from-right left">
                <p>This translates what the computer <em>"sees"</em> into the human perception of brightness.</p>
              </div>
              <div class="avatar contrastPrincess right"></div>
            </div>
            <div class="message">
              <div class="nes-balloon from-left right">

                <p>Computers record light directly. Twice the photons equals twice the brightness.</p>
              </div>
              <div class="avatar contrastPrincess left"></div>
            </div>
            <div class="message">
              <div class="nes-balloon from-right left">
                <p>Our eyes percieve more levels of light in dim conditions, and less in bright conditions. </p>
              </div>
              <div class="avatar contrastPrincess right"></div>
            </div>
          </div><br/>
          <h4 class="nes-text is-primary">4. Calculate luminance</h3>
            <h5>(r X .2126) + (g X .7152) + (b X 0.0722)</h5>
            <table class="nes-table is-bordered is-centered results">
              <tr>
                <td id="L1">Luminance 1</td>
                <td id="L2">Luminance 2</td>
              </tr>
            </table>
            <div class="message-list">
              <div class="message">
                <div class="nes-balloon from-right left">
                  <p>We multiply the values of each color by a number that signifies how bright that color appears to us. You'll notice green gets the highest number.<sup><a href="#fn1" id="ref1">1</a></sup> </p>
                </div>
                <div class="avatar contrastPrincess right"></div>
              </div>
            </div>
        </div> <br/>
        <h4 class="nes-text is-primary">5. Determine contrast between colors. </h4>
        <h5>(L1 + 0.05) / (L2 + 0.05)</h5><br/>
        <div class="nes-container cr is-rounded">Contrast Result</div>

<!--         <h4 class="nes-text is-primary">6. Apply the WCAG grading equation</h4>
        <h5>21 * (L1-L2)</h5><br/>
        <div class="nes-container wr is-rounded">WCAG Grade</div>
     -->
     <hr/>
        <h5>Credits:</h5>
        <ul>
          <li><a href="https://nostalgic-css.github.io/NES.css">NES.css</a></li>
          <li><a href="https://contrast-ratio.com/">Lee Verou's Contrast Ratio Site</a>(helped me understand the math)</li>
          <li>The Princess Icon by <a href="https://www.freepik.com/" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0"
              target="_blank">CC 3.0 BY</a></li>

        </ul>
        <h5>Reference</h5>
        <ul>
          <li><a href="https://www.cambridgeincolour.com/tutorials/gamma-correction.htm">Understanding Gamma Correction</a>
            <li><a href="https://www.sciencedirect.com/topics/computer-science/gamma-correction">Learn more about Gamma Correction</a></li>
            <li><a href="https://en.wikipedia.org/wiki/Relative_luminance">Relative luminance</a></li>
            <li> <a href="https://www.staciearellano.com/accessibility-resources/">Stacie's list of Accessibility Resources</></li>
          <li><span id="fn1">1.</span> <a href="https://hypertextbook.com/facts/2007/SusanZhao.shtml">Wavelength of Maximum Human Visual Sensitivity </a>Susan Zhao 2007</li>

        </ul>
   
    <p class="byline nes-container is-rounded is-dark">'Understanding Contrast' supports the article 'The Bright Stuff', posted at: <a href="https://www.staciearellano.com/the-bright-stuff/">staciearellano.com/the-bright-stuff/</a>, written by Stacie Arellano, 2019. <br /> <a href="https://twitter.com/dreamling"<i class="nes-icon twitter is-small"></i> @dreamling</a></p>
  </main>
</div>
<!-- todo 

Handle Hex Short codes
Make small version tool
-->

CSS

            
              // https://nostalgic-css.github.io/NES.css/

#c1-gc-r {
  // background-color:pink;
}
body { 
    padding: 0 2rem;
    margin: 0 2rem;
  background-color:lightblue;
}
.container, .main-content {
    max-width: 980px;

}

.main-content, .nes-container {
    margin-bottom: 4rem;  
  background-color:#fff;
  margin:0 auto;
}
h1,h3{
  text-align:center;
}
h2, h3,h4,h5, h6{ 
  // margin:0 auto;
// width:90%;

}
h4{
    padding-top:2rem;
  display:block;
  text-transform:uppercase;
}
#color1, #color2{background-color:none;}
.reportgrade {
  width:40%;
}
.icon-list{
margin: 0 auto;
  width:90%;
}

.hexcolor, .rgbcolor{
  width:90%;
  margin: 20px 20px;

}
.resultHearts, .textcenter{
  margin:0 auto;
  text-align:center;
}
#hex1::before{
  attr:"#";
}
.step{
  width:25%;
}

.avatar{
  margin:0;
  padding:0;
  width:100px;
  height:100px;
  // margin-top:40px;
}

.left{}

.right{}

.message{
  display:grid;
  grid-template-columns:100px 1fr 1fr 100px;
  grid-template-rows: 1fr;
   grid-column-gap: 10px;
  // margin-bottom:50px;
  padding-bottom:50px;
}
.message > .nes-balloon{
    align-self: start;
    grid-row:1;
}
.message > .avatar {
  align-self: end;  
  margin-bottom:-45px;
}
.message > .avatar.right{
  grid-column: 4;
  grid-row:1;
  align-self:end;
}
.message > .avatar.left {
  grid-column: 1;
  grid-row:1;
  justify-self:left;
}
.message > .nes-balloon.left{
  grid-column: 1/4;
}
.message > .nes-balloon.right{
  grid-column: 2/5;
}


.results{
  width:98%;
  margin:0 auto;
}



// Colors
$hair:"#FF6243";
$bangs:"#F47C5A";// not used at the moment. but tagged
$dress:"#B0DBD0;";
$dress-inset:"#2C7B7E";
$crown:"#FF9929";
$skin:"#F6DAB9";

.skin{
  // fill:#F6DAB9;

}
.crown{
  fill:#FF9929;
}
.hair{
  fill:#FF6243;
}
.dress{
  fill:#B0DBD0;
}
.dress-inset{
  fill:#2C7B7E;
}
.byline {
  
}

@media only screen and (max-width: 800px) {
  body { 
    padding: 0 .02rem;
    margin: 0 .02rem;
        font-size: 14px;
    line-height:1.2;
}
  h1, h2, h3, h4, h5, h6 {
    // margin-bottom: .5rem;
  margin-top:.4em;
  }
  .nes-field.is-inline>label {
    margin-bottom: 0rem;}
  
  .hexcolor, .rgbcolor{
  width:50%;
}
  input#hex1.nes-input.hexcolor, input#hex2.nes-input.hexcolor{
    display:inline-block;
    margin:1em;
     width:60%;
  }
   #color1,#color2{
    width:20%;
     // float:right;
     display:inline-block;
     // margin-top:-2px;
        margin-bottom: -14px;
     padding-top:4px;
     height:44px;

}
}
 // .contrastPrincess{background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 500 500' style='enable-background:new 0 0 500 500;' xml:space='preserve'%3E%3Cg%3E%3Cpath class='hair' d='M401.321,296.685V190.013c0-50.594-26.253-95.359-65.821-121.371l-7.115,41.216 c15.434,17.21,24.85,39.904,24.85,64.688v48.645c0,43.9-29.539,81.241-69.741,93.164l5.099,35.53h68.43 c24.401,4.383,42.158,25.596,42.158,50.365v1.879c22.088-8.082,37.851-29.271,37.851-54.138 C437.032,325.934,422.28,305.321,401.321,296.685z'/%3E%3Cpath class='hair' d='M112.819,402.25c0-24.77,17.757-45.982,42.158-50.365h22.299l0,0l0,0h46.132l5.099-35.529 c-40.202-11.924-69.742-49.265-69.742-93.164v-48.645c0-24.784,9.416-47.478,24.85-64.688L176.5,68.642 c-39.568,26.012-65.821,70.777-65.821,121.371v106.672c-20.959,8.636-35.71,29.249-35.71,53.306 c0,24.867,15.763,46.057,37.851,54.138v-1.879H112.819z'/%3E%3C/g%3E%3Cpath class='skin' d='M353.235,223.191v-48.645c0-24.784-9.416-47.478-24.85-64.688l-0.258,1.492H183.872l-0.258-1.492l0,0 c-15.434,17.21-24.85,39.904-24.85,64.688v48.645c0,43.899,29.54,81.241,69.742,93.164l-5.099,35.529h-46.132l0,0l32.47,61.915 h92.508l32.47-61.916h-46.131l-5.099-35.53C323.696,304.432,353.235,267.091,353.235,223.191z'/%3E%3Cpath class='crown' d='M293.138,45.552c0,0-34.968-35.552-37.137-35.552s-37.139,35.552-37.139,35.552l-48.773-14.045 l13.783,79.842h144.256l13.783-79.841L293.138,45.552z'/%3E%3Cg%3E%3Cpath class='hair bangs' d='M183.872,111.349l-0.243-1.405c-15.414,17.151-24.801,39.822-24.832,64.68v21.374h16.632 c44.516,0,80.603-36.053,80.603-80.527v-4.121L183.872,111.349L183.872,111.349z'/%3E%3Cpath class='hair bangs' d='M328.379,109.892l-0.252,1.457h-72.095v4.121c0,44.474,36.087,80.527,80.603,80.527h16.566v-21.374 C353.202,149.741,343.812,127.049,328.379,109.892z'/%3E%3C/g%3E%3Cpath d='M304.601,231.007h-9.585c-5.523,0-10-4.477-10-10s4.477-10,10-10h9.585c5.523,0,10,4.477,10,10 S310.124,231.007,304.601,231.007z'/%3E%3Cpath d='M216.984,231.007h-9.585c-5.523,0-10-4.477-10-10s4.477-10,10-10h9.585c5.523,0,10,4.477,10,10 S222.507,231.007,216.984,231.007z'/%3E%3Cpath d='M256,289.862c-5.812,0-11.623-2.21-16.047-6.63c-3.907-3.903-3.911-10.235-0.007-14.142 c3.904-3.908,10.235-3.911,14.142-0.007c1.055,1.054,2.771,1.054,3.825,0c3.908-3.903,10.239-3.9,14.142,0.007 c3.903,3.907,3.9,10.239-0.007,14.142C267.623,287.652,261.812,289.862,256,289.862z'/%3E%3Cpath d='M476.08,512c-0.65,0-1.31-0.07-1.96-0.2c-0.63-0.12-1.26-0.32-1.87-0.57c-0.6-0.25-1.18-0.56-1.72-0.92 c-0.55-0.36-1.06-0.78-1.52-1.24s-0.88-0.97-1.25-1.52c-0.36-0.54-0.67-1.12-0.92-1.73c-0.25-0.6-0.44-1.23-0.57-1.87 c-0.13-0.64-0.19-1.3-0.19-1.95s0.06-1.31,0.19-1.95s0.32-1.27,0.57-1.87c0.25-0.61,0.56-1.19,0.92-1.73 c0.37-0.55,0.79-1.06,1.25-1.52s0.97-0.88,1.52-1.24c0.54-0.36,1.12-0.67,1.72-0.92c0.61-0.25,1.24-0.45,1.87-0.57 c1.29-0.26,2.62-0.26,3.91,0c0.64,0.12,1.27,0.32,1.87,0.57c0.61,0.25,1.19,0.56,1.73,0.92c0.55,0.36,1.06,0.78,1.52,1.24 s0.88,0.97,1.24,1.52c0.36,0.54,0.67,1.12,0.92,1.73c0.25,0.6,0.44,1.23,0.57,1.87s0.2,1.3,0.2,1.95s-0.07,1.31-0.2,1.95 s-0.32,1.27-0.57,1.87c-0.25,0.61-0.56,1.19-0.92,1.73c-0.36,0.55-0.78,1.06-1.24,1.52s-0.97,0.88-1.52,1.24 c-0.54,0.36-1.12,0.67-1.73,0.92c-0.6,0.25-1.23,0.45-1.87,0.57C477.39,511.93,476.73,512,476.08,512z'/%3E%3Cpath d='M35.92,512c-0.65,0-1.31-0.07-1.95-0.2c-0.64-0.12-1.27-0.32-1.87-0.57c-0.61-0.25-1.19-0.56-1.73-0.92 c-0.55-0.36-1.06-0.78-1.52-1.24c-0.46-0.46-0.88-0.97-1.24-1.52c-0.36-0.54-0.67-1.12-0.92-1.73c-0.25-0.6-0.44-1.23-0.57-1.87 c-0.13-0.64-0.2-1.3-0.2-1.95s0.07-1.31,0.2-1.95c0.13-0.64,0.32-1.27,0.57-1.88c0.25-0.6,0.56-1.18,0.92-1.72 c0.36-0.55,0.78-1.06,1.24-1.52s0.97-0.88,1.52-1.24c0.54-0.36,1.12-0.67,1.73-0.92c0.6-0.25,1.23-0.44,1.87-0.57 c1.29-0.26,2.62-0.26,3.91,0c0.63,0.13,1.26,0.32,1.87,0.57c0.6,0.25,1.18,0.56,1.72,0.92c0.55,0.36,1.06,0.78,1.52,1.24 s0.88,0.97,1.25,1.52c0.36,0.54,0.67,1.12,0.92,1.72c0.25,0.61,0.44,1.24,0.57,1.88s0.19,1.3,0.19,1.95s-0.06,1.31-0.19,1.95 c-0.13,0.64-0.32,1.27-0.57,1.87c-0.25,0.61-0.56,1.19-0.92,1.73c-0.37,0.55-0.79,1.06-1.25,1.52s-0.97,0.88-1.52,1.24 c-0.54,0.36-1.12,0.67-1.72,0.92c-0.61,0.25-1.24,0.45-1.87,0.57C37.23,511.93,36.57,512,35.92,512z'/%3E%3Cpath d='M256,87.746c-5.523,0-10-4.477-10-10V65.46c0-5.523,4.477-10,10-10s10,4.477,10,10v12.286 C266,83.269,261.523,87.746,256,87.746z'/%3E%3Cpath class='dress' d='M154.977,351.885c-24.401,4.383-42.158,25.595-42.158,50.365V502H256l-78.724-150.115H154.977z'/%3E%3Cpath class='dress' d='M357.023,351.885h-22.299L256,502h143.181v-99.75C399.181,377.481,381.424,356.268,357.023,351.885z' /%3E%3Cpolygon class='dress-inset' points='209.746,413.801 256,502 302.254,413.801 '/%3E%3Cpath d='M435.209,492H409.18v-81.286c22.9-11.264,37.851-34.843,37.851-60.724c0-25.211-13.813-47.938-35.71-59.633V190.013 c0-50.086-24.13-96.699-64.877-125.979l5.321-30.824c0.586-3.394-0.615-6.85-3.18-9.148c-2.565-2.299-6.134-3.116-9.441-2.162 l-43.057,12.397C262.244,0.001,260.7,0,256.001,0s-6.243,0.001-40.088,34.296l-43.057-12.398c-3.311-0.954-6.876-0.136-9.441,2.162 c-2.565,2.298-3.766,5.755-3.18,9.148l5.321,30.825c-40.747,29.28-64.877,75.893-64.877,125.979v100.345 c-21.897,11.695-35.71,34.422-35.71,59.633c0,25.881,14.951,49.459,37.851,60.724V492H76.791c-5.523,0-10,4.477-10,10 s4.477,10,10,10H435.21c5.523,0,10-4.477,10-10S440.732,492,435.209,492z M391.321,190.013v106.672c0,4.051,2.444,7.703,6.19,9.246 c17.933,7.388,29.52,24.683,29.52,44.059c0,15.341-7.459,29.534-19.438,38.375c-5.429-23.374-24.295-41.921-48.803-46.323 c-0.583-0.104-1.175-0.157-1.768-0.157h-22.24c-0.02,0-0.04,0-0.06,0H297.26l-2.691-18.756 c40.832-15.854,68.666-55.775,68.666-99.938v-48.646c0-24.676-8.558-48.498-24.195-67.618l3.555-20.596 C373.356,111.971,391.321,149.707,391.321,190.013z M256,480.468l-29.718-56.667h59.436L256,480.468z M296.206,403.801h-80.413 l-20.893-39.84l-1.089-2.076h29.596c4.974,0,9.192-3.656,9.898-8.58l5.099-35.529c0.705-4.911-2.298-9.597-7.055-11.008 c-36.849-10.929-62.585-45.297-62.585-83.577v-17.194h6.665c35.07,0,65.551-20.013,80.603-49.208 c15.052,29.196,45.533,49.208,80.603,49.208h6.599v17.194c0,38.28-25.735,72.647-62.584,83.576 c-4.757,1.411-7.76,6.097-7.055,11.008l5.099,35.53c0.707,4.924,4.924,8.58,9.898,8.58h29.595l-1.089,2.076L296.206,403.801z M168.798,174.636c0.023-19.397,6.488-38.093,18.318-53.286h58.673c-3,36.149-33.411,64.648-70.36,64.648h-6.632v-11.362H168.798z M343.202,174.624v11.374h-6.566c-36.949,0-67.36-28.499-70.36-64.648h58.661C336.755,136.542,343.202,155.233,343.202,174.624z M216.095,55.161c3.527,1.017,7.324,0.018,9.896-2.597C236.892,41.482,249.125,29.37,256,22.95 c6.875,6.42,19.107,18.532,30.008,29.614c2.572,2.615,6.37,3.612,9.896,2.597l33.437-9.627l-3.66,21.202 c-0.026,0.135-0.049,0.27-0.07,0.405l-5.905,34.208H192.293l-5.906-34.21c-0.02-0.134-0.043-0.267-0.069-0.401l-3.66-21.205 L216.095,55.161z M84.968,349.99c0-19.376,11.587-36.671,29.52-44.059c3.746-1.543,6.19-5.195,6.19-9.246V190.013 c0-40.306,17.965-78.042,48.727-103.681l3.555,20.596c-15.638,19.12-24.195,42.942-24.195,67.618v48.646 c0,44.163,27.834,84.084,68.667,99.938l-2.691,18.755h-37.464h-22.299c-0.593,0-1.184,0.053-1.768,0.158 c-24.508,4.401-43.374,22.948-48.803,46.322C92.427,379.524,84.968,365.331,84.968,349.99z M122.819,492v-89.75 c0-19.668,13.868-36.511,33.097-40.365h15.313L239.464,492H122.819z M272.536,492l68.235-130.115h15.313 c19.229,3.854,33.097,20.696,33.097,40.365V492H272.536z'/%3E%3C/svg%3E%0A"); }
.contrastPrincess{
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 100 100;' xml:space='preserve'%3E%3Cg%3E%3Cpath style='fill:%23FF6243;' d='M401.321,296.685V190.013c0-50.594-26.253-95.359-65.821-121.371l-7.115,41.216 c15.434,17.21,24.85,39.904,24.85,64.688v48.645c0,43.9-29.539,81.241-69.741,93.164l5.099,35.53h68.43 c24.401,4.383,42.158,25.596,42.158,50.365v1.879c22.088-8.082,37.851-29.271,37.851-54.138 C437.032,325.934,422.28,305.321,401.321,296.685z'/%3E%3Cpath style='fill:%23FF6243;' d='M112.819,402.25c0-24.77,17.757-45.982,42.158-50.365h22.299l0,0l0,0h46.132l5.099-35.529 c-40.202-11.924-69.742-49.265-69.742-93.164v-48.645c0-24.784,9.416-47.478,24.85-64.688L176.5,68.642 c-39.568,26.012-65.821,70.777-65.821,121.371v106.672c-20.959,8.636-35.71,29.249-35.71,53.306 c0,24.867,15.763,46.057,37.851,54.138v-1.879H112.819z'/%3E%3C/g%3E%3Cpath style='fill:%23F6DAB9;' d='M353.235,223.191v-48.645c0-24.784-9.416-47.478-24.85-64.688l-0.258,1.492H183.872l-0.258-1.492l0,0 c-15.434,17.21-24.85,39.904-24.85,64.688v48.645c0,43.899,29.54,81.241,69.742,93.164l-5.099,35.529h-46.132l0,0l32.47,61.915 h92.508l32.47-61.916h-46.131l-5.099-35.53C323.696,304.432,353.235,267.091,353.235,223.191z'/%3E%3Cpath style='fill:%23FF9929;' d='M293.138,45.552c0,0-34.968-35.552-37.137-35.552s-37.139,35.552-37.139,35.552l-48.773-14.045 l13.783,79.842h144.256l13.783-79.841L293.138,45.552z'/%3E%3Cg%3E%3Cpath style='fill:%23F47C5A;' d='M183.872,111.349l-0.243-1.405c-15.414,17.151-24.801,39.822-24.832,64.68v21.374h16.632 c44.516,0,80.603-36.053,80.603-80.527v-4.121L183.872,111.349L183.872,111.349z'/%3E%3Cpath style='fill:%23F47C5A;' d='M328.379,109.892l-0.252,1.457h-72.095v4.121c0,44.474,36.087,80.527,80.603,80.527h16.566v-21.374 C353.202,149.741,343.812,127.049,328.379,109.892z'/%3E%3C/g%3E%3Cpath d='M304.601,231.007h-9.585c-5.523,0-10-4.477-10-10s4.477-10,10-10h9.585c5.523,0,10,4.477,10,10 S310.124,231.007,304.601,231.007z'/%3E%3Cpath d='M216.984,231.007h-9.585c-5.523,0-10-4.477-10-10s4.477-10,10-10h9.585c5.523,0,10,4.477,10,10 S222.507,231.007,216.984,231.007z'/%3E%3Cpath d='M256,289.862c-5.812,0-11.623-2.21-16.047-6.63c-3.907-3.903-3.911-10.235-0.007-14.142 c3.904-3.908,10.235-3.911,14.142-0.007c1.055,1.054,2.771,1.054,3.825,0c3.908-3.903,10.239-3.9,14.142,0.007 c3.903,3.907,3.9,10.239-0.007,14.142C267.623,287.652,261.812,289.862,256,289.862z'/%3E%3Cpath d='M476.08,512c-0.65,0-1.31-0.07-1.96-0.2c-0.63-0.12-1.26-0.32-1.87-0.57c-0.6-0.25-1.18-0.56-1.72-0.92 c-0.55-0.36-1.06-0.78-1.52-1.24s-0.88-0.97-1.25-1.52c-0.36-0.54-0.67-1.12-0.92-1.73c-0.25-0.6-0.44-1.23-0.57-1.87 c-0.13-0.64-0.19-1.3-0.19-1.95s0.06-1.31,0.19-1.95s0.32-1.27,0.57-1.87c0.25-0.61,0.56-1.19,0.92-1.73 c0.37-0.55,0.79-1.06,1.25-1.52s0.97-0.88,1.52-1.24c0.54-0.36,1.12-0.67,1.72-0.92c0.61-0.25,1.24-0.45,1.87-0.57 c1.29-0.26,2.62-0.26,3.91,0c0.64,0.12,1.27,0.32,1.87,0.57c0.61,0.25,1.19,0.56,1.73,0.92c0.55,0.36,1.06,0.78,1.52,1.24 s0.88,0.97,1.24,1.52c0.36,0.54,0.67,1.12,0.92,1.73c0.25,0.6,0.44,1.23,0.57,1.87s0.2,1.3,0.2,1.95s-0.07,1.31-0.2,1.95 s-0.32,1.27-0.57,1.87c-0.25,0.61-0.56,1.19-0.92,1.73c-0.36,0.55-0.78,1.06-1.24,1.52s-0.97,0.88-1.52,1.24 c-0.54,0.36-1.12,0.67-1.73,0.92c-0.6,0.25-1.23,0.45-1.87,0.57C477.39,511.93,476.73,512,476.08,512z'/%3E%3Cpath d='M35.92,512c-0.65,0-1.31-0.07-1.95-0.2c-0.64-0.12-1.27-0.32-1.87-0.57c-0.61-0.25-1.19-0.56-1.73-0.92 c-0.55-0.36-1.06-0.78-1.52-1.24c-0.46-0.46-0.88-0.97-1.24-1.52c-0.36-0.54-0.67-1.12-0.92-1.73c-0.25-0.6-0.44-1.23-0.57-1.87 c-0.13-0.64-0.2-1.3-0.2-1.95s0.07-1.31,0.2-1.95c0.13-0.64,0.32-1.27,0.57-1.88c0.25-0.6,0.56-1.18,0.92-1.72 c0.36-0.55,0.78-1.06,1.24-1.52s0.97-0.88,1.52-1.24c0.54-0.36,1.12-0.67,1.73-0.92c0.6-0.25,1.23-0.44,1.87-0.57 c1.29-0.26,2.62-0.26,3.91,0c0.63,0.13,1.26,0.32,1.87,0.57c0.6,0.25,1.18,0.56,1.72,0.92c0.55,0.36,1.06,0.78,1.52,1.24 s0.88,0.97,1.25,1.52c0.36,0.54,0.67,1.12,0.92,1.72c0.25,0.61,0.44,1.24,0.57,1.88s0.19,1.3,0.19,1.95s-0.06,1.31-0.19,1.95 c-0.13,0.64-0.32,1.27-0.57,1.87c-0.25,0.61-0.56,1.19-0.92,1.73c-0.37,0.55-0.79,1.06-1.25,1.52s-0.97,0.88-1.52,1.24 c-0.54,0.36-1.12,0.67-1.72,0.92c-0.61,0.25-1.24,0.45-1.87,0.57C37.23,511.93,36.57,512,35.92,512z'/%3E%3Cpath d='M256,87.746c-5.523,0-10-4.477-10-10V65.46c0-5.523,4.477-10,10-10s10,4.477,10,10v12.286 C266,83.269,261.523,87.746,256,87.746z'/%3E%3Cpath style='fill:%23B0DBD0;' d='M154.977,351.885c-24.401,4.383-42.158,25.595-42.158,50.365V502H256l-78.724-150.115H154.977z'/%3E%3Cpath style='fill:%2381B4A7;' d='M357.023,351.885h-22.299L256,502h143.181v-99.75C399.181,377.481,381.424,356.268,357.023,351.885z' /%3E%3Cpolygon style='fill:%232C7B7E;' points='209.746,413.801 256,502 302.254,413.801 '/%3E%3Cpath d='M435.209,492H409.18v-81.286c22.9-11.264,37.851-34.843,37.851-60.724c0-25.211-13.813-47.938-35.71-59.633V190.013 c0-50.086-24.13-96.699-64.877-125.979l5.321-30.824c0.586-3.394-0.615-6.85-3.18-9.148c-2.565-2.299-6.134-3.116-9.441-2.162 l-43.057,12.397C262.244,0.001,260.7,0,256.001,0s-6.243,0.001-40.088,34.296l-43.057-12.398c-3.311-0.954-6.876-0.136-9.441,2.162 c-2.565,2.298-3.766,5.755-3.18,9.148l5.321,30.825c-40.747,29.28-64.877,75.893-64.877,125.979v100.345 c-21.897,11.695-35.71,34.422-35.71,59.633c0,25.881,14.951,49.459,37.851,60.724V492H76.791c-5.523,0-10,4.477-10,10 s4.477,10,10,10H435.21c5.523,0,10-4.477,10-10S440.732,492,435.209,492z M391.321,190.013v106.672c0,4.051,2.444,7.703,6.19,9.246 c17.933,7.388,29.52,24.683,29.52,44.059c0,15.341-7.459,29.534-19.438,38.375c-5.429-23.374-24.295-41.921-48.803-46.323 c-0.583-0.104-1.175-0.157-1.768-0.157h-22.24c-0.02,0-0.04,0-0.06,0H297.26l-2.691-18.756 c40.832-15.854,68.666-55.775,68.666-99.938v-48.646c0-24.676-8.558-48.498-24.195-67.618l3.555-20.596 C373.356,111.971,391.321,149.707,391.321,190.013z M256,480.468l-29.718-56.667h59.436L256,480.468z M296.206,403.801h-80.413 l-20.893-39.84l-1.089-2.076h29.596c4.974,0,9.192-3.656,9.898-8.58l5.099-35.529c0.705-4.911-2.298-9.597-7.055-11.008 c-36.849-10.929-62.585-45.297-62.585-83.577v-17.194h6.665c35.07,0,65.551-20.013,80.603-49.208 c15.052,29.196,45.533,49.208,80.603,49.208h6.599v17.194c0,38.28-25.735,72.647-62.584,83.576 c-4.757,1.411-7.76,6.097-7.055,11.008l5.099,35.53c0.707,4.924,4.924,8.58,9.898,8.58h29.595l-1.089,2.076L296.206,403.801z M168.798,174.636c0.023-19.397,6.488-38.093,18.318-53.286h58.673c-3,36.149-33.411,64.648-70.36,64.648h-6.632v-11.362H168.798z M343.202,174.624v11.374h-6.566c-36.949,0-67.36-28.499-70.36-64.648h58.661C336.755,136.542,343.202,155.233,343.202,174.624z M216.095,55.161c3.527,1.017,7.324,0.018,9.896-2.597C236.892,41.482,249.125,29.37,256,22.95 c6.875,6.42,19.107,18.532,30.008,29.614c2.572,2.615,6.37,3.612,9.896,2.597l33.437-9.627l-3.66,21.202 c-0.026,0.135-0.049,0.27-0.07,0.405l-5.905,34.208H192.293l-5.906-34.21c-0.02-0.134-0.043-0.267-0.069-0.401l-3.66-21.205 L216.095,55.161z M84.968,349.99c0-19.376,11.587-36.671,29.52-44.059c3.746-1.543,6.19-5.195,6.19-9.246V190.013 c0-40.306,17.965-78.042,48.727-103.681l3.555,20.596c-15.638,19.12-24.195,42.942-24.195,67.618v48.646 c0,44.163,27.834,84.084,68.667,99.938l-2.691,18.755h-37.464h-22.299c-0.593,0-1.184,0.053-1.768,0.158 c-24.508,4.401-43.374,22.948-48.803,46.322C92.427,379.524,84.968,365.331,84.968,349.99z M122.819,492v-89.75 c0-19.668,13.868-36.511,33.097-40.365h15.313L239.464,492H122.819z M272.536,492l68.235-130.115h15.313 c19.229,3.854,33.097,20.696,33.097,40.365V492H272.536z'/%3E%3C/svg%3E%0A");
  }
#Capa_1{
  // background-color:pink;
  // width:200px;
  // height:200px;
}

JS

            
              //set hexes via form element.
// Failing Contrast Colors Teal/Gray
// var hex1 = "1ABC9C";
// var hex2 = "888888";

// test colors
// ff0000 fffff ratio 3.99
// 8d8d8d fffff ratio 3.31
// 000000 fffff ratio 21?
var hexbox1 = document.getElementById("hex1");
var hexbox2 = document.getElementById("hex2");
var colorbox1 = document.getElementById("color1");
var colorbox2 = document.getElementById("color2");

// hexbox1.addEventListener("focusout", setHexandGo);
hexbox1.addEventListener("focusout", setHexandGo);
hexbox1.addEventListener("keydown", function(event) {
  if (event.key === "Enter") {
    setHexandGo();
  }
});
hexbox2.addEventListener("focusout", setHexandGo);
hexbox2.addEventListener("keydown", function(event) {
  if (event.key === "Enter") {
    setHexandGo();
  }
});

function setHexandGo() {
  console.log("********\nStarting New Contrast Comparison");
  // get hex
  var hex1 = hexbox1.value
    .split("#")
    .pop()
    .slice(-6);
  var hex2 = hexbox2.value
    .split("#")
    .pop()
    .slice(-6);
  //set some defaults if blank
  if (hex1 == "") {
    hex1 = "000000";
  }
  if (hex2 == "") {
    hex2 = "FFFFFF";
  }
  // display hex
  hexbox1.value = "#" + hex1;
  hexbox2.value = "#" + hex2;
  //display colors in boxes
  colorbox1.style.backgroundColor = hexbox1.value;
  colorbox2.style.backgroundColor = hexbox2.value;
  // todo? change display ie hair or bg here.

  //convert to rgb
  console.log("1. Convert Hex colors to RGB.");
  var rgb1 = hex2rgb(hex1);
  var rgb2 = hex2rgb(hex2);

  // display rgb
  document.getElementById("rgb1").innerHTML = rgb1;
  document.getElementById("rgb2").innerHTML = rgb2;
  
  // display rgb/255
  displayRgb(rgb1, rgb2);

  // display gamma corrected rgb
  displayGC(rgb1, rgb2);
  
  // get luminance
  var L1 = luminance(rgb1);
  var L2 = luminance(rgb2);
  console.log("returned luminances: "+L1+", "+L2);
    // display luminance
  document.getElementById("L1").innerHTML = formatNumbers(L1);
  document.getElementById("L2").innerHTML = formatNumbers(L2);
  
  // get contrast ratio
  var ratio = getContrastRatio(L1, L2);
  
  // not sure where i got this from...
  // var grade = 21 * Math.abs(L1 - L2);
  // grade = grade.toFixed(3);
  
  // display contrast ratio
  document.getElementById("ratioResult").innerHTML = ratio.toFixed(3) + ":1";
  document.getElementsByClassName("cr")[0].innerHTML = ratio.toFixed(3) + ":1";
// i could do a nicer format for 21 or 1 here...

  // display contrast score
  // document.getElementById("wcagResult").innerHTML = grade;
  // document.getElementsByClassName("wr")[1].innerHTML = grade;

  //display resultHearts
  resultHearts(ratio);

}

function formatNumbers(num) {
  // Display all numbers to 8 decimals, unless 1 or 0.
  if (num != 0 && num != 1) {
    num = num.toFixed(8);
  }

  return num;
}

function hex2rgb(hex) {
  // convert to rgb
  let rgb = [];
  //split rgb values out, and return the value by parsing the hex.
  for (var i = 0; i < 6; i += 2) {
    rgb.push(parseInt(hex.substr(i, 2), 16));
  }

  console.log("Hex: #" + hex + " to rgb: " + rgb);
  return rgb;
}

function luminance(color) {
  // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
  console.log(
    "DIVIDE EACH COLOR COMPONENT BY 255 TO GET A LINEAR VALUE BETWEEN 0 AND 1."
  );

  let rgba = color;
  var rgb_text = ["R", "G", "B"];
  var linear_rgb = [];
  for (var i = 0; i < 3; i++) {
    var rgb = rgba[i]; //take in the linear rgb value for each, r g and b.
    rgb /= 255; //divide by 255 to get each color's value between 0 and 1
    linear_rgb[i] = rgb;

    console.log("  " + rgb_text[i] + ": " + rgba[i] + " / 255: " + rgb);

    rgb = rgb <= 0.03928 ? rgb / 12.92 : Math.pow((rgb + 0.055) / 1.055, 2.4);
// console.log("rgb:" + rgb);
    rgba[i] = rgb; // reassign relative luminance corrected value.
  }
  console.log(`color/255: ${linear_rgb[0]}, ${linear_rgb[1]}, ${linear_rgb[2]}`);
  console.log(`rel-lumi : ${rgba[0]}, ${rgba[1]}, ${rgba[2]}`);
  console.log("APPLY GAMMA CORRECTION");
  console.log(
    "     If value is < .03928, divide by 12.92.\n     Otherwise, add .055 and divide total by 1.055\n     and take result to the power of 2.4\n"
  );
  
  var calcLumi = 0.2126 * rgba[0] + 0.7152 * rgba[1] + 0.0722 * rgba[2];

  /* the magic numbers here compensate for which colors the human eyes percieve as brighter, ie, green the most, blue the least. */
  console.log("Calculate and return luminance: " + calcLumi);
  
  return calcLumi;
}


function getContrastRatio(L1, L2) {
  // make sure to evaluate which color is largest/smallest? lighter/darker.
  // because luminance is 0 to 1 the larger number is brighter, 
 
   var ratio 
       // (L1 + 0.05) / (L2 + 0.05);
   var lum1 = (L1 + 0.05);
   var lum2 = (L2 + 0.05);
 
  if(lum1 > lum2){
    ratio = lum1/lum2;
  } else {
    ratio = lum2/lum1;
  }
// this was my bug, half the time i wasn't checking for light divided by dark, so the scoring was off. 
  // console.log("L1/L2 = " + (lum1/lum2));
  // console.log("L2/L1 = " + (lum2/lum1));

  console.log("Contrast ratio: " + ratio + ":1");
  return ratio;
}
// 0.2526 / 1.05 = 0.1684
function displayRgb(rgb1, rgb2) {
  // Display results for html viewing. (not part of final calc)
  
  // column/color - divideby255 - colorpart
  // console.error("rgb2:"+ rgb2);
  var color1_red = formatNumbers(rgb1[0] / 255);
  var color1_green = formatNumbers(rgb1[1] / 255);
  var color1_blue = formatNumbers(rgb1[2] / 255);
  document.getElementById("c1-d-r").innerHTML = color1_red;
  document.getElementById("c1-d-g").innerHTML = color1_green;
  document.getElementById("c1-d-b").innerHTML = color1_blue;

  var color2_red = formatNumbers(rgb2[0] / 255);
  var color2_green = formatNumbers(rgb2[1] / 255);
  var color2_blue = formatNumbers(rgb2[2] / 255);

  document.getElementById("c2-d-r").innerHTML = color2_red;
  document.getElementById("c2-d-g").innerHTML = color2_green;
  document.getElementById("c2-d-b").innerHTML = color2_blue;

}

function displayGC(rgb1, rgb2) {
  // Display results for html viewing. (not part of final calc)
  
  //column/color - gammacorrect - colorpart
  var color1_red = rgb1[0] / 255;
  var color1_green = rgb1[1] / 255;
  var color1_blue = rgb1[2] / 255;
  
  var color2_red = rgb2[0] / 255;
  var color2_green = rgb2[1] / 255;
  var color2_blue = rgb2[2] / 255;

  document.getElementById("c1-gc-r").innerHTML =  color1_red  < 0.03928
      ? formatNumbers(color1_red  / 12.92)
      : formatNumbers(Math.pow((color1_red  + 0.055) / 1.055, 2.4));
  
  document.getElementById("c1-gc-g").innerHTML = 
    color1_green < 0.03928
    ? formatNumbers(color1_green / 12.92)
    : formatNumbers(Math.pow((color1_green + 0.055) / 1.055, 2.4));
  
  document.getElementById("c1-gc-b").innerHTML = color1_blue < 0.03928
    ? formatNumbers(color1_blue / 12.92)
    : formatNumbers(Math.pow((color1_blue + 0.055) / 1.055, 2.4));

  document.getElementById("c2-gc-r").innerHTML = 
   color2_red  < 0.03928
      ? formatNumbers(color2_red  / 12.92)
      : formatNumbers(Math.pow((color2_red  + 0.055) / 1.055, 2.4));
    
  document.getElementById("c2-gc-g").innerHTML = 
    color2_green < 0.03928
    ? formatNumbers(color2_green / 12.92)
    : formatNumbers(Math.pow((color2_green + 0.055) / 1.055, 2.4));
    
  document.getElementById("c2-gc-b").innerHTML = color2_blue < 0.03928
    ? formatNumbers(color2_blue / 12.92)
    : formatNumbers(Math.pow((color2_blue + 0.055) / 1.055, 2.4));
}

function resultHearts(score) {
  var check = score;
  if ((score = "")) {
    console.log("need 2 colors");
    return;
  }
  var aaa = `<div class="icon-list">
              <i class="nes-icon is-medium heart is-full"></i>
              <i class="nes-icon is-medium heart is-full"></i>
              <i class="nes-icon is-medium heart is-full"></i><br/>
              <i class="nes-icon is-medium star is-full"></i>
    </div>`;
  var aa = `<div class="icon-list">
              <i class="nes-icon is-medium heart is-full"></i>
              <i class="nes-icon is-medium heart is-full"></i>
              <i class="nes-icon is-medium heart is-empty"></i><br/>
              <i class="nes-icon is-medium star is-empty"></i>
    </div>`;
  var aaL = `
<div class="icon-list">
              <i class="nes-icon is-medium heart is-full"></i>
              <i class="nes-icon is-medium heart is-full"></i>
              <i class="nes-icon is-medium heart is-full"></i><br/>
              <i class="nes-icon is-medium star is-empty"></i>
    </div>`;
  var fail = `<div class="icon-list">
              <i class="nes-icon is-medium heart is-empty"></i>
              <i class="nes-icon is-medium heart is-empty"></i>
              <i class="nes-icon is-medium heart is-empty"></i><br/>
              <i class="nes-icon is-medium star is-empty"></i>
    </div>`;
  //set all ratio ids to normal weight
  // document.getElementById("wcagChart").id[0].style.fontWeight = "normal";
  const listItems = document.querySelectorAll("#wcagChart li");
  for (let i = 0; i < listItems.length; i++) {
    listItems[i].style.fontWeight = "normal";
    // console.log( listItems[i]);
  }
  console.log(check);
  if (check >= 7) {
    document.getElementsByClassName("resultHearts")[0].innerHTML = aaa;
    // document.querySelector('[id^="ratioA"]').style.fontWeight = "normal";
    document.getElementById("ratio-AAA").style.fontWeight = "900";
    console.log("GOLD STAR: AAA");
  } else if (check >= 4.5) {
    document.getElementsByClassName("resultHearts")[0].innerHTML = aaL;
    document.getElementById("ratio-AAL").style.fontWeight = "900";
    console.log("Score: AA for large text");
  } else if (check >= 3) {
    document.getElementsByClassName("resultHearts")[0].innerHTML = aa;
    document.getElementById("ratio-AA").style.fontWeight = "900";
    console.log("Score: AA");
  } else if (check < 3) {
    document.getElementsByClassName("resultHearts")[0].innerHTML = fail;
    // document.querySelector('[id^="ratioA"]').id.style.fontWeight = "normal";
    document.getElementById("ratio-Fail").style.fontWeight = "900";
    // document.getElementById("ratioAAA").style.fontWeight = "400";
    console.error("CONTRAST FAILURE");
  }
}

999px

About External Resources

Insecure Resource

About JavaScript Preprocessors

HTML

CSS

JS

Console

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Use npm Packages

Code Indentation

Save Automatically?

Auto-Updating Preview

HTML

CSS

JS

Console

Editor Commands

HTML Specific

Misc

Pen Actions