apca-introduction

commit

afce56b362b813d36aa200eb812ab9b6618df14f

parent

076441d104e4a0b6b8ecf5ccb877fe45a99a9ef5

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2022-07-15 12:44

add contrast implementations

Diffstat

2 files changed, 93 insertions, 0 deletions

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

@@ -0,0 +1,60 @@
   -1     1 export const levels = [45, 60, 75, 90];
   -1     2 
   -1     3 const tests = [
   -1     4   [[136, 136, 136], [255, 255, 255], 63.056469930209424],
   -1     5   [[255, 255, 255], [136, 136, 136], -68.54146436644962],
   -1     6   [[  0,   0,   0], [170, 170, 170], 58.146262578561334],
   -1     7   [[170, 170, 170], [  0,   0,   0], -56.24113336839742],
   -1     8   [[ 17,  34,  51], [221,  51, 255], 91.66830811481631],
   -1     9   [[221,  51, 255], [ 17,  34,  51], -93.06770049484275],
   -1    10   [[ 17,  34,  51], [ 68,  68,  68], 8.32326136957393],
   -1    11   [[ 68,  68,  68], [ 17,  34,  51], -7.526878460278154],
   -1    12 ];
   -1    13 
   -1    14 var sRGBtoY = function(srgb) {
   -1    15   var r = Math.pow(srgb[0] / 255, 2.4);
   -1    16   var g = Math.pow(srgb[1] / 255, 2.4);
   -1    17   var b = Math.pow(srgb[2] / 255, 2.4);
   -1    18   var y = 0.2126729 * r + 0.7151522 * g + 0.0721750 * b;
   -1    19 
   -1    20   if (y < 0.022) {
   -1    21     y += Math.pow(0.022 - y, 1.414);
   -1    22   }
   -1    23   return y;
   -1    24 };
   -1    25 
   -1    26 export var contrast = function(fg, bg) {
   -1    27   var yfg = sRGBtoY(fg);
   -1    28   var ybg = sRGBtoY(bg);
   -1    29   var c = 1.14;
   -1    30 
   -1    31   if (ybg > yfg) {
   -1    32     c *= Math.pow(ybg, 0.56) - Math.pow(yfg, 0.57);
   -1    33   } else {
   -1    34     c *= Math.pow(ybg, 0.65) - Math.pow(yfg, 0.62);
   -1    35   }
   -1    36 
   -1    37   if (Math.abs(c) < 0.1) {
   -1    38     return 0;
   -1    39   } else if (c > 0) {
   -1    40     c -= 0.027;
   -1    41   } else {
   -1    42     c += 0.027;
   -1    43   }
   -1    44 
   -1    45   return c * 100;
   -1    46 };
   -1    47 
   -1    48 export var abs = function(c) {
   -1    49   return Math.abs(c);
   -1    50 };
   -1    51 
   -1    52 var runTests = function() {
   -1    53   tests.forEach(function(test) {
   -1    54     var actual = contrast(test[0], test[1]);
   -1    55     var expected = test[2];
   -1    56     if (Math.abs(actual - expected) > 0.00001) {
   -1    57       console.log(test, actual);
   -1    58     }
   -1    59   });
   -1    60 };

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

@@ -0,0 +1,33 @@
   -1     1 export const levels = [3, 4.5, 7];
   -1     2 
   -1     3 var sRGBtoY = function(srgb) {
   -1     4   var pre = c => c < 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
   -1     5   var r = pre(srgb[0] / 255);
   -1     6   var g = pre(srgb[1] / 255);
   -1     7   var b = pre(srgb[2] / 255);
   -1     8   return 0.2126729 * r + 0.7151522 * g + 0.0721750 * b;
   -1     9 };
   -1    10 
   -1    11 export var contrast = function(fg, bg) {
   -1    12   // NOTE: this returns a "signed" value.
   -1    13   // `c >= 1 ? c : 1 / c` gives you the actual value.
   -1    14   // See also `getAbsRange()`.
   -1    15 
   -1    16   var yfg = sRGBtoY(fg);
   -1    17   var ybg = sRGBtoY(bg);
   -1    18   return (ybg + 0.05) / (yfg + 0.05);
   -1    19 };
   -1    20 
   -1    21 export var abs = function(c) {
   -1    22   return c < 1 ? 1 / c : c;
   -1    23 };
   -1    24 
   -1    25 export var getAbsRange = function(range) {
   -1    26   if (range[0] >= 1) {
   -1    27     return range;
   -1    28   } else if (range[1] <= 1) {
   -1    29     return [1 / range[1], 1 / range[0]];
   -1    30   } else {
   -1    31     return [1, Math.max(1 / range[0], range[1])];
   -1    32   }
   -1    33 };