El contraste de color y quién puede leerlo
El contraste de color es la diferencia medible entre dos colores que comparten un borde, y en el sentido que decide la legibilidad es una relación entre la luminancia de ambos que va de 1:1, cuando son el mismo color, a 21:1, que es lo que dan el negro puro y el blanco puro. Quién puede leer una pieza se resuelve en esa cifra y no en el matiz.
Término
El contraste de color
Categoría
Relación medible entre dos colores contiguos
No confundir con
El contraste de matiz, que no garantiza legibilidad
Dónde se decide
Al asignar roles a la paleta, no al revisar la pieza
Qué es el contraste de color
El contraste de color se mide entre dos colores y nunca se predica de uno solo: un color no tiene contraste, lo tiene contra otro. La relación se calcula a partir de la luminancia relativa de cada uno: dos matices opuestos en el círculo pueden dar una relación bajísima si comparten claridad, y dos tonos del mismo matiz una altísima si están separados en valor.
Lo que lo distingue de los demás atributos del color es que tiene unidad y umbral. El matiz se lee en grados sobre un círculo de doce sectores y no hay un ángulo correcto. El contraste se compara contra cifras publicadas y una pieza pasa o no pasa: es el único capítulo del color que se cierra con un número.
De qué teoría sale el contraste de color y desde cuándo
El contraste de color sale de un descubrimiento de 1839 y se vuelve medible siglo y medio después. Michel Eugène Chevreul publica ese año De la loi du contraste simultané des couleurs y establece el contraste simultáneo: un color cambia según su vecino. Josef Albers lo convierte en método de enseñanza en Interaction of Color, de 1963, y Johannes Itten reúne siete contrastes en Kunst der Farbe, de 1961.
La medición llega por otra vía. La Commission Internationale de l'Éclairage define en 1931 el espacio XYZ y el diagrama de cromaticidad, base de casi toda la colorimetría posterior, y sobre esa base el W3C publica las Web Content Accessibility Guidelines: la 2.0 en 2008, la 2.1 en 2018 y la 2.2 en 2023. Ahí el contraste deja de ser un juicio y pasa a tener un mínimo exigible.
Cómo se usa el contraste de color al decidir una pieza
Al decidir una pieza, el contraste de color se comprueba al asignar roles a la paleta, no al final. Cada color se anota junto al fondo donde va a caer y junto a su relación con él, y los que no alcanzan la cifra de su rol se corrigen ahí, cuando cuesta un número y no una maqueta.
La comprobación tiene dos partes y la segunda se olvida. La primera es el texto contra su fondo. La segunda son los componentes y gráficos indispensables, que WCAG 2.1 exige también a 3:1: el borde de un campo, el indicador de foco, la línea de una gráfica y el icono que informa. Un párrafo impecable en una caja cuyo borde no se ve deja al lector sin la mitad de la información.
Qué error se comete con el contraste de color más a menudo
El error que se comete con el contraste de color más a menudo es confiar el mensaje al matiz. Cuando el rojo indica error y el verde que todo está bien, la información viaja en un solo canal, y la deficiencia de visión del color más común es precisamente la del rojo y el verde: afecta a alrededor del 8 % de los hombres y al 0.5 % de las mujeres de ascendencia europea, con cifras que varían por población. El color nunca puede ser el único portador de una información: siempre hace falta una segunda señal, sea texto, forma, posición o icono.
El segundo error es medir a ojo. Un matiz saturado parece contrastado y con frecuencia no lo está: el amarillo #FFFF00 da 1.07:1 contra blanco, y el rojo #FF0000 da 4.00:1, por debajo del 4.5:1 del nivel AA.
Qué valores y qué nombres hay que saber del contraste de color
Los valores del contraste de color que hay que saber son cuatro cifras y una definición de tamaño. Texto grande significa 18 pt, es decir 24 px, en peso normal, o 14 pt, es decir 18.66 px, en negrita; por debajo rige el umbral de texto normal.
| Nivel | Texto normal | Texto grande | Componentes y gráficos |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | 3:1 en WCAG 2.1 |
| AAA | 7:1 | 4.5:1 | No se especifica |
Puestas al lado de colores reales, calculados con la fórmula de luminancia relativa de WCAG, se ve dónde cae cada uno.
- Negro #000000 sobre blanco: 21:1, el máximo posible.
- Gris #595959 sobre blanco: 7.00:1, exactamente el umbral AAA.
- Gris #767676 sobre blanco: 4.54:1, el gris más claro que cumple AA.
- Gris #949494 sobre blanco: 3.03:1, sirve para texto grande y no para normal.
- Rojo #FF0000 sobre blanco: 4.00:1, no cumple AA para texto normal.
- Amarillo #FFFF00 sobre negro: 19.56:1, y sobre blanco 1.07:1.
El contraste del color en sí mismo y el contraste en un dibujo
El contraste del color en sí mismo es el nombre que la enseñanza en español da a la confrontación de matices a plena saturación, sin claros ni oscuros: rojo contra amarillo contra azul. Es el efecto más ruidoso disponible y el que peor sobrevive a la medición, porque tres matices saturados pueden compartir claridad y dejar la pieza sin separación.
En un dibujo sin texto la exigencia cambia de forma y no de fondo: hay que garantizar la separación entre figura y fondo, el problema que Edgar Rubin ilustra en 1915 con su figura ambigua y que la Gestalt, iniciada por Max Wertheimer en 1912, formula como principio de agrupación en 1923.