Description Carolyn MacLeod 2016-02-22 11:46:08 EST

Cool feature: If color and background-color are specified together, and if they do not meet a color contrast ratio of 4.5:1, then give a warning that the css rule does not meet the minimum required contrast ratio for WCAG 2.0 AA.

Even cooler, provide a quickfix to suggest what color(s) are needed to pass.

For example, the following rule would fail because gray on aliceblue only has a ratio of 3.68:

.contentassist .proposal-noemphasis-title {
	background-color: aliceblue;
	color: gray;
	padding-top: 5px;
}

The quickfix could change the foreground to #717171:

.contentassist .proposal-noemphasis-title {
	background-color: aliceblue;
	color: #717171;  /* slightly darker than 'gray', to meet WCAG 2.0 AA minimum contrast on aliceblue. */
	padding-top: 5px;
}

If we know the font, then even better, because 18 point or 14 point bold fonts only need to have a ratio of 3:1.

The math (and further info) is here:
https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
(look for definition of contrast ratio, and luminance).

Found this code on StackOverflow:
function luminanace(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;
}

(luminanace(255, 255, 255) + 0.05) / (luminanace(255, 255, 0) + 0.05); // 1.074 for yellow on white
(luminanace(255, 255, 255) + 0.05) / (luminanace(0, 0, 255) + 0.05); // 8.592 for blue on white