OKLCH: Paletas dinámicas accesibles
OKLCH: Paletas dinámicas accesibles
OKLCH es un espacio de color perceptualmente uniforme que permite crear paletas dinámicas accesibles manteniendo la luminosidad constante a través de diferentes matices. A diferencia de HSL, donde el mismo valor de "lightness" produce brillos visuales distintos según el color, OKLCH garantiza que un cambio de tono (h) no afecte la accesibilidad (contraste) percibida por el ojo humano. En mi experiencia, esta es la herramienta definitiva para sistemas de diseño que necesitan ser escalables sin intervenciones manuales constantes.
El Problema
Si alguna vez trataste de crear un sistema de temas dinámicos usando HSL, seguro te diste cuenta de que el azul puro (hsl(240, 100%, 50%)) se ve mucho más oscuro y pesado que el amarillo puro (hsl(60, 100%, 50%)).
Azul (L: 50%)
Amarillo (L: 50%)
A pesar de que ambos tienen 50% de luminosidad en el código, tu ojo no los ve igual. El amarillo brilla más. Esto hace que sea imposible automatizar el contraste (WCAG) simplemente cambiando el Hue, porque la luminosidad percibida varía drásticamente.
La Solución
Pasate a OKLCH. El canal L (Lightness) de OKLCH está calibrado según la percepción humana. Un L: 60% en azul tiene exactamente la misma fuerza visual que un L: 60% en verde o rosa.
Mirá cómo podés estructurar tu sistema de diseño con variables CSS para que sea totalmente dinámico y seguro:
:root {
/* Definimos el matiz base (Blueberry) */
--hue: 250;
/*Paleta Perceptualmente Uniforme _/
--bg: oklch(98% 0.01 var(--hue));
--text: oklch(25% 0.05 var(--hue));
--accent: oklch(65% 0.2 var(--hue)); /_ Contraste garantizado*/
}
/_Cambiar el tema es solo cambiar UNA variable _/
[data-theme="forest"] {
--hue: 145; /_ Todo el sistema se adapta manteniendo el contraste_/
}
[data-theme="dark"] {
--bg: oklch(18% 0.02 var(--hue));
--text: oklch(92% 0.03 var(--hue));
}
Por qué funciona
OKLCH separa el color en tres ejes: L (Lightness/Luminosidad), C (Chroma/Intensidad) y H (Hue/Matiz). Al ser perceptualmente uniforme, el valor de L es una métrica real de contraste.
Si un botón con L: 60% pasa el test de accesibilidad sobre un fondo L: 98%, va a seguir pasándolo aunque cambies el color a rojo, púrpura o verde, siempre y cuando mantengas ese 60% de luminosidad. Es ingeniería de color aplicada para que no tengas que ajustar cada tono a mano. Este nivel de automatización es el mismo que buscamos al automatizar sitemaps i18n para no dejar cabos sueltos.