Por qué una luminosidad HSL del 50% no implica el mismo contraste de texto

Igual luminosidad, distinta luminancia relativa

Introducir #FF0000 y #00FF00 en Moyoutil produce hsl(0, 100%, 50%) y hsl(120, 100%, 50%). Ambos tienen una luminosidad HSL del 50%, pero su luminancia relativa sRGB según WCAG es 0.2126 y 0.7152. Son magnitudes distintas. CSS Color 4 también explica que la luminosidad HSL no es una escala visualmente uniforme.

W3C CSS Color 4 §7: HSL

No promedies directamente los canales RGB

WCAG divide los canales de 0–255 entre 255, los linealiza y pondera R, G y B por 0.2126, 0.7152 y 0.0722. El contraste es (L1 + 0.05) / (L2 + 0.05), usando la luminancia relativa de los colores más claro y más oscuro. Frente al blanco, el rojo da aproximadamente 3.9985:1 y el verde 1.3722:1. La visualización redondea a cuatro decimales; no uses valores redondeados para determinar conformidad.

El código siguiente es un ejemplo independiente de reproducción. Moyoutil convierte HEX, RGB y HSL; no informa del contraste ni de la conformidad WCAG. Comprueba juntos el color del texto y el fondo del diseño real. La transparencia, las imágenes y los fondos degradados quedan fuera de este ejemplo de colores sólidos opacos.

const linear = n => {
  const s = n / 255;
  return s <= 0.04045 ? s / 12.92
    : ((s + 0.055) / 1.055) ** 2.4;
};
const luminance = rgb => {
  const [r, g, b] = rgb.map(linear);
  return 0.2126*r + 0.7152*g + 0.0722*b;
};
const contrast = (a, b) => {
  const x = luminance(a), y = luminance(b);
  return (Math.max(x,y)+0.05)
       / (Math.min(x,y)+0.05);
};
console.log(contrast([255,0,0], [255,255,255]).toFixed(4));
console.log(contrast([0,255,0], [255,255,255]).toFixed(4));
// 3.9985
// 1.3722

W3C WCAG 2.2: relative luminance and contrast ratio

Preguntas frecuentes