Cuadrícula de contraste de paleta

Por qué revisar una paleta entera

Los colores de marca suelen elegirse uno al lado del otro en un tablero, como muestras. Rara vez se eligen como pares, con uno escrito encima del otro. Eso pasa factura más tarde, cuando un desarrollador necesita un color de enlace sobre el fondo claro, un pie de foto sobre el panel de acento y una etiqueta sobre el botón principal, y elige de la paleta a ojo.

El número de pares crece rápido. Con n colores hay n × (n − 1) maneras de poner uno sobre otro, es decir, 12 para cuatro colores, 30 para seis y 132 para doce. Repasarlos uno por uno es tan lento que nadie lo hace. Una cuadrícula lo hace al instante, y además te enseña cómo está construida la paleta: qué colores sirven de “tinta”, cuáles de “papel” y cuáles solo valen como decoración.

Cómo leer la cuadrícula

Cada fila es un color de texto y cada columna un fondo. Una celda muestra una muestra “Aa” en esos dos colores, el ratio de contraste WCAG recortado a dos decimales y una de cuatro etiquetas:

El ratio es el mismo sea cual sea el color que va encima, así que la tabla se refleja en la diagonal. Conservamos las dos mitades porque las muestras no se ven igual. Oscuro sobre claro y claro sobre oscuro se perciben distinto incluso con idéntico número. El menú Keep atenúa todos los pares por debajo del umbral que elijas. Selecciona una celda para abrir una vista previa más grande con un título, un párrafo, texto pequeño y un botón. También hay un enlace que envía el par a la calculadora de ratio de contraste, que puede sugerir un tono cercano que sí cumpla.

Las tres listas bajo la cuadrícula

Texto de tamaño normal

Hasta ocho pares con 4,5:1 o más, de mayor a menor. Cada par aparece una vez, con el color más claro como fondo, que es el caso habitual.

Solo texto grande y títulos

Hasta seis pares entre 3:1 y 4,5:1. Tientan porque se ven bien en una maqueta a 40 px. Ponlos en un párrafo y fallan.

Conjuntos de botón

Un botón implica tres colores y dos pruebas. Su etiqueta debe llegar a 4,5:1 contra el botón, y el botón mismo debe llegar a 3:1 contra la página, o la gente ni verá que hay un botón. Para cada posible color de botón, la lista da la etiqueta con más contraste y el fondo de página más claro que cumple ambas condiciones.

Si la primera lista sale vacía, la paleta no tiene un par de tinta y papel. Añade un casi negro como #1a1a1a o un casi blanco y la cuadrícula se llena.

Arreglar una paleta que se queda corta

La mayoría de las paletas se quedan cortas de la misma manera, con varios colores de tono medio y luminosidad parecida. El verde azulado, el coral, la mostaza y el violeta no se parecen en nada, y sin embargo ninguno puede llevar texto sobre otro. Tres añadidos arreglan casi todos los casos:

1. Un neutro oscuro para el texto del cuerpo. Una versión profunda del tono principal de la marca sirve tan bien como el negro y sigue pareciendo de la marca.
2. Un neutro claro para los fondos de página y de tarjetas, como un blanco roto teñido con el tono de la marca.
3. Un paso más oscuro del color de acento para enlaces y botones. Baja la luminosidad hasta que el texto blanco sobre él llegue a 4,5:1, y conserva el acento original para formas grandes e ilustraciones.

Después escribe el resultado en tu guía de estilo como reglas sobre pares, por ejemplo “acento solo sobre blanco, nunca bajo el texto del cuerpo”. La gente comete menos errores con una lista de pares permitidos que con una lista de colores.

Entrada, compartir y límites

Separa los colores con comas o saltos de línea. Valen hex con o sin #, rgb(), hsl() y nombres de color CSS. Los duplicados se unen y lo que venga después del color número doce se ignora. La barra de direcciones siempre contiene la paleta actual como ?c=1d3557,f1faee,…, así que el enlace que copies vuelve a abrir la misma cuadrícula. Todo se calcula en tu navegador.