Skip to content

Instantly share code, notes, and snippets.

@aetherxx

aetherxx/accessibility-color-table.markdown

Created October 19, 2018 12:10
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save aetherxx/d36086f2546ec0270d702738e0eeedb9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save aetherxx/d36086f2546ec0270d702738e0eeedb9 to your computer and use it in GitHub Desktop.
Download ZIP
Accessibility Color Table
Raw
index.html
<table style="width:100%;" cellspacing="0" cellpadding="0" id="list"></table>
Raw
script.js
var colors = [
"#12395B",
"#960C11",
"#E8AB06",
"#87864A",
"#676A6E",
"#006FD0",
"#FF8400",
"#19C4EB",
"#CCE5EE",
"#AD8966",
"#151516",
"#AB080E",
"#645002",
"#000000",
"#D6C4B3",
"#E1E1E2",
"#041419",
"#645002",
"#BC393E",
"#849787",
"#87864A",
"#262119",
"#CFCFB7"
];
// convert hexcodes to rgb values
function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
function hexdec(hex) {
return parseInt(hex, 16);
}
// formulas for calculating color contrast ratio as according to w3.org
// relative luminance
// https://www.w3.org/TR/WCAG20/#relativeluminancedef
function relativeluminance(color) {
//Remove any leading #
color = color.replace("#", "");
var components = [];
if (color.length === 6) {
var components = [
hexdec(color.substring(0, 2)) / 255,
hexdec(color.substring(2, 4)) / 255,
hexdec(color.substring(4, 6)) / 255
];
}
if (color.length === 3) {
var components = [
hexdec(color.substring(0, 1)) / 255,
hexdec(color.substring(1, 2)) / 255,
hexdec(color.substring(2, 3)) / 255
];
}
for (var i = 0, l = components.length; i < l; i++) {
var v = components[i];
if (v <= 0.03928) {
components[i] = v / 12.92;
} else {
components[i] = Math.pow((v + 0.055) / 1.055, 2.4);
}
}
return (
components[0] * 0.2126 + components[1] * 0.7152 + components[2] * 0.0722
);
}
// contrast ratio
// https://www.w3.org/TR/WCAG20/#contrast-ratiodef
function contrastratio($c1, $c2) {
var $y1 = relativeluminance($c1),
$y2 = relativeluminance($c2);
if ($y1 < $y2) {
var $y3 = $y1;
$y1 = $y2;
$y2 = $y3;
}
return ($y1 + 0.05) / ($y2 + 0.05);
}
function generateTable(arr) {
output = '<tr class="header"><th>&nbsp;</th><th>Hexcode</th><th>RGB Code</th><th>Rating on White</th><th>Rating on BG</th></tr>';
for (var i = 0; i < arr.length; i++) {
// get rgb color value
var color = arr[i];
var r = hexToRgb(color).r;
var g = hexToRgb(color).g;
var b = hexToRgb(color).b;
var rgbColor = 'rgba(' + r + ', ' + g + ', ' + b + ', 1)';
var contrastRatio = contrastratio(arr[i], '#FFFFFF').toFixed(2);
var bgContrastRatio, newTextColor;
var bgRatio1 = contrastratio('#FFFFFF', arr[i]).toFixed(2);
var bgRatio2 = contrastratio('#3E4042', arr[i]).toFixed(2);
if (bgRatio1 > bgRatio2) {
newTextColor = '#FFFFFF';
bgContrastRatio = bgRatio1;
} else {
newTextColor = '#3E4042';
bgContrastRatio = bgRatio2;
}
var rating;
if (contrastRatio < 3) {
rating = '<td><div style="color:' + arr[i] + ';font-size: 16px;">Fails</div></td>';
} else if (contrastRatio > 4.5 && contrastRatio < 7) {
rating = '<td><div style="color:' + arr[i] + ';font-size: 16px;">AA</div></td>';
} else if (contrastRatio > 7) {
rating = '<td><div style="color:' + arr[i] + ';font-size: 16px;">AAA</div></td>';
} else {
rating = '<td><div style="color:' + arr[i] + '; font-size: 18px;">AA Large Text</div></td>';
}
var bgRating;
if (bgContrastRatio < 3) {
bgRating = '<td><div style="float: left; text-align: center; width: 150px; padding: 0px 8px; background:' + arr[i] + '; color:' + newTextColor + ';font-size: 16px;">Fails</div></td>';
} else if (bgContrastRatio > 4.5 && bgContrastRatio < 7) {
bgRating = '<td><div style="float: left; text-align: center; width: 150px; padding: 0px 8px; background:' + arr[i] + '; color:' + newTextColor + ';font-size: 16px;">AA</div></td>';
} else if (bgContrastRatio > 7) {
bgRating = '<td><div style="float: left; text-align: center; width: 150px; padding: 0px 8px; background:' + arr[i] + '; color:' + newTextColor + ';font-size: 16px;">AAA</div></td>';
} else {
bgRating = '<td><div style="float: left; text-align: center; width: 150px; padding: 0px 8px; background:' + arr[i] + '; color:' + newTextColor + '; font-size: 18px;">AA Large Text</div></td>';
}
output += '<tr><td style="width: 56px;"><div class="colorSquare" style="background:' + arr[i] + '"></div></td><td><div title="Copy" class="hex" data-clipboard-text="' + arr[i] + '">' + arr[i] + '<i class="fa fa-clipboard" aria-hidden="true"></i></div></td><td><div title="Copy" class="rgb" data-clipboard-text="' + rgbColor + '">' + rgbColor + '<i class="fa fa-clipboard" aria-hidden="true"></i></div></td>' + rating + bgRating + '</tr>'
}
document.querySelector('#list').innerHTML = output;
}
generateTable(colors);
var colorCards = document.getElementsByClassName("hex");
var rgbCards = document.getElementsByClassName("rgb");
for (var i = 0; i < colorCards.length; i++) {
colorCards[i].addEventListener('click', copyAttr, false);
colorCards[i].setAttribute('title', 'Copy');
rgbCards[i].addEventListener('click', copyAttr, false);
rgbCards[i].setAttribute('title', 'Copy');
}
function copyAttr() {
var attribute = this.getAttribute("data-clipboard-text");
var textarea = document.createElement("textarea");
textarea.textContent = attribute;
textarea.style.position = "fixed";
document.body.appendChild(textarea);
textarea.select();
try {
var that = this;
this.setAttribute('title', 'Copied');
setTimeout(function(){ that.setAttribute('title', 'Copy'); }, 2000);
return document.execCommand("copy");
} catch (ex) {
alert("Copy to clipboard failed.", ex);
return false;
} finally {
document.body.removeChild(textarea);
}
};
tippy('[title]', {
placement: 'right',
animation: 'scale',
arrow: true,
dynamicTitle: true,
hideOnClick: false
});
Raw
scripts
<script src="https://unpkg.com/[email protected]/dist/tippy.all.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.js"></script>
Raw
style.scss
$gray: #f6f6f7;
* {
box-sizing: border-box;
}
body {
padding: 32px 16px;
}
.colorSquare {
float: left;
height: 40px;
width: 40px;
display: inline-block;
border-radius: 4px;
border: 1px solid transparent;
}
table {
font-size: 14px;
max-width: 960px;
margin: 0 auto;
tr.header {
th {
padding: 8px;
font-size: 18px;
}
}
td {
padding: 8px 8px;
line-height: 40px;
border-bottom: 1px solid #c1c7d0;
}
th {
text-align: left;
}
span.fails {
border:2px solid #FF3F3F;
padding: 4px 16px;
border-radius: 40px;
}
span.aa {
border:2px solid #00BB00;
padding: 4px 16px;
border-radius: 40px;
}
span.aaa {
border:2px solid #00BB00;
padding: 4px 16px;
border-radius: 40px;
}
span.aa-large {
border: 2px solid #FBD237;
padding: 4px 16px;
border-radius: 40px;
}
div.hex {
text-transform: uppercase;
cursor: pointer;
border: 1px solid #ccc;
border-radius: 4px;
background: #f6f6f7;
padding: 4px 8px;
font-size: 14px;
position: relative;
width: 175px;
display: flex;
height: 30px;
justify-content: space-between;
align-items: center;
&:hover {
i {
color: #333;
}
}
}
div.rgb {
cursor: pointer;
border: 1px solid #ccc;
border-radius: 4px;
background: #f6f6f7;
padding: 4px 8px;
font-size: 14px;
position: relative;
width: 185px;
display: flex;
height: 30px;
justify-content: space-between;
align-items: center;
&:hover {
i {
color: #333;
}
}
}
i {
color: #ccc;
margin-left: 8px;
}
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment