Last active
January 26, 2016 23:27
-
-
Save erberg-snippets/b48c3a9f0f42d5882528 to your computer and use it in GitHub Desktop.
Tests if color combo is AA compliant.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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