Generates WCAG scale of grays

lightnessWcagContrastInterpolator.ts

import { interpolatorSplineBasis } from 'culori'

const wcagContrastScale: Array<string> = [
	"#fefefe",
	"#b6b6b6",
	"#949494",
	"#7f7f7f",
	"#6f6f6f",
	"#636363",
	"#595959",
	"#505050",
	"#494949",
	"#424242",
	"#3c3c3c",
	"#363636",
	"#313131",
	"#2b2b2b",
	"#262626",
	"#212121",
	"#1c1c1c",
	"#161616",
	"#101010",
	"#080808",
	"#000000",
];

export const lightnessWcagContrastInterpolator = interpolatorSplineBasis(
	wcagContrastScale.map((hex) => oklab(hex)!.l!),
);

wcagScale.ts

import type { Color } from 'culori'
import { wcagContrast } from 'culori'

const contrastScale: Record<number, Color> = {};

Array.from({ length: 256 }, (_, i) => i).forEach((_, i) => {
	const color = {
		r: i / 256,
		g: i / 256,
		b: i / 256,
		mode: "rgb",
	} as const;

	const contrast = wcagContrast(color, { r: 1, g: 1, b: 1, mode: "rgb" });
	const roundedContrast = Math.floor(contrast);

	const storedContrast = contrastScale[roundedContrast];

	if (!storedContrast) {
		contrastScale[roundedContrast] = color;
	} else {
		if (
			contrast < wcagContrast(storedContrast, { r: 1, g: 1, b: 1, mode: "rgb" })
		) {
			contrastScale[roundedContrast] = color;
		}
	}
});