All files / fast-colors/src contrast.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
1x
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
6x
6x
6x
 
 
 
 
6x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4x
 
 
 
 
 
 
2x
 
 
 
 
 
 
1x
 
 
 
 
12x
 
 
 
 
10x
 
 
2x
 
 
 
 
 
 
 
1x
 
 
 
 
1x
 
 
 
 
 
 
import Chroma from "chroma-js";
import { luminance, luminanceSwitch, LuminositySwitch } from "./luminosity";
 
/**
 * A function to manipulate contrast of two colors.
 */
export type ContrastFunction = (
    targetRatio: number,
    operandColor: string,
    referenceColor: string
) => string;
 
/**
 * Adjust the darkness/lightness of a foreground color so that it matches a target contrast ratio against a background color
 * @param targetRatio - The desired contrast ratio to bring the operandColor to against the referenceColor
 * @param operand - The color value to manipulate
 * @param referenceColor - The color value to evaluate contrast against
 */
export function contrast(
    targetRatio: number,
    operandColor: string,
    referenceColor: string
): string {
    const operand: Chroma = Chroma(operandColor);
    const backgroundLuminance: number = Chroma(referenceColor).luminance();
    const luminositySwitch: LuminositySwitch = luminanceSwitch(
        operand.luminance(),
        backgroundLuminance
    );
 
    return Chroma(
        luminance(
            luminositySwitch(L1, L2)(targetRatio, backgroundLuminance),
            operand,
            luminositySwitch(Math.ceil, Math.floor)
        )
    ).hex();
}
 
/**
 * The following functions (L1 and L2) are formulas derived from the WCAG 2.0 formula for calculating
 * color contrast ratios - https://www.w3.org/TR/WCAG20-TECHS/G18.html):
 *
 * ContrastRatio = (L1 + 0.05) / (L2 + 0.05)
 *
 * Given a known contrast ratio (contrastRatio) and a known luminosity (L2 and L1 respectively),
 * these formulas solve for L1 and L2 respectively.
 */
 
/**
 * Solve for L1 when L2 and contrast ratio are known
 */
function L1(contrastRatio: number, l2: number): number {
    return contrastRatio * l2 + 0.05 * contrastRatio - 0.05;
}
 
/**
 * Solve for L2 when L1 and contrast ratio are known
 */
function L2(contrastRatio: number, l1: number): number {
    return (-0.05 * contrastRatio + l1 + 0.05) / contrastRatio;
}
 
/**
 * Ensures that two colors achieve a target contrast ratio. If they don't reach the target contrast ratio, the operandColor will
 * be adjusted to meet the target contrast ratio.
 */
export function ensureContrast(
    targetRatio: number,
    operandColor: string,
    referenceColor: string
): string {
    if (
        typeof targetRatio !== "number" ||
        typeof operandColor !== "string" ||
        typeof referenceColor !== "string"
    ) {
        return operandColor;
    }
 
    return Chroma.contrast(operandColor, referenceColor) < targetRatio
        ? contrast(targetRatio, operandColor, referenceColor)
        : operandColor;
}
 
/**
 * Adjusts the contrast between two colors by a given ratio adjustment
 */
export function adjustContrast(
    adjustment: number,
    operandColor: string,
    referenceColor: string
): string {
    return contrast(
        Chroma.contrast(operandColor, referenceColor) + adjustment,
        operandColor,
        referenceColor
    );
}