<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"> AA: 3.0 for text 18pt+</li>
<li id="ratio-AAL"> 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
-->// 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;
}//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");
}
}
External CSS
- https://unpkg.com/nes.css@latest/css/nes.min.css
- https://fonts.googleapis.com/css?family=Press+Start+2P
External JavaScript
This Pen doesn't use any external JavaScript resources.