Elegir los colores de una marca sin que el texto deje de leerse

Eliges un morado precioso para tu marca. Lo pones de fondo en el botón principal, le metes texto blanco encima y queda elegante en tu pantalla. Tres meses después alguien te escribe desde el móvil, a pleno sol, para decirte que no ve dónde hay que pulsar.

El número que evita ese correo

Se llama ratio de contraste y compara la luminosidad del texto con la del fondo. Va de 1:1 —el mismo color, invisible— a 21:1, que es negro puro sobre blanco puro.

Las pautas internacionales de accesibilidad fijan tres umbrales que conviene memorizar:

• 4,5:1 para texto normal. Es el mínimo del nivel AA, el que se exige en la práctica.
• 3:1 para texto grande, a partir de unos 24 px, o de 19 px en negrita.
• 7:1 para el nivel AAA, el exigente.

No es una manía de diseñadores. En España, el Real Decreto 1112/2018 obliga a cumplir esas pautas a las webs del sector público y a quienes trabajan para él, y la Ley de Accesibilidad ha ido ampliando el círculo a servicios privados. Pero incluso dejando la norma de lado: por debajo de 4,5 el texto se lee mal con luz de día, en una pantalla vieja o con la vista cansada, que es casi todo el mundo a las siete de la tarde.

Por qué no se puede juzgar a ojo

Porque lo miras en tu pantalla, bien calibrada, en una habitación con luz controlada, y sabiendo lo que pone. Las tres cosas te engañan.

Además, la percepción del brillo no es lineal ni igual para todos los colores. El ojo humano es mucho más sensible al verde que al azul, así que un verde y un azul que «parecen igual de oscuros» tienen luminancias muy distintas. Por eso la fórmula del contraste pondera los tres canales con pesos diferentes, y por eso un amarillo brillante da mal contraste con blanco aunque parezca un color fuerte.

El caso que más sorprende: el amarillo y el naranja casi nunca funcionan con texto blanco. Son colores muy luminosos, así que su contraste con el blanco es bajísimo. Con texto negro, en cambio, van perfectos. Es exactamente al revés de lo que hace mucha gente.

Los cinco formatos, y cuál usar cuándo

Un color es siempre el mismo color, pero cada herramienta te lo pide de una forma distinta, y traducir a mano es donde se cometen los errores.

HEX (#6D28D9) es el del CSS y el que se pasa por mensaje. Tres parejas en hexadecimal: rojo, verde y azul.

RGB es lo mismo en decimal. Se lee mejor y se escribe más largo.

HSL cambia el punto de vista: matiz, saturación y luminosidad. Es el útil cuando hay que tocar un color y no solo copiarlo: aclarar un HEX a ojo es probar y fallar, y en HSL es subir un número.

CMYK es tinta sobre papel, para imprenta. Y aquí una advertencia honesta: la conversión exacta depende del perfil, del papel y de la máquina. Cualquier número que te dé una web es una aproximación; el bueno te lo da quien imprime.

HSB merece párrafo aparte, porque es la trampa.

HSL y HSB no son lo mismo

Los dos empiezan por «matiz, saturación» y terminan en un porcentaje, así que se copian valores de uno en otro sin mirar. Y dan colores distintos.

La diferencia está en la última letra. En HSL, la luminosidad al 100 % es blanco y el color puro está en el 50 %. En HSB, el brillo al 100 % es el color puro y por ahí no se llega al blanco.

Figma, Photoshop e Illustrator hablan HSB. El CSS habla HSL. Si pasas un «70 %, 50 %» de uno al otro te sale un color parecido pero distinto, y el parecido es lo peligroso: nadie revisa lo que parece correcto.

Una marca no necesita un color: necesita diez

Es lo que descubre todo el mundo al montar la segunda pantalla. Hace falta el color para el botón, una versión muy clara para el fondo de un aviso, una intermedia para los bordes, y una oscura para el texto sobre el fondo claro.

La forma de conseguir que parezcan de la misma familia es sacarlas del mismo matiz y la misma saturación, moviendo solo la luminosidad. Si cada tono se elige a ojo por separado, la paleta acaba pareciendo de tres marcas distintas.

Nuestro conversor de color hace las tres cosas a la vez: traduce entre los cinco formatos, enseña el contraste con texto blanco y negro con su veredicto AA o AAA, y saca la escala de diez tonos, cada uno cargable con un clic para copiar sus valores.

Un orden que funciona

Elige primero el color que quieres para la marca, sin pensar en pantallas. Luego comprueba su contraste: si no llega a 4,5 con blanco ni con negro, no está mal, está mal para texto, y sirve igual como fondo de una ilustración, como borde o como detalle. Para el botón, coge de la escala el tono que sí llegue.

Después saca los diez tonos y guárdalos. Y por último, mira el resultado en un móvil de verdad, con la pantalla al 50 % de brillo. Es la prueba que más cosas descubre y la que menos gente hace.

Todo el cálculo ocurre en tu navegador mientras escribes. La paleta de una marca que todavía no se ha presentado es información sensible más veces de lo que parece, y no tiene por qué pasar por el servidor de nadie.