contrast

Easily calculate color contrast ratios  https://p.ce9e.org/contrast/
git clone https://git.ce9e.org/contrast.git

commit
f1717d24273b3178c01a59e6e6a264dd37df7c77
parent
ee521729e8f77fd6102cf54be315271e11d37960
Author
Tobias Bengfort <tobias.bengfort@posteo.de>
Date
2023-05-25 06:24
cleanup code a bit

Diffstat

M contrast.js 18 ++++++++++++++----
M wcag2.js 2 +-

2 files changed, 15 insertions, 5 deletions


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

@@ -7,7 +7,17 @@ var swapButton = document.querySelector('#swap');
    7     7 var gradient = document.querySelector('#output .gradient');
    8     8 var description = document.querySelector('#output .description');
    9     9 
   10    -1 var score = function(range, levels) {
   -1    10 var score = function(linRange, linLevels) {
   -1    11   // Estimate home many color combinations fall into each category,
   -1    12   // assuming that log(contrasts) is evenly distributed.
   -1    13   //
   -1    14   // We have to work with signed contrasts, otherwise for very transparent
   -1    15   // backgrounds we would move directly from high negative contrast to high
   -1    16   // positive contrast and miss all the low contrast in between.
   -1    17 
   -1    18   var range = linRange.map(Math.log);
   -1    19   var levels = linLevels.map(Math.log);
   -1    20 
   11    21   var biggerThan = function(t) {
   12    22     if (range[0] > t) {
   13    23       return 1;
@@ -108,9 +118,9 @@ var oninput = function() {
  108   118     var bg = parseColor(computed.backgroundColor);
  109   119     var fg = parseColor(computed.color);
  110   120 
  111    -1     var wcag2Range = wcag2.contrastAlpha(fg, bg, wcag2.contrast);
  112    -1     var absRange = wcag2.getAbsRange(wcag2Range);
  113    -1     gradient.style.backgroundImage = makeGradient(score(wcag2Range.map(Math.log), wcag2.levels.map(Math.log)));
   -1   121     var range = wcag2.getContrastRange(fg, bg);
   -1   122     var absRange = wcag2.getAbsRange(range);
   -1   123     gradient.style.backgroundImage = makeGradient(score(range, wcag2.levels));
  114   124     gradient.textContent = formatRange(absRange, 2);
  115   125 
  116   126     let desc1 = makeDescription(absRange[0], wcag2.levels);

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

@@ -40,7 +40,7 @@ var alphaBlend = function(fg, bg) {
   40    40   ];
   41    41 };
   42    42 
   43    -1 export var contrastAlpha = function(afg, abg, contrast) {
   -1    43 export var getContrastRange = function(afg, abg) {
   44    44   var bgBlack = alphaBlend(abg, [0, 0, 0]);
   45    45   var fgBlack = alphaBlend(afg, bgBlack);
   46    46   var cBlack = contrast(fgBlack, bgBlack);