contrast-color(): Accesibilidad automática y nativa

¿Cuántas veces tuviste que hacer un condicional en JavaScript o una macro de PostCSS para decidir si el texto de un botón debía ser blanco o negro según el fondo? Esa lógica es frágil y pesada.

Baseline 2026 nos entrega contrast-color(), una función de CSS nativa que analiza la luminosidad del fondo y elige automáticamente el color que cumple con los estándares de accesibilidad (WCAG).

¡Magia cromática para humanos!

💡 Puntos Clave (BLUF)#

Cero Lógica: El navegador hace el cálculo de contraste por vos en tiempo real.
Dinámico: Si el usuario cambia el tema o un color de marca, el texto se adapta al instante.
Basado en Estándares: Usa el algoritmo oficial de WCAG 2.1 para garantizar legibilidad.

Cómo se usa (Sintaxis 2026)#

La forma más básica toma un color de fondo y devuelve blanco o negro:

.badge {
  background-color: var(--brand-color);
  /* El navegador elige el mejor contraste */
  color: contrast-color(var(--brand-color));
}

Nivel Senior: Lista de candidatos#

Podés ser más específico y darle al navegador una lista de tus colores de marca para que elija entre ellos:

.card {
  background-color: var(--card-bg);
  /* Elegí el mejor de estos tres, por favor */
  color: contrast-color(
    var(--card-bg) max,
    #ffffff,
    #000000,
    var(--action-primary)
  );
}

¿Por qué esto cambia las reglas del juego?#

JS/Manual vs. CSS Nativo

contrast-color() (CSS)

Accesibilidad garantizada por el motor del browser.
Menos código que mantener.
Funciona perfecto con variables CSS dinámicas.
Performance instantánea (sin recalcular layouts).

Lógica Manual (Tradicional)

Requiere librerías externas (ej: TinyColor) o lógica JS.
Fácil de olvidar en componentes nuevos.
Puede fallar si el color de fondo cambia asíncronamente.

Implementación en campa.dev#

Estamos usando contrast-color() en nuestro componente <StatusBadge />. Antes, teníamos que definir manualmente una clase .dark-text o .light-text. Ahora, el badge es un componente inteligente que se cuida solo, sin importar el color que le pases.

¿Estás listo para dejar de adivinar colores?