Merge pull request #19 from jda0/patch-1

Add contrast warnings to log

1 files changed, 43 insertions, 26 deletions

diff --git a/benchmark/scripts/benchmark.js b/benchmark/scripts/benchmark.js
index 36c67a9..6d9aec1 100644
--- a/benchmark/scripts/benchmark.js
+++ b/benchmark/scripts/benchmark.js
@@ -3,9 +3,7 @@ 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 ]
     }
@@ -17,6 +15,7 @@ function Benchmark()
 
   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)
@@ -24,37 +23,44 @@ function Benchmark()
       let b = _linear(rgb[2] / 256)
       return 0.2126 * r + 0.7152 * g + 0.0722 * b
     }
-
-    function _linear(v)
-    {
-      return (v <= 0.03928) ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4) 
-    }
-
     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 ratio = _contrast(c0, c1)
-
-    return { 
-      ratio, 
-      aa: ratio > 4.5, 
-      aaa: ratio > 7.0,
-      large: {
-        aa: ratio > 3.0,
-        aaa: ratio > 4.5
+    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()
+  this.refresh = function(theme = this)
   {
-    let el = document.getElementById('print')
+    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]
@@ -66,7 +72,12 @@ function Benchmark()
           let brgb = hex_to_rgb(bc)
           if(frgb && brgb){
             let c = wcag_contrast(frgb, brgb)
-            document.querySelector(`.${fid}.${bid === 'background' ? 'bg' : bid}`).innerHTML += ` (${c.ratio.toFixed(1)} ${c.aaa ? '✓✓✓' : c.aa ? '✓✓' : c.large.aa ? '✓' : '✗'})`
+            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}`)
@@ -82,18 +93,24 @@ function Benchmark()
       html += `<b>f_inv</b> b_inv <i>${theme.active.f_inv}</i>\n`
       count += 1
     }
-    else
-    {
+    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)
-        document.querySelector(`.f_inv.b_inv`).innerHTML += ` (${c.ratio.toFixed(1)} ${c.aaa ? '✓✓✓' : c.aa ? '✓✓' : c.large.aa ? '✓' : '✗'})`
+        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}`)
       }
     }
-    el.innerHTML = count > 0 ? html+`\n<i>${count} conflicts</i>` : '';
+    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>` : ""
   }
-}
\ No newline at end of file
+}