Una descripción general de tres herramientas y técnicas para probar y verificar el contraste de color accesible de tu diseño.
Supongamos que tienes texto sobre un fondo claro, como el siguiente:
Si bien todos los ejemplos pueden ser legibles, este no es el caso para todos.
El contraste de color accesible es una práctica que garantiza que el texto sea legible para todos. A veces, probar el contraste es fácil y, a veces, muy difícil. Al final de esta publicación, tendrás tres herramientas y técnicas nuevas para inspeccionar, corregir y verificar el contraste de tu diseño web para que puedas abordar las situaciones más difíciles.
WCAG y contraste de color
La iniciativa de accesibilidad web del W3C proporciona estrategias, estándares y recursos que garantizan que la mayor cantidad posible de personas pueda acceder a Internet. Las pautas que respaldan estos estándares se denominan Pautas de accesibilidad de contenido web o WCAG. La versión estable más reciente, WCAG 2.1, cubre un requisito de accesibilidad importante: contraste mínimo.
La relación entre dos colores en las WCAG 2.1 se describe por su relación de contraste, es decir, el número que se obtiene cuando se compara la luminancia de dos colores. La luminosidad es una forma de describir qué tan cerca está un color de negro (0%) o blanco (100%). Las WCAG definen algunas reglas y algoritmos de cálculo sobre lo que debe ser esa relación de contraste para que se pueda acceder a la Web. Sin embargo, existen problemas conocidos con este cálculo. Con el tiempo, se adoptará una forma aún más confiable, pero, por el momento, las WCAG son la mejor que tenemos.
¿Cuáles son las reglas?
Una proporción de contraste más alta se califica con un número más alto, como 4.5 o 7 en lugar de 3. Para familiarizarte con la tabla de puntuación, consulta el Verificador de contraste de Polypane.
Prueba el contraste entre colores
Ahora que sabemos lo que buscamos, ¿cómo lo probamos? Estas son tres herramientas gratuitas que te ayudarán a inspeccionar, corregir y medir el contraste de tu sitio web. Se destacarán las fortalezas y debilidades de cada una para que puedas probar con confianza la accesibilidad de los colores y el contenido de tu sitio de diversas maneras.
- Pika
Es una app para MacOS que es única y capaz de mostrar el contraste de cualquier color en toda la pantalla, colores en gradientes, colores con transparencia y mucho más. La intención es explícita, los usuarios eligen manualmente los píxeles que quieren comparar. Un poco menos automatizado, con una gran ganancia de funciones. - VisBug
Es una extensión para varios navegadores que tiene la capacidad única de mostrar más de una superposición de contraste a la vez. Sin embargo, al igual que Herramientas para desarrolladores, a veces no puede detectar intents. - Herramientas para desarrolladores de Chrome
DevTools está integrado en Chrome y cuenta con varias formas de inspeccionar, corregir y depurar problemas de color, pero presenta deficiencias cuando se inspeccionan gradientes y colores semitransparentes, y a veces no pueden detectar intents.
Pika (aplicación para macOS)
Si Herramientas para desarrolladores o VisBug no pueden evaluar el contraste de forma adecuada, como cuando necesitas probar un color fuera del navegador o cuando hay transparencia o gradientes, Pika llegó para salvar el día. Pika tiene acceso a cada píxel de la pantalla porque es una herramienta del sistema y no una web.
Esto también significa que la UX para usar Pika es diferente de la de Herramientas para desarrolladores o VisBug. Herramientas para desarrolladores y VisBug hacen todo lo posible para mostrar los colores de texto y fondo del DOM del navegador, mientras que los colores que compara Pika se eligen de forma manual desde cualquier punto de la pantalla. Esto le brinda a Pika más control y abre algunos casos de uso adicionales:
- Comparar dos colores distintos, independientemente de si se encuentran o no en el navegador, y si puedes verlo en la pantalla, puedes probarlo.
- Comparación de colores con transparencia.
- Comparar colores dentro de gradientes
- Comparación de colores que usan modos de combinación, como el modo de combinación de combinación en CSS
Comparar dos colores cualesquiera
Compara texto con un color de fondo:
Comparar los colores de trazo y relleno de los gráficos vectoriales:
Comparación de colores con transparencia
Compara el color del texto con una variedad de píxeles de muestra de fondo. Aquí, se usa el gris más claro del efecto de vidrio esmerilado como color de comparación del fondo.
Comparación de colores con gradientes
Compara texto en un gradiente o en una imagen. Aquí, la L de "Lasso" se compara con el azul claro de la imagen:
VisBug
VisBug es una herramienta inspirada en FireBug que les permite a los diseñadores y desarrolladores inspeccionar y depurar visualmente el diseño de su sitio web, así como jugar con él. Su objetivo es tener una barrera de entrada menor que las Herramientas para desarrolladores de Chrome, ya que emula la IU y la UX de las herramientas de diseño que las personas conocen y adoran usar.
Prueba VisBug o instálalo en Chrome, Firefox, Edge, Brave o Safari.
Una de las ofertas de herramientas es la Herramienta de inspección de accesibilidad.
Inspeccione en varios navegadores (e incluso en dispositivos móviles)
Una vez que se haya hecho clic en la Herramienta de inspección de accesibilidad, se mostrará la información de accesibilidad a cualquier elemento al que el usuario apunte o al que navegue con el teclado en la información sobre la herramienta. En esta información, se incluyen comparaciones de colores entre los colores detectados en primer y segundo plano.
Inspecciona una o varias
Las Herramientas para desarrolladores pueden consultar una combinación de colores única o recibir un informe de todas las combinaciones de colores en la página, pero VisBug ofrece un buen punto medio, ya que permite estas combinaciones. Haz clic en un elemento para que no se muestre la información sobre la herramienta. Mantén presionada la tecla Mayúsculas y sigue haciendo clic en otros elementos para que todos los cuadros de información permanezcan en su lugar:
Esto es especialmente importante para el diseño basado en componentes, en el que varias partes de un componente deben pasar puntuaciones de proporción de contraste. Este método permite ver todas esas partes de componentes a la vez. También es ideal para las revisiones de diseño.
Herramientas para desarrolladores de Chrome
Si tienes Chrome instalado, ya cuentas con muchas herramientas de prueba de contraste:
- Selector de color
- Cuadro de información de inspección
- Descripción general de CSS
- Faro
- La consola de JS
- Herramientas de emulación para personas daltónicas
- Emulación de preferencia de contraste de color del sistema
- Experimento de WCAG 3.0 de APCA
Selector de color de las Herramientas para desarrolladores de Chrome
En el panel Estilos de las Herramientas para desarrolladores de Chrome del panel Elementos, los valores de color tendrán una pequeña muestra de color cuadrada visual junto a ellos. Cuando haces clic en esta muestra, verás la herramienta de selector de color. Si es posible, en el centro de la herramienta se mostrará el contraste del color con respecto a un primer o segundo plano.
En el siguiente ejemplo, se abre el selector de color para un valor de color de propiedad personalizado. La puntuación de la proporción de contraste se informa como 15.79 y tiene dos marcas de verificación verdes, lo que indica que la puntuación aprueba los requisitos de AA y AAA WCAG 2.1:
Corrección automática del selector de color
Es útil ver la puntuación mientras se eligen los colores, pero las Herramientas para desarrolladores de Chrome tienen una función adicional para la autocorrección. Cuando el selector de color informa una puntuación de contraste de color accesible fallida, se puede expandir para mostrar los objetivos de puntuación AA y AAA, además de una herramienta de cuentagotas. Junto a AA y AAA, hay muestras y un ícono de actualización que, cuando se hace clic en él, encontrará el color de pase más cercano:
Si no te preocupan los colores, la función de corrección automática es una excelente manera de cumplir con los lineamientos de accesibilidad y no esforzarte demasiado para completar una tarea.
Información sobre la inspección
La herramienta de selección de elementos tiene una función especial cuando se coloca el cursor sobre la página que informa información general sobre la fuente, el color y la accesibilidad. La herramienta de selección de elementos es el ícono de la izquierda en la siguiente captura de pantalla. Es el cuadro con un cursor de flecha
en la esquina inferior derecha. También se puede seleccionar con la tecla de acceso rápido Control+Shift+C (o Command+Shift+C en MacOS).
Una vez activado, el ícono se pondrá de color azul y apuntará a cualquier elemento de la página mostrará la siguiente información sobre la herramienta de inspección rápida:
En lugar de la herramienta de selección de color, que requiere que encuentres la muestra de color en el panel Estilos, esta herramienta te permite apuntar alrededor de la página para ver las puntuaciones de contraste. Al igual que el selector de color, solo puede mostrar una puntuación de contraste a la vez.
Golpea los brazos hasta que apruebes 🔍
A menudo, inspecciono una vinculación de colores con esta herramienta de inspección rápida y no me equivoco de pasar la proporción requerida. En lugar de usar la función de autocorrección del selector de color (porque soy exigente), los adelanto con otros canales de color en CSS y lo miro hasta que pase la proporción que necesito. A este proceso lo llamo "expansión hasta que pases" porque transfiera los números de los canales de color hasta que pasen las WCAG 2.1.
Los pasos son los siguientes y deben realizarse en el orden exacto:
- Establece el enfoque del teclado dentro de un color en el panel Estilos.
- Activa la herramienta de inspección de elementos con la combinación de teclas
Control+Shift+C(oCommand+Shift+Cen MacOS). - Coloca el cursor sobre un objetivo.
- Presiona las flechas hacia arriba y abajo en el teclado para cambiar los números del valor de color.
Esto funciona porque el valor de estilo CSS sigue teniendo el enfoque del teclado, mientras que el mouse te permite apuntar sobre un objetivo. Asegúrate de no hacer clic en el objetivo o el foco se moverá del área de valores de color y no te permita mover más valores hasta que vuelvas a enfocarlo.
Descripción general del CSS
Hasta este punto, las Herramientas para desarrolladores de Chrome brindaron maneras de ver una vinculación de colores a la vez, pero la Descripción general de CSS puede rastrear toda la página y presentar todas las vinculaciones inaccesibles a la vez:
Obtén más información sobre esta función en esta entrada Resumen de CSS: Identifica posibles mejoras de CSS o mira a Jecelyn Yeen en YouTube en su serie Sugerencias para Herramientas para desarrolladores, que te enseña cómo identificar posibles mejoras de CSS con el panel Resumen de CSS.
Faro
Lighthouse es otra herramienta de auditoría de las Herramientas para desarrolladores de Chrome. Puede rastrear tu página e informar las combinaciones de colores inaccesibles. Incluye capturas de pantalla pequeñas de cada par de colores para que las revises, apruebes y reprobes. Cualquier combinación errónea afectará tu puntuación de Lighthouse de forma negativa.
A continuación, te mostramos cómo pueden verse esos resultados:
La consola de JS
Tal vez todas las herramientas enumeradas hasta ahora no están donde estás. Quizás estés (todo el día) en JavaScript. Prueba este experimento. El panel Problemas de la consola puede informar constantemente cualquier problema de accesibilidad de contraste de color mientras compilas. Habilita la función en Configuración > Experimentos, como se muestra a continuación:
Luego, abre el panel Issue y comprueba si se hizo algún descubrimiento. Si es así, pueden verse de la siguiente manera:
Emulación para daltónicos
Si se trata del contraste de color y de garantizar combinaciones de colores accesibles, vale la pena señalar la herramienta de emulación de deficiencias de visión. Esto cambiará los colores o la apariencia de tu diseño para demostrar los resultados de diferentes variedades de daltonismo, lo que te dará la oportunidad de modificar el diseño para que el color no sea la única forma en que la UX se comunica con un usuario.
No es una práctica de accesibilidad segura usar exclusivamente color para representar información, como el rojo para el malo y el verde para el bien. Algunas personas no ven los verdes ni los rojos de la misma manera, y esta herramienta de emulación te ayudará a experimentarlo y recordarlo.
Emulación de preferencias del sistema de contraste de color
Cada vez más, los usuarios cambian la configuración de contraste en su sistema operativo, lo que les da la posibilidad de solicitar una personalización de contraste menor o mayor en su IU. El CSS puede aprovechar este parámetro de configuración, al igual que con las preferencias de temas oscuros o claros. Las Herramientas para desarrolladores de Chrome ofrecen la capacidad de emular esta preferencia para que los diseños puedan probar y adaptarse a la solicitud del usuario sin activar o desactivar la configuración en el sistema.
Prueba WCAG 3.0 APCA
Otro experimento que puedes probar consiste en probar tus combinaciones de colores con el sistema experimental de puntuación de proporción de colores de APCA. Si se habilita en Configuración > Experimentos, reemplaza el sistema de proporción WCAG 2.1 por un algoritmo de verificador de contraste más nuevo y mejorado, lo que te permite obtener una vista previa de sus resultados a medida que la propuesta funciona en función de un estándar.
Una vez habilitada, usa la información sobre la herramienta de inspección de puntos o el selector de color para ver la puntuación de vinculación de colores y ver si se aprueba:
Conclusión
El contraste de color es una pieza importante del rompecabezas para la accesibilidad en la Web, y cumplir con él hace que esta sea más útil para la mayor cantidad de personas en las situaciones más variadas. Espero que estas tres herramientas te ayuden a tomar grandes decisiones de color.