how to get contrast from a color using js
function invertColor(hex, bw) { if (hex.indexOf('#') === 0) { hex = hex.slice(1); } // convert 3-digit hex to 6-digits. if (hex.length === 3) { hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]; } if (hex.length !== 6) { throw new Error('Invalid HEX color.'); } var r = parseInt(hex.slice(0, 2), 16), g = parseInt(hex.slice(2, 4), 16), b = parseInt(hex.slice(4, 6), 16); if (bw) { // http://stackoverflow.com/a/3943023/112731 return (r * 0.299 + g * 0.587 + b * 0.114) > 186 ? '#000000' : '#FFFFFF'; } // invert color components r = (255 - r).toString(16); g = (255 - g).toString(16); b = (255 - b).toString(16); // pad each with zeros and return return "#" + padZero(r) + padZero(g) + padZero(b); }
Source: stackoverflow.com
js color contrast ratio
function luminance(r, g, b) { var a = [r, g, b].map(function (v) { v /= 255; return v <= 0.03928 ? v / 12.92 : Math.pow( (v + 0.055) / 1.055, 2.4 ); }); return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722; } function contrast(rgb1, rgb2) { var lum1 = luminance(rgb1[0], rgb1[1], rgb1[2]); var lum2 = luminance(rgb2[0], rgb2[1], rgb2[2]); var brightest = Math.max(lum1, lum2); var darkest = Math.min(lum1, lum2); return (brightest + 0.05) / (darkest + 0.05); } contrast([255, 255, 255], [255, 255, 0]); // 1.074 for yellow contrast([255, 255, 255], [0, 0, 255]); // 8.592 for blue // minimal recommended contrast ratio is 4.5, or 3 for larger font-sizes
Source: stackoverflow.com