De seis colores a un sistema visual usable

1. Depura la paleta automática

Una herramienta agrupa píxeles y ordena los colores más frecuentes. No sabe cuál representa la idea principal de la imagen. El cielo, una pared o una mesa pueden dominar el recuento mientras un objeto pequeño concentra la identidad visual. Observa la imagen y etiqueta cada muestra: fondo, sujeto, detalle, sombra, luz o aparición accidental.

Combina tonos que resulten demasiado parecidos para cumplir funciones diferentes. Si dos azules solo se distinguen en cuadros grandes, uno será suficiente para la mayoría de la interfaz. Conserva un color pequeño pero significativo cuando represente una acción o elemento central. El objetivo inicial no es usar todo, sino explicar por qué cada tono permanece.

2. Asigna funciones, no posiciones al azar

Construye primero las funciones básicas: fondo principal, superficie secundaria, texto principal, texto secundario, borde y acento. Un mismo color puede servir en más de un lugar si mantiene legibilidad, pero evita que el acento termine cubriendo grandes superficies por costumbre. Cuanto más limitado sea su uso, más fácil será reconocerlo como llamada a la acción.

Haz una página de muestra con título, párrafo, enlace, botón y tarjeta. Coloca los colores en funciones reales antes de decidir. La evaluación sobre rectángulos aislados no revela problemas de lectura, jerarquía o estados interactivos.

3. Trata el contraste como una prueba separada

La cercanía entre dos colores se percibe de manera distinta según tamaño, peso tipográfico, pantalla y visión de la persona. No confíes únicamente en tu impresión. Utiliza un verificador de contraste reconocido para las combinaciones de texto y fondo, y consulta las Pautas de Accesibilidad para el Contenido Web del W3C cuando necesites evaluar conformidad.

Si una combinación falla, no siempre debes eliminar el color. Puedes reservarlo para una superficie decorativa, oscurecerlo para texto o acompañarlo con un borde. Documenta la variante modificada como un color distinto; cambiar valores sin registrarlos crea inconsistencias entre páginas.

• Comprueba texto normal, títulos, enlaces y botones por separado.
• Revisa estados de foco y selección, no solo el estado inicial.
• Prueba sobre fondos claros y oscuros que realmente utilizarás.
• No comuniques error o éxito solamente mediante rojo o verde.
• Observa el diseño con brillo reducido y a tamaño pequeño.

4. Diseña estados antes de publicar

Un botón necesita al menos estado normal, foco, interacción y desactivado cuando corresponda. Un enlace debe seguir pareciendo enlace dentro de un párrafo. Un mensaje de error necesita icono o texto además del color. Estos casos suelen quedar fuera de una paleta inspirada en fotografía porque la imagen no contiene funciones de interfaz.

Crea variantes a partir de la base y prueba cada estado. Si oscureces un acento al pasar el puntero, comprueba también el foco de teclado. Si un control desactivado pierde contraste, asegúrate de que su forma y etiqueta sigan siendo comprensibles. La accesibilidad no consiste en añadir un color “correcto”, sino en mantener información reconocible durante toda la interacción.

5. Escribe una ficha que otra persona pueda seguir

Registra nombre, código, función y combinaciones permitidas. En lugar de “azul #163E35”, escribe “texto principal sobre crema y blanco; cabecera sobre lima; no usar sobre azul grisáceo”. Añade ejemplos de botón, enlace, tarjeta y mensaje. Una ficha pequeña evita que cada nueva página interprete la paleta desde cero.

Vuelve a la imagen de origen al final. El sistema debe conservar una relación reconocible sin copiar todos sus tonos. Puedes obtener una primera selección con la herramienta de paleta, pero la asignación, el contraste y los estados requieren revisión humana.