Skip to content

Instantly share code, notes, and snippets.

@erberg-snippets
Last active January 26, 2016 23:27
Show Gist options
  • Save erberg-snippets/b48c3a9f0f42d5882528 to your computer and use it in GitHub Desktop.
Save erberg-snippets/b48c3a9f0f42d5882528 to your computer and use it in GitHub Desktop.
Tests if color combo is AA compliant.
var colorContrastUtil = (function () {
/**
* Convert Hex value to RGB.
* @param {String} hex Color representation
* @return {Object} Object with r, g, and b, params.
*/
var hexToRgb = function (hex) {
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, function(m, r, g, b) {
return r + r + g + g + b + b;
});
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;
};
// from http://www.w3.org/TR/WCAG20/#relativeluminancedef
function relativeLuminanceW3C(R8bit, G8bit, B8bit) {
var RsRGB = R8bit/255;
var GsRGB = G8bit/255;
var BsRGB = B8bit/255;
var R = (RsRGB <= 0.03928) ? RsRGB/12.92 : Math.pow((RsRGB+0.055)/1.055, 2.4);
var G = (GsRGB <= 0.03928) ? GsRGB/12.92 : Math.pow((GsRGB+0.055)/1.055, 2.4);
var B = (BsRGB <= 0.03928) ? BsRGB/12.92 : Math.pow((BsRGB+0.055)/1.055, 2.4);
// For the sRGB colorspace, the relative luminance of a color is defined as:
var L = 0.2126 * R + 0.7152 * G + 0.0722 * B;
return L;
}
/**
* Calculate contrast ratio by luminance.
* @param {Number} L1 Luminance
* @param {Number} L2 Luminance
* @return {Number} Contrast Ratio
*/
var contrastRatio = function (L1,L2) {
var lighterLuminance = Math.max(L1, L2);
var darkerLuminance = Math.min(L1, L2);
return (lighterLuminance + 0.05) / (darkerLuminance + 0.05);
};
/**
* Returns contrast ratio between two hex values.
* @param {String} hex1 Color representation
* @param {String} hex2 Color representation
* @return {Number} Contrast Ratio
*/
var calcContrast = function(hex1, hex2){
var color1 = hexToRgb(hex1);
var color2 = hexToRgb(hex2);
var color1Luminance = relativeLuminanceW3C(color1.r, color1.g, color1.b);
var color2Luminance = relativeLuminanceW3C(color2.r, color2.g, color2.b);
return contrastRatio(color1Luminance, color2Luminance);
};
/**
* Returns whether hex color combination is AA compliant.
* @param {String} hex1 Color representation
* @param {String} hex2 Color representation
* @return {Boolean} true if compliant
*/
var isAA = function (hex1, hex2) {
return calcContrast(hex1, hex2) >= 4.5; // According to https://www.w3.org/TR/WCAG/#visual-audio-contrast
};
/**
* Returns whether hex color combination is AAA compliant.
* @param {String} hex1 Color representation
* @param {String} hex2 Color representation
* @return {Boolean} true if compliant
*/
var isAAA = function (hex1, hex2) {
return calcContrast(hex1, hex2) >= 7; // According to https://www.w3.org/TR/WCAG/#visual-audio-contrast
};
return {
isAA: isAA,
isAAA : isAAA,
calcContrast: calcContrast
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment