HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URL's added here will be added as <link>
s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
If the stylesheet you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import
usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<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");
}
}
Also see: Tab Triggers