best-contrasting-color.ts

import { z } from 'zod';

const DEFAULT_HEX_OPTIONS = ['#000000', '#FFFFFF'];

const hexColorSchema = z.string().regex(/^#[0-9A-F]{6}$/i);

// https://www.w3.org/TR/AERT/#color-contrast
export function bestContrastingColor(backgroundHexColor: string, ...hexOptions: string[]) {
  hexColorSchema.parse(backgroundHexColor);

  let bestColor = hexOptions[0] ?? DEFAULT_HEX_OPTIONS[0];
  let largestColorDifference = 0;

  (hexOptions.length ? hexOptions : DEFAULT_HEX_OPTIONS).forEach((hexOption) => {
    hexColorSchema.parse(hexOption);

    const colorDifference = calculateColorDifference(backgroundHexColor, hexOption);
    if (colorDifference > largestColorDifference) {
      largestColorDifference = colorDifference;
      bestColor = hexOption;
    }
  });

  return bestColor;
}

function calculateColorDifference(color1: string, color2: string) {
  const red1 = parseInt(color1.substring(0, 2), 16);
  const green1 = parseInt(color1.substring(2, 4), 16);
  const blue1 = parseInt(color1.substring(4, 6), 16);

  const red2 = parseInt(color2.substring(0, 2), 16);
  const green2 = parseInt(color2.substring(2, 4), 16);
  const blue2 = parseInt(color2.substring(4, 6), 16);

  return (
    Math.max(red1, red2) -
    Math.min(red1, red2) +
    (Math.max(green1, green2) - Math.min(green1, green2)) +
    (Math.max(blue1, blue2) - Math.min(blue1, blue2))
  );
}