contrast

commit

def3414774f82384ef856e2b1c8fb85ef9b22674

parent

f3b07b94011359cff7b0874bab87cf9a01e68fe3

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2024-04-27 05:28

use canvas to convert color to srgb

https://stackoverflow.com/a/69057776/1636973

Diffstat

2 files changed, 9 insertions, 13 deletions

diff --git a/contrast.js b/contrast.js

@@ -6,6 +6,7 @@ var bgInput = document.querySelector('#bgInput');
    6     6 var swapButton = document.querySelector('#swap');
    7     7 var gradient = document.querySelector('#output .gradient');
    8     8 var description = document.querySelector('#output .description');
   -1     9 var canvas = document.querySelector('canvas');
    9    10 
   10    11 var score = function(linRange, linLevels) {
   11    12   // Estimate home many color combinations fall into each category,
@@ -64,16 +65,11 @@ var makeGradient = function(scores) {
   64    65 };
   65    66 
   66    67 var parseColor = function(s) {
   67    -1   var rgba = s.match(/rgba?\(([\d.]+), ([\d.]+), ([\d.]+)(?:, ([\d.]+))?\)/);
   68    -1   if (!rgba) {
   69    -1     return null;
   70    -1   }
   71    -1   rgba.shift();
   72    -1   if (rgba[3] === undefined) {
   73    -1     rgba[3] = 1;
   74    -1   }
   75    -1   rgba = rgba.map(x => parseFloat(x, 10));
   76    -1   return rgba;
   -1    68   var context = canvas.getContext('2d');
   -1    69   context.fillStyle = s;
   -1    70   context.fillRect(0,0,1,1);
   -1    71   var data = context.getImageData(0, 0, 1, 1, {colorSpace: 'srgb'}).data;
   -1    72   return [data[0], data[1], data[2], data[3] / 255];
   77    73 };
   78    74 
   79    75 var setColor = function(input, key) {
@@ -114,9 +110,8 @@ var oninput = function() {
  114   110 
  115   111     favicon.setFavicon(bgInput.value, fgInput.value);
  116   112 
  117    -1     var computed = getComputedStyle(document.body);
  118    -1     var bg = parseColor(computed.backgroundColor);
  119    -1     var fg = parseColor(computed.color);
   -1   113     var bg = parseColor(bgInput.value);
   -1   114     var fg = parseColor(fgInput.value);
  120   115 
  121   116     var range = wcag2.getContrastRange(fg, bg);
  122   117     var absRange = wcag2.getAbsRange(range);

diff --git a/index.html b/index.html

@@ -32,6 +32,7 @@
   32    32 		<p><a href="https://www.w3.org/TR/WCAG/#contrast-minimum">WCAG on contrast ratio</a></p>
   33    33 	</div>
   34    34 
   -1    35 	<canvas hidden></canvas>
   35    36 	<script src="contrast.js" type="module"></script>
   36    37 </body>
   37    38 </html>