Compresión de las pautas y proporciones de contraste de color de accesibilidad web

¿Qué debes hacer cuando recibes una queja sobre el contraste de color en tu diseño web? Puede que a usted le parezca perfectamente bien porque puede leer el contenido de todo el sitio, pero para otra persona podría ser una experiencia totalmente diferente. ¿Cómo puedes ponerte en el lugar de esa persona para mejorar su experiencia?

Hay algunas formas relativamente sencillas de probar el contraste. Por ejemplo, puede consultar el sitio en su teléfono o tableta a plena 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 todo el mundo tiene tus mismos ojos, por lo que tu opinión subjetiva puede ser una medida errónea.

Puedes saber matemáticamente 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 pautas de contraste exitosas. Antes de pasar a las matemáticas, necesitamos saber qué calificación de relación de contraste pretendemos alcanzar o superar. Para obtener una calificación aprobatoria (AA), la relación de contraste es 4,5:1 para la mayor parte del cuerpo del texto y 3:1 para el texto más grande.

¿Cómo llegó el W3C a estas proporciones?

Las pautas se crearon para cualquier persona que utilice un navegador estándar, sin tecnología de asistencia adicional. Las relaciones de contraste que sugiere la 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 antialias, de modo que el contenido fuera legible para personas con una variedad de dificultades visuales o cognitivas. ya sea debido a la edad oa una 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 20/40, que es equivalente a la visión de alguien de 80 años. Una agudeza visual de 20/40 significa que sólo puedes 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, digamos que su diseño requiere texto suavizado porque se ve mucho más fluido en una pantalla. En realidad, sacrifica un poco de contraste y reduce la proporción. Las WCAG entran en 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 de ellos, llamado Ingeniería de factores humanos de estaciones de trabajo informáticas (ANSI/HFES 100-2007), se publicó en 2007 y fue designado como estándar estadounidense de ergonomía. Combinó y reemplazó dos estándares anteriores que fueron creados por comités separados. El objetivo del estándar combinado era dar cabida 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 a considerar en nuestros diseños.

¿Qué significa la proporción?

La relación de contraste explica la diferencia entre el brillo del color más claro y el brillo del color más oscuro en un rango determinado. Es la luminancia relativa de cada color.

Comenzamos con un ejemplo de introducción de un texto en color verde azulado sobre un fondo gris claro.

h1Title of Your Awesome Site/h1

h1 {  background-color: #888888;  color: #1ABC9C;}

Vale la pena señalar que algunas herramientas, como WordPress, brindan una advertencia útil sobre esto cuando hay una combinación de texto y fondo mal contrastada. En el caso de WordPress, aparece un aviso en la barra lateral.

“Está bien”, dice. “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”. (Me alegre de que uno de nosotros pueda hacerlo porque para mí es un desastre gris fangoso).

La relación de contraste para ese excelente fragmento de hipertexto es 1,47:1.

Quería comprender mejor lo que realmente verificaban las evaluaciones de contraste y descubrí que requiere el uso de matemáticas… con un lado para comprender 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 un pequeño repaso 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 color más oscuro.

Esto parece sencillo, ¿verdad? Pero primero necesitamos determinar la luminancia relativa de cada color para obtener esas variables.

Bien, volvamos a la luminancia relativa.

Lo mencionamos de pasada, pero vale la pena profundizar en la 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 necesitamos obtener la notación RGB de un color. A veces trabajamos 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 segundo plano que lo hacen posible. Nuestro color hexadecimal verde azulado #1ABC9Cse convierte en un RGB de 26, 188, 156.

A continuación, 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.

Ahora con nuestro color verde azulado se ve así:

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 0,03938, lo dividimos por 12,92. De lo contrario, sumamos 0,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í:

Esta parte de nuestra ecuación proviene de la fórmula para determinar la luminancia relativa.

Simplemente pasamos rápidamente la corrección gamma sin hablar mucho sobre ella y lo que hace. En resumen, traduzca lo que “ve” una computadora en la percepción humana del brillo. Las computadoras registran la luz directamente donde el doble de fotos equivale 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 0,2126, el valor del componente verde por 0,7152 y el componente azul por 0,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:

…¡y súmelos para obtener luminosidad!

L1 = 0.00219611973 + 0.35966439619 + 0.02400300118 = 0.38586352

Si hacemos lo mismo para obtener nuestro L2valor, eso nos da 0,24620133.

Finalmente tenemos los valores L1y L2que necesitamos para calcular el contraste. Para determinar qué valor es L1y cuál es L2, debemos asegurarnos de que el número mayor (que muestra el color más claro) sea siempre L1y 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 un tamaño de texto estándar, entre 18 y 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 inferior a 3 será suficiente. Pero para obtener la calificación WCAG más alta (AAA), debemos tener un resultado de relación de contraste de al menos 7. Nuestra encantadora combinación no pasa 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 colores mejores!

¡Me alegra mucho de que tengamos computadoras y herramientas en línea para hacer este trabajo para nosotros! Tratar de resolver los detalles paso a paso en 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 profesores de 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, prueba nuestros dos colores de ejemplo, como #1ABC9Cy #888888.

Sólo quiero que mi página tenga el contraste adecuado, ¿qué hago?

Existe 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 comenzar.

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 contrastantes y le ayudará a identificar áreas problemáticas.

Siga las sugerencias de la auditoría.

Utilice las mejores prácticas para mejorar su evaluación 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 sepa qué puede reemplazar en su código.

Ejecute la prueba nuevamente

De esta manera, puede asegurarse de que sus cambios mejoren las cosas. ¡Felicidades! ¡Acaba de mejorar su producto para todos los usuarios, no solo para los afectados por errores de accesibilidad!

¡Lo que viene a continuación depende de ti!

Puede ponérselo más fácil y lanzar todos los productos nuevos con el objetivo de hacerlos accesibles. Haga que las pautas de accesibilidad formen parte de sus requisitos tanto de tecnología como de diseño. Se ahorrará potencialmente cientos de horas de reparación y posibles quejas legales. Los sitios web del gobierno y de educación de EE.UU. UU. Están obligados a cumplir, pero a menudo se critica a otras industrias 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 establecidas y probadas (como Bootstrap o Material Design de Google) que ya habrán descubierto colores de tema de contraste óptimos. En muchos casos, puede tomar sólo lo que necesita (como solo el CSS) o al menos revisar sus paletas de colores para informar sus opciones. Sin embargo, aún debes verificar el contraste porque, si bien la mayoría de las opciones de texto estándar en un marco pueden seguir las sugerencias WCAG de relación de contraste, cosas como los estilos de alerta y mensaje pueden no hacerlo. (¡Te estoy mirando, Bootstrap!)

Derek Kay ha revisado una lista de marcos web centrados 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 usando su sistema de token CSS que etiqueta los colores para hacer que las diferencias de contraste sean súper claras), pero también enlaza con varios recursos muy buenos para mejorar y comprender el contraste.

Aquí profundizamos más de lo que quizás realmente necesite saber, pero comprender qué es una relación de contraste y lo que realmente significa debería ayudarlo a recordar que debe 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 máxima experta en contrastes, solo soy una chica muy, muy curiosa que a veces tiene problemas para leer cosas en la web con poco 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 requisitos de nuestros sitios, mejor podremos planificar mejoras y, en última instancia, satisfacer las necesidades de nuestras audiencias.

Lecturas adicionales y referencias:

• Cómo la Web se volvió ilegible – Kevin Marks
• Comprender 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 la máxima sensibilidad visual humana Susan Zhao 2007