Una paleta de colores es más que un conjunto de colores que te gustan. Es un sistema que debe funcionar para texto, botones, fondos, gráficos y estados de error, en temas claros y oscuros, para personas con todo tipo de visión. Los equipos que empiezan pensando en la accesibilidad terminan con paletas más flexibles y más coherentes, y evitan rediseños dolorosos al final de un proyecto.
Empieza por el propósito, no por el tono
Enumera lo que la paleta tiene que hacer antes de elegir ningún color:
- Un color primario para las acciones principales y el reconocimiento de marca.
- Una o dos escalas neutras para fondos, bordes y texto.
- Colores semánticos para éxito, advertencia, error e información.
- Colores de acento opcionales para gráficos y resaltados.
Pensar en roles evita el error común de elegir un precioso color de marca y descubrir que no se puede usar para texto en ningún lado.
Crea escalas de tonos, no colores sueltos
Para cada tono, crea una escala de pasos de luminosidad, por ejemplo del 50 (muy claro) pasando por el 500 (la base) hasta el 900 (muy oscuro). Una escala te da el color adecuado para cada tarea: matices claros para fondos y estados hover, tonos medios para bordes e iconos, y sombras oscuras para el texto.
Mantén los pasos visiblemente distintos. Una buena regla práctica es diseñar la escala de modo que sepas de antemano qué pasos son seguros juntos. Por ejemplo, el paso 700 o más oscuro sobre un fondo del paso 50 normalmente cumplirá AA para texto normal, mientras que el paso 500 sobre blanco a menudo no.
Prueba cada combinación que vayas a usar
El contraste es una propiedad de un par de colores, no de un color. Para cada combinación que vayas a publicar, mide la relación y compárala con el objetivo:
- Texto de cuerpo y su fondo: al menos 4.5:1, idealmente 7:1.
- Títulos grandes: al menos 3:1.
- Bordes de campos y botones frente al fondo: al menos 3:1.
- Texto sobre tu botón primario: al menos 4.5:1.
- Enlaces dentro del texto: contraste con el texto circundante y con el fondo, más un subrayado u otra señal que no sea el color.
Anota las combinaciones seguras. Una pequeña tabla de pares aprobados de texto y fondo convierte la accesibilidad en algo que diseñadores y desarrolladores pueden consultar en lugar de volver a comprobar cada vez. El verificador de contraste de color muestra la relación y qué niveles se cumplen para texto normal, texto grande y componentes de interfaz.
El problema del color de marca
Muchos colores de marca vibrantes, como el naranja brillante, el amarillo, el verde claro y el azul cielo, tienen poco contraste sobre blanco. Tienes varias opciones:
- Usar el color de marca para áreas grandes y decoración, con texto oscuro encima.
- Crear una variante más oscura del color de marca para el texto y los elementos pequeños.
- Colocar texto blanco solo sobre tonos lo bastante oscuros como para alcanzar 4.5:1.
Ajusta la luminosidad conservando el tono y la variante más oscura seguirá leyéndose como la misma marca.
No dependas solo del color
Alrededor del 8 por ciento de los hombres y una proporción mucho menor de mujeres tienen alguna forma de deficiencia en la visión del color, que afecta sobre todo al rojo y al verde. Combina el color con otra señal:
- Añade iconos o texto a los estados de éxito y error.
- Subraya los enlaces en el texto corrido.
- Usa patrones, etiquetas o anotaciones directas en los gráficos.
- Comprueba que dos series de un gráfico se distingan en escala de grises.
Una prueba rápida es ver tu diseño en escala de grises. Si la información desaparece, el color carga con demasiado del significado.
Planifica el modo oscuro
Un tema oscuro no es simplemente invertir los colores. El texto blanco puro sobre negro puro puede sentirse duro y provocar vibración visual en algunos lectores, por lo que muchos diseñadores usan un blanco roto sobre un gris muy oscuro. Los colores saturados que se ven bien sobre blanco suelen parecer demasiado intensos sobre fondos oscuros, así que usa versiones más claras y algo menos saturadas. Vuelve a probar todos los pares en el tema oscuro, ya que un par que cumple en modo claro no cumple automáticamente en el oscuro.
Nombra los colores por su función
Define tokens como --text-primary, --surface, --border y --action en lugar de usar nombres de color crudos en tu código. Cuando un tema o una actualización de marca cambia los valores subyacentes, toda la interfaz los sigue y las relaciones de contraste verificadas pueden mantenerse en un solo lugar.
Una lista de comprobación breve
- Roles definidos antes de elegir los colores.
- Escalas de tonos para cada matiz.
- Cada par de texto e interfaz medido frente a AA.
- Colores de marca adaptados para uso en texto donde haga falta.
- El significado nunca transmitido solo con color.
- Modo oscuro probado por separado.
- Colores guardados como tokens con nombre.
Una paleta accesible no es un sacrificio de estilo. Las restricciones suelen llevar a un diseño más claro y seguro, y el resultado sirve a todas las personas que usan tu sitio, incluido tú en una tarde soleada con el brillo de pantalla bajo.