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 'Understanding Web Accessibility Color Contrast Guidelines and Ratios' at <a href="https://css-tricks.com/understanding-web-accessibility-color-contrast-guidelines-and-ratios/">CSS-Tricks.com</a> written by Stacie Arellano, 2020. <br /> <a href="https://twitter.com/dreamling"<i class="nes-icon twitter is-small"></i> @dreamling</a></p>
<p>Parts of the article were initially posted as 'The Bright Stuff' at: <a href="https://www.staciearellano.com/the-bright-stuff/">staciearellano.com/the-bright-stuff/</a>in 2019.</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

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Save Automatically?

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions