¿Qué debe hacer cuando recibe una queja sobre el contraste de color en su diseño web? Puede parecer perfectamente correcto para usted porque puede leer el contenido en todo el sitio, pero para otra persona, puede ser una experiencia totalmente diferente. ¿Cómo puedes ponerte en el lugar de esa persona para mejorar su experiencia?
Hay algunas formas relativamente fáciles de probar el contraste. Por ejemplo, puede revisar el sitio en su teléfono o tableta a la luz del sol (no confiable*), o agregar un filtro CSS para imitar una vista en escala de grises). Pero… no tienes que confiar en tus ojos. De todos modos, no todos tienen sus ojos exactos, por lo que su opinión subjetiva puede ser una medida defectuosa.
Usted puede matemáticamente saber si dos colores tienen suficiente contraste entre ellos.
El W3C tiene un documento llamado Pautas de accesibilidad al contenido web (WCAG) 2.1 que cubre las pautas de contraste exitosas. Antes de llegar a las matemáticas, necesitamos saber qué puntajes de relación de contraste pretendemos alcanzar o superar. Para obtener una calificación aprobatoria (AA), la relación de contraste es de 4,5:1 para la mayoría del cuerpo del texto y de 3:1 para el texto más grande.
¿Cómo llegó el W3C a estas proporciones?
Las pautas se crearon para cualquier persona que use un navegador estándar, sin tecnología de asistencia adicional. Las relaciones de contraste que sugieren las WCAG se basaron inicialmente en estándares de contraste anteriores y se ajustaron para adaptarse a tecnologías de visualización más nuevas, como texto suavizado, de modo que el contenido pudiera ser leído por personas con una variedad de dificultades visuales o cognitivas, ya sea debido a la edad, enfermedad , u otras pérdidas de agudeza visual.
Básicamente, nuestro objetivo es hacer que el texto sea legible para alguien con una visión de 20/40, que es equivalente a la visión de una persona de 80 años. La agudeza visual de 20/40 significa que solo puede leer algo a 20 pies de distancia que alguien con una visión perfecta de 20/20 podría leer si estuviera a 40 pies de distancia.
Entonces, supongamos que su diseño requiere texto suavizado porque se ve mucho más suave en una pantalla. En realidad, sacrifica un poco de contraste y daña tu proporción. Las WCAG dan más detalles sobre cómo funciona la puntuación.
Hay otros estándares que tienen en cuenta el contraste, y las WCAG utilizaron algunas de estas consideraciones para desarrollar su puntuación. Uno se llama Ingeniería de factores humanos de estaciones de trabajo informáticas (ANSI/HFES 100-2007) y se publicó en 2007 y se designó como un estándar estadounidense para la ergonomía. Combinó y reemplazó dos estándares anteriores que fueron creados por comités separados. El objetivo del estándar combinado era acomodar al 90% de los usuarios de computadoras y cubrir muchos aspectos del uso y la ergonomía de las computadoras, incluidas las pantallas visuales y el contraste. Entonces, eso significa que tenemos pantallas físicas para considerar en nuestros diseños.
¿Qué significa la proporción?
La relación de contraste explica la diferencia entre el brillo de color más claro y el brillo de color más oscuro en un rango determinado. Es la luminancia relativa de cada color.
Comencemos con un ejemplo atroz de un texto de color verde azulado sobre un fondo gris claro.
<h1>Title of Your Awesome Site</h1>h1 {
background-color: #888888;
color: #1ABC9C;
}¡Ay!
Vale la pena señalar que algunas herramientas, como WordPress, brindan una advertencia útil para esto cuando hay una combinación de texto y fondo mal contrastada. En el caso de WordPress, aparece un aviso en la barra lateral.
“Esta combinación de colores puede ser difícil de leer para las personas. Intente usar un color de fondo más brillante y/o un color de texto más oscuro”.
“Está bien”, dices. “Tal vez pienses que la combinación de colores verde azulado y gris no es exactamente buena, pero aún puedo entender lo que dice el contenido”.
La relación de contraste para esa fina pieza de hipertexto es 1.47:1.
Quería una mejor comprensión de lo que realmente estaban comprobando las puntuaciones de contraste y descubrí que requiere el uso de las matemáticas… con un lado de la comprensión de las diferencias entre la visión humana y la de la computadora. Este viaje me enseñó sobre la historia de la visión por computadora y un poco sobre biología, y me dio una pequeña revisión de algunos conceptos matemáticos que no había tocado desde la universidad.
Aquí está la ecuación:
(L1 + 0.05) / (L2 + 0.05)L1es la luminancia relativa del más claro de los colores.L2es la luminancia relativa del más oscuro de los colores.
Esto parece sencillo, ¿verdad? Pero primero necesitamos determinar la luminancia relativa de cada color para obtener esas variables.
OK, de vuelta a la luminancia relativa
Lo mencionamos de pasada, pero vale la pena profundizar en luminancia relativa, o el brillo relativo de cualquier color expresado en un espectro entre 0 (negro) y 1 (blanco).
Para determinar la luminancia relativa de cada color, primero debemos obtener la notación RGB de un color. A veces estamos trabajando con valores de color HEX y necesitamos convertirlos a RGB. Hay calculadoras en línea que harán esto por nosotros, pero hay matemáticas sólidas en el fondo que lo hacen posible. Nuestro color hexagonal verde azulado, #1ABC9Cse convierte en un RGB de 26, 188, 156.
Luego, tomamos cada valor del color RGB y dividimos cada uno por 255 (el número entero máximo de valores RGB) para obtener un valor lineal entre 0 y 1.
Así que ahora con nuestro color verde azulado se ve así:
| Componente | Ecuación | Valor |
|---|---|---|
| rojo | 26/255 | 0.10196078 |
| Verde | 188/255 | 0.73725490 |
| Azul | 156/255 | 0.61176471 |
Luego aplicamos la corrección gamma, que define la relación entre el valor numérico de un píxel y su luminancia real, a cada componente del color RGB. Si el valor lineal de un componente es menor que .03938, lo dividimos por 12.92. De lo contrario, sumamos .055 y dividimos el total por 1.055 y elevamos el resultado a la potencia de 2.4.
Nuestros componentes de color con corrección gamma de nuestro color verde azulado terminan así:
| Componente | Ecuación | Valor |
|---|---|---|
| rojo | ((0.10196078 +.055)/1.055) ^ 2.4 |
0.01032982 |
| Verde | ((0.73725490 +.055)/1.055) ^ 2.4 |
0.50288646 |
| Azul | ((0.61176471 +.055)/1.055) ^ 2.4 |
0.33245154 |
Esta parte de nuestra ecuación proviene de la fórmula para determinar la luminancia relativa.
Simplemente superamos la corrección gamma allí sin hablar mucho al respecto y lo que hace. En resumen, traduce lo que una computadora “ve” en la percepción humana del brillo. Las computadoras registran la luz directamente donde el doble de fotones es igual al doble de brillo. Los ojos humanos perciben más niveles de luz en condiciones de poca luz y menos en condiciones de mucha luz. Los dispositivos digitales que nos rodean realizan cálculos de codificación y decodificación gamma todo el tiempo. Se utiliza para mostrarnos cosas en las pantallas que coinciden con nuestra percepción de cómo aparecen las cosas ante nuestros ojos.
Finalmente, multiplicamos los diferentes colores por números que indican qué tan brillante parece ese color al ojo humano. Eso significa que determinamos la luminancia de cada color multiplicando el valor del componente rojo por .2126, el valor del componente verde por .7152 y el componente azul por .0722 antes de sumar los tres resultados. Notarás que el verde obtiene el valor más alto aquí,
Entonces, una última vez para el verde azulado:
| Componente | Ecuación | Valor |
|---|---|---|
| rojo | 0.01032982 × 0.2126 | 0.00219611973 |
| Verde | 0.50288646 × 0.7152 | 0.35966439619 |
| Azul | 0.33245154 × 0.0722 | 0.02400300118 |
…¡y agréguelos para obtener luminancia!
L1 = 0.00219611973 + 0.35966439619 + 0.02400300118 = 0.38586352Si hacemos lo mismo para conseguir nuestro L2 valor, que nos da 0.24620133.
Finalmente tenemos el L1 y L2 valores que necesitamos para calcular el contraste. Para determinar qué valor es L1 y cual es L2 debemos asegurarnos de que el número más grande (que muestra el color más claro) sea siempre L1 y se divide por el color más pequeño/más oscuro como L2.
Ahora compare ese resultado con los criterios de éxito de las WCAG. Para tamaño de texto estándar, entre 18-22 puntos, un resultado mínimo de 4,5 aprobará con una calificación de AA. Si nuestro texto es más grande, entonces una puntuación ligeramente más baja de 3 hará el trabajo. Pero para obtener la calificación más alta de WCAG (AAA), debemos tener un resultado de relación de contraste de al menos 7. Nuestra hermosa combinación falla todas las pruebas, quedando muy por debajo de 4.5 para texto normal o 3 para texto de estilo de título. ¡Es hora de elegir algunos mejores colores!
¡Estoy muy contento de que tengamos computadoras y herramientas en línea para hacer este trabajo por nosotros! Tratar de resolver los detalles paso a paso en el papel me provocó un par de semanas de frustración. Muchas veces me equivoqué al comparar los resultados con los de los verificadores de contraste automatizados.
¿Recuerdas que los maestros en la escuela siempre querían que mostraras tu trabajo de matemáticas para demostrar cómo llegaste a la respuesta? Hice algo para ayudarnos.
Si ve esta demostración con la consola abierta, verá las matemáticas que se incluyen en cada paso de los cálculos. Adelante, pruebe nuestros dos colores de ejemplo, como #1ABC9C y #888888.
Solo quiero que mi página tenga el contraste adecuado, ¿qué debo hacer?
Hay una variedad de recursos de accesibilidad que puede auditar su sitio. Aquí hay una lista que preparé, y hay otra lista aquí en CSS-Tricks.
Pero aquí hay algunos consejos para empezar.
Primero, identifique las áreas que no satisfacen sus necesidades de accesibilidad.
La herramienta de accesibilidad WAVE es un buen lugar para comenzar. Ejecute su sitio a través de eso y le dará resultados de contraste y ayudará a identificar áreas problemáticas.
¡Hurra, puntajes de aprobación!
Seguir las sugerencias de la auditoría
Use las mejores prácticas para mejorar sus puntajes y eliminar los errores. Una vez que identifique los errores de contraste, puede probar algunas opciones diferentes allí mismo en la herramienta WAVE. Haga clic en el cuadro de color para abrir un selector de color. Luego juegue hasta que los errores desaparezcan y sabrá qué puede reemplazar en su código.
Vuelva a ejecutar la prueba
De esta manera, puede asegurarse de que sus cambios mejoraron las cosas. ¡Felicidades! ¡Acaba de mejorar su producto para todos los usuarios, no solo para los afectados por los errores de accesibilidad!
¡Lo que viene después depende de ti!
Puede hacerlo más fácil para usted y comenzar todos los productos nuevos con el objetivo de hacerlos accesibles. Haga que las pautas de accesibilidad formen parte de su requisitos tanto en tecnología como en diseño. Se ahorrará potencialmente cientos de horas de remediación y posibles quejas legales. Los sitios web educativos y del gobierno de EE. UU. deben cumplir, pero otras industrias a menudo son criticadas por no hacer que sus sitios estén igualmente disponibles para todas las personas.
Si tiene la opción, considere usar marcos y bibliotecas web establecidos y probados (como Bootstrap o Material Design de Google) que ya han descubierto colores de tema de contraste óptimos. En muchos casos, puede tomar solo lo que necesita (como solo el CSS) o al menos revisar sus paletas de colores para informar las opciones. Sin embargo, aún debe verificar el contraste porque, si bien la mayoría de las opciones de texto estándar en un marco pueden seguir las sugerencias de WCAG de relación de contraste, es posible que cosas como alertas y estilos de mensajes no lo hagan. (¡Te estoy mirando, Bootstrap!)
Derek Kay ha revisado una lista de marcos web con un enfoque en la accesibilidad, que le sugiero que lea si está buscando más opciones. El Sistema de diseño web de EE. UU. muestra una forma de resolver acertijos de color/contraste utilizando su sistema de fichas CSS que etiqueta los colores para hacer que las diferencias de contraste sean muy claras), pero también enlaza con varios recursos muy buenos para mejorar y comprender el contraste.
Aquí nos sumergimos más profundamente de lo que quizás realmente necesite saber, pero comprender qué es una relación de contraste y qué significa realmente debería ayudarlo a recordar tener en cuenta el contraste al diseñar futuros sitios, aplicaciones web y otro software.
Tener una comprensión más clara de lo que significa la relación de contraste me ayuda a recordar a quién puede afectar un contraste deficiente y cómo mejorar los productos web y móviles en general.
No soy la mejor experta en contraste, solo una chica muy, muy curiosa que a veces tiene problemas para leer cosas en la web con bajo contraste.
Si tiene ideas adicionales, correcciones o investigaciones adicionales para compartir, ¡deje un comentario y modificaré este artículo! Cuanto más comprendamos las necesidades y los requisitos de nuestros sitios, mejor podremos planificar las mejoras y, en última instancia, satisfacer las necesidades de nuestro público.
Lecturas adicionales y referencias:
- Cómo la Web se volvió ilegible – Kevin Marks
- Entender la corrección gamma – Cambridge in Color
- Obtenga más información sobre la corrección gamma – Science Direct
- Luminancia relativa – Wikipedia
- 1. Longitud de onda de máxima sensibilidad visual humana Susan Zhao 2007