Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 101 102 103 104 | 1x 1x 1x 6x 6x 6x 6x 4x 2x 1x 10x 2x 1x 1x | import Chroma from "chroma-js";
import { luminance, luminanceSwitch, LuminositySwitch } from "./luminosity";
/**
* A function to manipulate contrast of two colors.
* @deprecated
*/
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
* @deprecated
* @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.
* @deprecated
*/
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
* @deprecated
*/
export function adjustContrast(
adjustment: number,
operandColor: string,
referenceColor: string
): string {
return contrast(
Chroma.contrast(operandColor, referenceColor) + adjustment,
operandColor,
referenceColor
);
}
|