diff options
| author | Devine Lu Linvega <aliceffekt@gmail.com> | 2018-09-15 15:08:49 +1200 |
|---|---|---|
| committer | Devine Lu Linvega <aliceffekt@gmail.com> | 2018-09-15 15:08:49 +1200 |
| commit | ef19f4e562cfca7d5eca50e22283d94ff890a1d7 (patch) | |
| tree | 1c3d817f53f9017b24384029a72101a0afd0866e | |
| parent | 84faf74d2198378c760c57696bd1f36bc3ee4603 (diff) | |
Minor cleanup
| -rw-r--r-- | benchmark/index.html | 1 | ||||
| -rw-r--r-- | benchmark/scripts/benchmark.js | 99 | ||||
| -rw-r--r-- | benchmark/scripts/color.js | 39 |
3 files changed, 43 insertions, 96 deletions
diff --git a/benchmark/index.html b/benchmark/index.html index 680eec4..eee1d2f 100644 --- a/benchmark/index.html +++ b/benchmark/index.html @@ -1,6 +1,7 @@ <html> <head> <meta charset="utf-8"/> + <script type="text/javascript" src="scripts/color.js"></script> <script type="text/javascript" src="scripts/benchmark.js"></script> <script type="text/javascript" src="scripts/lib/theme.js"></script> <link rel="stylesheet" type="text/css" href="links/reset.css"/> diff --git a/benchmark/scripts/benchmark.js b/benchmark/scripts/benchmark.js index 6d9aec1..d62ae33 100644 --- a/benchmark/scripts/benchmark.js +++ b/benchmark/scripts/benchmark.js @@ -1,116 +1,23 @@ function Benchmark() { - function hex_to_rgb(c) - { - let rgb - if(c.length === 4 || c.length === 7){ c = c.slice(1) } - if(c.length === 3){ - rgb = [ parseInt(c.slice(0, 1), 16) * 17, parseInt(c.slice(1, 2), 16) * 17, parseInt(c.slice(2, 3), 16) * 17 ] - } - else if(c.length === 6){ - rgb = [ parseInt(c.slice(0, 2), 16), parseInt(c.slice(2, 4), 16), parseInt(c.slice(4, 6), 16) ] - } - return (!rgb || isNaN(rgb[0]) || isNaN(rgb[1]) || isNaN(rgb[2])) ? null : rgb - } - - function wcag_contrast(c0, c1) - { - function _linear(v){ return (v <= 0.03928) ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4) } - function _relative_luminance(rgb) - { - let r = _linear(rgb[0] / 256) - let g = _linear(rgb[1] / 256) - let b = _linear(rgb[2] / 256) - return 0.2126 * r + 0.7152 * g + 0.0722 * b - } - function _contrast(c0, c1) - { - let l0 = _relative_luminance(c0) - let l1 = _relative_luminance(c1) - return l0 > l1 ? (l0 + 0.05) / (l1 + 0.05) : (l1 + 0.05) / (l0 + 0.05) - } - let Contrast = function(r) - { - this.ratio = r.toFixed(1) - this.aa = r > 4.5 - this.aaa = r > 7.0 - this.large = { - aa: r > 3.0, - aaa: r > 4.5 - } - } - Contrast.prototype.toString = function() - { - let str = this.ratio.toString() - if(this.aaa){ str += " ✓✓✓" } - else if(this.aa && this.large.aaa){ str += " ✓✓~" } - else if(this.large.aaa){ str += " ~~~" } - else if(this.aa){ str += " ✓✓" } - else if(this.large.aa){ str += " ~~" } - else { str += " ✗" } - return str - } - return new Contrast(_contrast(c0, c1)) - } - this.refresh = function(theme = this) { let el = document.getElementById("print") let html = "" let count = 0 - let contrast = {} - let contrast_html = "" - let contrast_count = 0 for(let fid in theme.active){ if(fid.substr(0,1) != "f" || fid.indexOf("_inv") > -1){ continue; } let fc = theme.active[fid] for(let bid in theme.active){ if(bid.substr(0,1) != "b" || bid.indexOf("_inv") > -1){ continue; } let bc = theme.active[bid] - if(fc != bc){ - let frgb = hex_to_rgb(fc) - let brgb = hex_to_rgb(bc) - if(frgb && brgb){ - let c = wcag_contrast(frgb, brgb) - if(!c.aa) - { - contrast_html += `<b>${fid}</b> ${bid} <i>has low contrast (${c.toString()})</i>\n` - contrast_count += 1 - } - contrast[fid] = { [bid]: c.toString(), ...contrast[fid] } - } - else{ - console.warn(`Unable to evaluate against WCAG 2.0: ${frgb} ${brgb}`) - } - - continue; + let rating = new Color(fc).contrast(new Color(bc)); + if(rating < 3){ + html += `Low contrast(${rating.toFixed(2)}): <b>${fid}</b> ${bid} <i>${bc}</i>\n` } - html += `<b>${fid}</b> ${bid} <i>${bc}</i>\n` count += 1 } } - if(theme.active.f_inv == theme.active.b_inv){ - html += `<b>f_inv</b> b_inv <i>${theme.active.f_inv}</i>\n` - count += 1 - } - else{ - let frgb = hex_to_rgb(theme.active.f_inv) - let brgb = hex_to_rgb(theme.active.b_inv) - if(frgb && brgb){ - let c = wcag_contrast(frgb, brgb) - if(!c.aa){ - contrast_html += `<b>f_inv</b> b_inv <i>has low contrast (${c.toString()})</i>\n` - contrast_count += 1 - } - contrast["f_inv"] = {"b_inv": wcag_contrast(frgb, brgb).toString() } - } - else{ - console.warn(`Unable to evaluate against WCAG 2.0: ${frgb} ${brgb}`) - } - } - console.info("WCAG 2.0 contrast:") - console.table(contrast) el.innerHTML = count > 0 ? `${html}\n<i>${count} conflicts</i>\n\n` : "" - el.innerHTML += contrast_count > 0 ? `${contrast_html}\n<i>${contrast_count} contrast warnings</i>` : "" } } diff --git a/benchmark/scripts/color.js b/benchmark/scripts/color.js new file mode 100644 index 0000000..074c963 --- /dev/null +++ b/benchmark/scripts/color.js @@ -0,0 +1,39 @@ +function Color(hex = '#000000') +{ + this.hex = hex; + + var r = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(this.hex); + + this.rgb = {r: parseInt(r[1], 16),g: parseInt(r[2], 16),b: parseInt(r[3], 16)} + + this.r = this.rgb.r; + this.g = this.rgb.g; + this.b = this.rgb.b; + + this.average = parseInt((this.rgb.r + this.rgb.g + this.rgb.b)/3) + this.invert = {r:255-this.rgb.r, g:255-this.rgb.g, b:255-this.rgb.b}; + + this.contrast = function(b) + { + let a_lum = 0.2126 * _linear(this.r / 256) + 0.7152 * _linear(this.g / 256) + 0.0722 * _linear(this.b / 256) + let b_lum = 0.2126 * _linear(b.r / 256) + 0.7152 * _linear(b.g / 256) + 0.0722 * _linear(b.b / 256) + return a_lum > b_lum ? (a_lum + 0.05) / (b_lum + 0.05) : (b_lum + 0.05) / (a_lum + 0.05); + } + + this.rgba = function() + { + return "rgba("+this.rgb().r+","+this.rgb().g+","+this.rgb().b+",1)"; + } + + this.floats = function() + { + return { r:this.rgb.r/255, g:this.rgb.g/255, b:this.rgb.b/255 } + } + + this.toString = function() + { + return this.hex; + } + + function _linear(v){ return (v <= 0.03928) ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4); } +}
\ No newline at end of file |