Miniaturas y daltonismo

De quién hablamos, y por qué la miniatura es el caso difícil

El daltonismo rojo-verde es el común: se suele citar en torno al 8% de los hombres y al 0,5% de las mujeres de origen noreuropeo, en dos formas — deuteranopía, la de los verdes, y protanopía, la de los rojos. Son las dos que simulé. Todo lo demás es lo bastante raro como para ser una nota, y la tiene, al final.

Una miniatura es el caso difícil porque no hay nada más a lo que agarrarse. Un gráfico con leyenda de colores tiene etiquetas; una web tiene texto. Una miniatura tiene una sola imagen de 336 píxeles de ancho, junto a un título que describe el vídeo y no la imagen, y si dos de sus áreas dejan de ser distinguibles el diseño simplemente ha perdido un límite, sin nada que lo sustituya.

Qué cambia y qué no

Es la parte que merece medirse primero, porque decide todo lo demás. Pasé la simulación estándar para dicrómatas por las 660 miniaturas de los paquetes de esta herramienta y comparé cada imagen consigo misma.

El brillo general de una imagen apenas se mueve: el cambio mediano de la luminancia relativa media es del 0,59% con deuteranopía y del 1,11% con protanopía. Lo que colapsa es la diferencia entre tonos. El rojo puro, rgb(255,0,0), sale como rgb(147,147,0), un amarillo apagado. Un verde fuerte, rgb(0,200,0), sale como rgb(171,171,30). Esos dos son el mismo color, y solo difieren en brillo. El blanco sigue siendo exactamente blanco.

Así que la forma útil de pensarlo no es que los colores empeoren. Es que el eje del tono se borra y el eje del brillo queda intacto. Cualquier separación construida con el tono desaparece; cualquiera construida con el brillo queda igual.

Los colores saturados sueltos sí pueden moverse en brillo — ese mismo rojo puro sube de 0,213 a 0,271 de luminancia relativa con deuteranopía y baja a 0,104 con protanopía. Es la imagen en conjunto la que se queda quieta, porque la mayor parte de una fotografía no está completamente saturada.

Cómo lo medí

La simulación es la aproximación lineal de Viénot, Brettel y Mollon (1999): convertir sRGB a lineal, luego a respuesta de conos LMS, colapsar el cono que falta sobre el plano que el dicrómata ve, y volver. Es el método estándar detrás de casi todos los simuladores de daltonismo, y su debilidad conocida es la tritanopía, y por eso esta guía no afirma nada sobre ella.

Para cada miniatura tomé las dos familias de tonos dominantes — los dos sectores de 30° entre doce con mayor proporción ponderada por saturación, ambos por encima del 10% — y medí dos cosas de esa pareja. La razón de contraste WCAG entre sus colores medios, que es una medida de puro brillo, y la distancia entre esos dos colores en sRGB antes y después de la simulación.

586 de las 660 miniaturas tienen dos tonos dominantes que pasan el umbral del 10%. Son las que describen los números de abajo.

Cuánto brillo separa dos colores en una miniatura real

La distribución es el hallazgo. Es la razón de contraste entre los dos colores dominantes de la misma miniatura, sobre las 586 que tienen una pareja medible.

La mediana es 1,57:1. Como referencia, las WCAG piden 4,5:1 para texto de lectura y 3:1 para objetos gráficos — umbrales escritos para interfaces y no para fotografías, así que aquí son una vara de medir y no una regla. Solo el 2% de estas miniaturas alcanza el primero y el 9% el segundo.

Lo que significa que cuatro de cada diez se apoyan solo en el tono

267 de las 586 parejas — el 46% de ellas, el 40% de todas las miniaturas medidas — separan sus dos colores principales con menos de 1,5:1 de contraste de brillo. Lo que mantiene separadas esas dos áreas, en su mayor parte no es el brillo, así que en su mayor parte es el tono, así que es la parte que a un dicrómata rojo-verde no le llega.

La simulación lo confirma directamente: en todas las parejas la distancia entre los dos colores cae una mediana del 9%, y dentro de ese grupo de bajo brillo cae el 19%. Las parejas que partían con menos contraste de brillo son exactamente las que pierden más de lo que tenían.

Y es la misma decisión de diseño que falla por otro motivo al tamaño de entrega. Un límite hecho de tono y no de brillo es también el límite que se disuelve cuando el archivo se recodifica a 336 píxeles de ancho, como se midió en la guía sobre miniaturas borrosas. Dos modos de fallo distintos, una causa, un arreglo.

