Color Contrast by Lea Verou

Color Contrast by Lea Verou

contrast-color.css

/*
 * Contrast color
 *
 * We can emulate the upcoming CSS contrast-color() function via CSS features
 * that have already widely shipped
 * See Lea Verrou's excellent blog post:
 * https://lea.verou.me/blog/2024/contrast-color
 */

@property --color {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

.contrast-color {
  /* Fallback for browsers that don't support RCS */
  color: white;
  text-shadow:
    0 0 0.05em black,
    0 0 0.05em black,
    0 0 0.05em black,
    0 0 0.05em black;

  @supports (color: oklch(from red l c h)) {
    --l: clamp(0, (var(--l-threshold, 0.623) / l - 1) * infinity, 1);
    color: oklch(from var(--color) var(--l) 0 h);
    text-shadow: none;
  }

  /* biome-ignore lint/correctness/noUnknownFunction: Futur-proofing */
  @supports (color: contrast-color(red)) {
    /* biome-ignore lint/correctness/noUnknownFunction: Futur-proofing */
    color: contrast-color(var(--color));
    text-shadow: none;
  }
}