Color que todos puedan leer

Alrededor de una de cada doce personas con biología masculina y una de cada doscientas con biología femenina ve el color de otra manera, y todo el mundo lo ve mal bajo el sol. El color accesible consiste sobre todo en no depender solo del matiz.

  • #1f2937

  • #ffffff

  • #5576ff

  • #facc15

  • #b91c1c

Contraste, medido

La relación de contraste compara el brillo de dos colores, de 1:1 (invisible) a 21:1 (negro sobre blanco). Las WCAG piden 4.5:1 para el texto normal, 3:1 para el texto grande y 3:1 para elementos de interfaz como bordes e iconos. No son opiniones: se pueden medir, y casi todas las discusiones del tipo "nuestro color de marca está bien" terminan cuando el número aparece en pantalla.

Nunca solo el matiz

Si la única diferencia entre dos estados es rojo contra verde, parte de tus usuarios ve un solo estado. Agrega una segunda señal: un icono, una etiqueta, una trama, una posición. Lo mismo vale para los gráficos, donde dos series vecinas deberían diferir en luminosidad además de en matiz, y para la validación de formularios, donde el mensaje importa más que el color del borde.

Los dos hábitos

Primero, elige los colores de texto midiendo y no a ojo; toma segundos y elimina la discusión. Segundo, mira tu diseño en escala de grises antes de publicarlo. Si todavía funciona —si distingues el botón del fondo y una línea del gráfico de otra— va a funcionar con daltonismo, en una pantalla barata y bajo el sol directo.

Lo que hay que recordar

Mide el contraste y asegúrate de que nada importante dependa solo del matiz.

Prueba una combinación en el verificador de contraste

Más de la biblioteca