Problema resuelto al detalle
-
Relación de contraste entre texto #e2e6f0 y un fondo #1a1d27 5 pasos
Calcula la relación de contraste entre el texto #e2e6f0 y el fondo #1a1d27 —los propios colores de esta página. Promediar los canales da 5,55. La WCAG da 13,46. Averigüe de dónde procede ese factor de dos y medio.
-
La definición parece inofensiva: una razón entre dos luminancias, cada una ajustada en 0,05 para que el negro puro no provoque una división por cero. Los pesos no son iguales, y esa es la primera sorpresa: al verde se le atribuye diez veces más luminancia que al azul.
-
La segunda sorpresa es que los valores de los canales no se pueden utilizar tal cual. Un byte en un archivo de imagen está codificado mediante gamma: 128 no significa la mitad de la luz, sino aproximadamente una quinta parte. La expresión definida a trozos deshace esa codificación, y es el paso que omiten todos los que implementan su propia comprobación de contraste.
-
Pase ambos colores por ella. El claro queda en 0,79 y el oscuro en 0,0124: una diferencia por un factor de 63 en luz física, a partir de bytes que solo difieren por un factor aproximado de 7.
-
Los desplazamientos de 0,05 comprimen después ese 63 hasta 13,46, que es la cifra que muestra el panel. Ese desplazamiento no es estético: modela la luz que refleja la pantalla incluso cuando muestra negro, razón por la cual un tema oscuro no puede alcanzar un contraste ilimitado en una habitación iluminada.
-
Los pesos explican la queja más habitual de los diseñadores. El verde puro y el azul puro consisten ambos en un único canal al máximo de intensidad, pero el verde aporta 0,7152 de la luminancia y el azul solo 0,0722.
Respuesta
La herramienta muestra 13,46 : 1, superando con holgura el 4,5 del nivel AA y el 7 del AAA. La razón para calcularlo a mano es el paso de la gamma: si se omite y se promedian los canales en su lugar, este par obtiene 5,55 —sigue siendo un aprobado, pero equivocado por un factor de 2,4, y en un par más cercano ese error marca la diferencia entre aprobar y suspender. Los pesos son la otra mitad. El verde es 9,9 veces más brillante que el azul para el mismo valor de canal, por lo que el texto azul sobre negro resulta mucho peor de lo que parece en un selector de color, y el amarillo sobre blanco mucho mejor de lo que esperan los diseñadores. Pruebe #0000ff frente a #000000 y lea la relación.
-
Referencias (2)
- The contrast formula and the 0.03928 threshold block 3 is about: W3C, Web Content Accessibility Guidelines (WCAG) 2.1, "relative luminance" and "contrast ratio" definitions.
- The sRGB transfer function it should have matched: IEC 61966-2-1:1999, Multimedia systems and equipment — Colour measurement and management — Part 2-1: Default RGB colour space — sRGB, which puts the linear/gamma switch at 0.04045.