app/lib/contrast.mjs

Functions

Imports

It imports no other module of this repo. No module of this repo imports it.

Source

1/**
2 * @param {string} hex
3 * @returns {[number, number, number]}
4 */
5export function channels(hex) {
6  const h = hex.trim().replace("#", "");
7  const full =
8    h.length === 3
9      ? h
10          .split("")
11          .map((c) => c + c)
12          .join("")
13      : h;
14  if (!/^[0-9a-fA-F]{6}$/.test(full)) throw new Error(`not a hex color: ${hex}`);
15  return [
16    parseInt(full.slice(0, 2), 16) / 255,
17    parseInt(full.slice(2, 4), 16) / 255,
18    parseInt(full.slice(4, 6), 16) / 255,
19  ];
20}
21
22/** @param {string} hex */
23function luminance(hex) {
24  // Destructured before the transform: `.map` over a tuple loses its length for the type checker.
25  const [r, g, b] = channels(hex);
26  /** @param {number} c */
27  const linear = (c) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
28  return 0.2126 * linear(r) + 0.7152 * linear(g) + 0.0722 * linear(b);
29}
30
31/** @param {string} a @param {string} b */
32export function contrast(a, b) {
33  const la = luminance(a);
34  const lb = luminance(b);
35  return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
36}
37
38/**
39 * APCA, W3C draft 0.1.9 constants. Sign carries polarity; magnitude is what is compared.
40 *
41 * @param {string} textHex
42 * @param {string} bgHex
43 */
44export function apca(textHex, bgHex) {
45  /** @param {string} hex */
46  const Y = (hex) => {
47    const [r, g, b] = channels(hex);
48    return 0.2126729 * r ** 2.4 + 0.7151522 * g ** 2.4 + 0.072175 * b ** 2.4;
49  };
50  /** @param {number} y */
51  const clampBlack = (y) => (y < 0.022 ? y + (0.022 - y) ** 1.414 : y);
52
53  const Ytxt = clampBlack(Y(textHex));
54  const Ybg = clampBlack(Y(bgHex));
55  if (Math.abs(Ybg - Ytxt) < 0.0005) return 0;
56
57  let out;
58  if (Ybg > Ytxt) {
59    const sapc = (Ybg ** 0.56 - Ytxt ** 0.57) * 1.14;
60    out = sapc < 0.1 ? 0 : sapc - 0.027;
61  } else {
62    const sapc = (Ybg ** 0.65 - Ytxt ** 0.62) * 1.14;
63    out = sapc > -0.1 ? 0 : sapc + 0.027;
64  }
65  return out * 100;
66}