Add contrast warnings

1 files changed, 41 insertions, 31 deletions

diff --git a/benchmark/index.html b/benchmark/index.html
index ffd435e..d3ae866 100644
--- a/benchmark/index.html
+++ b/benchmark/index.html
@@ -47,6 +47,7 @@
 
       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)
@@ -54,29 +55,32 @@
           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)
           if(l0 > l1){ return (l0 + 0.05) / (l1 + 0.05) }
           else{ return (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))
       }
 
       function refresh()
@@ -84,6 +88,9 @@
         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]
@@ -93,15 +100,15 @@
             if(fc != bc){
               let frgb = hex_to_rgb(fc)
               let brgb = hex_to_rgb(bc)
-              if(frgb && brgb)
-              {
+              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 ? '✓' : '✗'})`
-              }
-              else
-              {
-                console.warn(`Unable to evaluate against WCAG 2.0: ${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; 
             }
@@ -117,17 +124,20 @@
         {
           let frgb = hex_to_rgb(theme.active.f_inv)
           let brgb = hex_to_rgb(theme.active.b_inv)
-          if(frgb && brgb)
-          {
+          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 ? '✓' : '✗'})`
-          }
-          else
-          {
-            console.warn(`Unable to evaluate against WCAG 2.0: ${frgb} ${brgb}`)
+            if (!c.aa) {
+              contrast_html += `<b>${fid}</b> ${bid} <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>` : '';
       }
     </script>
   </body>