Cómo crear una paleta accesible a partir de un solo color de marca

La mayoría de los manuales de marca te entregan un código hex y un logo. Convertir eso en algo con lo que puedas construir una interfaz es un trabajo sistemático, y hacerlo a ojo es justo el momento en que los problemas de accesibilidad quedan incrustados.

Paso 1: encuentra el tono

Convierte el color de marca a OKLCH y anota el ángulo de tono. Ese número es la marca. Todo lo demás se puede ajustar.

#2563eb  →  oklch(54.6% 0.215 262.9)

El tono 262.9 queda fijo para toda la escala. La luminosidad y el croma son las variables.

Paso 2: construye la escala

Diez pasos, repartidos de forma uniforme en luminosidad, con el croma en su punto más alto en el centro y bajando hacia ambos extremos. Los colores muy claros y muy oscuros no pueden sostener un croma alto sin salirse del rango que la pantalla es capaz de mostrar.

--brand-50:  oklch(97% 0.015 263);
--brand-100: oklch(93% 0.035 263);
--brand-200: oklch(87% 0.070 263);
--brand-300: oklch(79% 0.120 263);
--brand-400: oklch(67% 0.180 263);
--brand-500: oklch(55% 0.215 263);  /* the original */
--brand-600: oklch(48% 0.200 263);
--brand-700: oklch(40% 0.165 263);
--brand-800: oklch(31% 0.120 263);
--brand-900: oklch(22% 0.075 263);

Como la luminosidad de OKLCH es perceptualmente uniforme, estos pasos se ven parejos. El mismo ejercicio en HSL produce una escala que se amontona en el centro y da saltos en los extremos.

Paso 3: asigna roles midiendo, no a ojo

Este es el paso que decide si el sistema es accesible, y es el que con más frecuencia se resuelve por intuición.

No elijas “el que se ve bonito” para el texto. Parte del requisito de contraste y trabaja hacia atrás:

Rol	Requisito	Paso habitual
Texto de cuerpo sobre blanco	4.5:1	600–700
Texto grande sobre blanco	3:1	500–600
Fondo de botón con etiqueta blanca	4.5:1 para la etiqueta	600
Bordes y divisores	3:1 si transmiten significado	400 (300 mide 1.95:1 sobre blanco, así que solo sirve como decoración)
Fondos sutiles	ninguno	50–100

La idea útil: tu color de marca normalmente no es tu color de texto. Un 500 intenso está pensado para verse en tamaño grande, en un logo. Úsalo como texto de cuerpo a 16px y casi siempre se quedará por debajo de 4.5:1. El paso 600 o el 700 es lo que necesita el texto de cuerpo, y sigue siendo claramente tu azul.

Paso 4: genera las variantes para modo oscuro

No des por hecho que la escala se invierte. No lo hace, por dos razones.

La fórmula de WCAG 2 suma una constante fija de destello (flare) que domina en el extremo oscuro, así que los pares oscuros pueden dar ratios aprobatorios y aun así verse apagados. Además, los colores muy saturados vibran sobre fondos oscuros de una manera en que no lo hacen sobre blanco.

Por eso cada rol semántico necesita un segundo valor, más claro y normalmente menos saturado:

:root {
  --text-brand: var(--brand-700);
  --surface-brand: var(--brand-50);
  --border-brand: var(--brand-400);
}

:root[data-theme='dark'] {
  --text-brand: var(--brand-300);
  --surface-brand: var(--brand-900);
  --border-brand: var(--brand-700);
}

La misma escala, pasos distintos. Por eso conviene construir primero la escala: el modo oscuro se vuelve una reasignación y no un segundo ejercicio de diseño.

Paso 5: nombra por rol, no por valor

--brand-600 es un valor. --text-brand es un rol. Los componentes deben hacer referencia a roles.

La razón es práctica: cuando el color de marca cambie, y va a cambiar, regeneras la escala y los roles siguen apuntando a los pasos correctos. Si los componentes hacen referencia directa a --brand-600, tienes que revisarlos uno por uno.

Además, es lo único que hace posible tener temas. Un rol puede apuntar a pasos distintos en temas distintos. Un valor fijo no.

Paso 6: revisa los pares, no solo la escala

Una escala que pasa el contraste todavía puede fallar en el uso real. Hay dos cosas que verificar:

Cada combinación de texto sobre superficie que de verdad publicas. No todos los pares posibles, solo los que aparecen en la interfaz. Cuerpo sobre el fondo de la página, cuerpo sobre una tarjeta, enlace sobre una tarjeta, etiqueta del botón sobre el botón.

Si dos colores se confunden para las personas con daltonismo. Si tu sistema incluye un segundo acento, por ejemplo un verde de éxito junto al azul de marca, revisa ese par en concreto. La verificación de contraste compara el primer plano con el fondo y nunca un primer plano con otro, así que esta falla pasa cualquier auditoría de ratios.

La versión más corta

Fija el tono. Escalona la luminosidad. Reduce el croma en los extremos. Asigna roles midiendo y no a ojo. Genera variantes oscuras en lugar de invertir. Nombra por rol.

Seis pasos y un solo color de marca te dan un sistema que aprueba en ambos temas, sin que nadie tenga que negociar con el manual de marca.

Nuestro verificador de contraste se encarga de la parte de medir: dale un par y te muestra el ratio, la cifra APCA a tu tamaño y peso reales, y el color más cercano que aprueba si no llega.