La advertencia de rojo sobre verde apunta al problema equivocado

El consejo estándar de accesibilidad para el daltonismo es no poner rojo al lado de verde. Medida contra miniaturas reales, esa combinación es rara: 13 de 660, el 2%, tienen una familia roja y una verde como sus dos tonos dominantes.

Cuando ocurre es grave — esas parejas pierden una mediana del 35% de la distancia entre ellas, la peor de todos los grupos de aquí, y 10 de las 13 tienen además menos de 2:1 de contraste de brillo. Así que el consejo no está mal. Solo es estrecho: describe el 2% de las miniaturas, mientras la versión general del mismo problema — dos tonos cualesquiera separados por casi nada de brillo — describe el 40%.

Y varía mucho por nicho

Ordenados por la proporción de parejas medibles que se apoyan solo en el tono. El patrón sigue el aspecto que tienen los nichos de partida, medido en la guía sobre destacar: las filas claras y saturadas tienen más separación de solo tono, porque queda menos rango de brillo con el que separar algo.

Moda y Belleza y Política están en el 65% y el 62%; Finanzas y Salud y Fitness en el 25% y el 30%. Si tu nicho está en la mitad alta de esta tabla, lo probable es que la miniatura cuyo aspecto estás a punto de copiar sea una de las que se aplanan.

El arreglo es uno para el que ya tienes un número

Separa primero por brillo y trata el tono como un extra. Es la misma conclusión a la que llega la guía del color desde el otro lado — la interfaz es o blanca o casi negra — y es todo el remedio también aquí, porque el brillo es el eje que la simulación deja en paz.

La prueba barata es la escala de grises. Desatura por completo tu diseño y mira si las partes siguen leyéndose como partes separadas: sujeto contra fondo, texto contra lo que tenga detrás, una mitad de un encuadre partido contra la otra. Si sobrevive a eso, sobrevive a la dicromacia, porque la escala de grises es la prueba más estricta: quita toda la información de tono, mientras un dicrómata conserva un eje de ella.

Lo que también significa que lo contrario no es prueba. Algo que falla en escala de grises puede seguir siendo parcialmente visible para un espectador real con deuteranopía. Pasar la prueba en grises es suficiente; no pasarla es un aviso, no un veredicto. El umbral no es nuestro: es la relación de contraste que define el criterio de contraste mínimo de las WCAG, el estándar al que se somete el resto de la web.

El texto es el caso con menos margen

El texto sobre un fondo de color es donde esto se decide más rápido, porque el texto es fino: un titular separado de su fondo solo por el tono es ilegible para un dicrómata y simplemente difícil para todos los demás. Solo el 2% de las parejas medidas alcanza el 4,5:1 que se espera del texto de una interfaz.

La respuesta práctica no es una razón de contraste sino un trazo: un contorno o una sombra dura en un color cuyo brillo esté lejos tanto del texto como del fondo, que es lo que la guía sobre el tamaño del texto mide para la reducción. El mismo contorno que mantiene legible un titular a 336 píxeles lo mantiene legible sin el tono.

Lo que esta guía no cubre

La tritanopía, la forma azul-amarillo, no se simula aquí. La aproximación de Viénot es conocidamente poco fiable para ella, y es lo bastante rara — muy por debajo del 0,1% — como para que adivinar no aportara nada.

El daltonismo total, la monocromacia, es aún más raro, y la prueba en escala de grises de arriba es exactamente ese caso: si tu diseño sobrevive a la desaturación sobrevive también a la monocromacia.

Y toda esta guía habla del tono. La otra cuestión de accesibilidad de una miniatura es el tamaño, que no es en absoluto una cuestión de discapacidad: todo el mundo recibe tu diseño a 336 píxeles de ancho, y los suelos para eso están en las guías sobre el tamaño del texto y sobre las caras.

La comprobación, en un minuto

Dos pasadas sobre la misma imagen. Desatúrala y mira si las partes siguen separándose. Después devuelve la versión en color a un feed real, porque una miniatura que se separa por dentro puede seguir perdiendo su borde contra la interfaz, que es otra medición en otra guía.

Esa segunda pasada es para lo que sirve la herramienta de vista previa: tu miniatura entre competidores reales a los tamaños renderizados reales. La primera es un deslizador en el programa donde la diseñaste, y es la comprobación de accesibilidad más barata que hay en este oficio.

Las preguntas que hace todo el mundo