Una descripción general de tres herramientas y técnicas para probar y verificar el contraste de colores accesible de tu diseño.
Supongamos que tienes texto sobre un fondo claro, como este:
Si bien es posible que puedas leer todos los ejemplos, no es así 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, es muy difícil. Al final de esta entrada, tendrás tres herramientas y técnicas nuevas para inspeccionar, corregir y verificar el contraste del diseño web, de modo 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 para garantizar que Internet sea accesible para la mayor cantidad de personas posible. Los lineamientos que sustentan estos estándares se llaman Lineamientos de accesibilidad al contenido web o WCAG. La versión estable más reciente, WCAG 2.1, cubre un requisito de accesibilidad importante: el contraste mínimo.
La relación entre dos colores en WCAG 2.1 se describe mediante su proporción de contraste, es decir, el número que obtienes cuando comparas la luminancia de dos colores. La luminancia es una forma de describir qué tan cerca está un color del negro (0%) o del blanco (100%). Las WCAG definen algunas reglas y algoritmos de cálculo sobre cuál debe ser esa relación de contraste para que la Web sea accesible. Sin embargo, existen problemas conocidos con este cálculo. Con el tiempo, se adoptará una forma aún más confiable, pero, en la actualidad, WCAG es lo mejor que tenemos.
¿Cuáles son las reglas?
Una relación de contraste más alta se puntúa con un número más alto, como 4.5 o 7 en lugar de 3. Para familiarizarte más con la tabla de puntuación, consulta el Verificador de contraste de Polypane.
Cómo probar 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 describirán las fortalezas y debilidades de cada uno para que puedas probar con confianza la accesibilidad de los colores y el contenido de tu sitio de muchas maneras.
- Pika
Es una app para MacOS que tiene la capacidad única de mostrar el contraste de cualquier color en toda la pantalla, colores en gradientes, colores con transparencia y mucho más. El intent es explícito: los usuarios eligen manualmente los píxeles que se van a comparar. Un poco menos automatizado con un gran aumento de funciones. - VisBug
Es una extensión multinavegador que puede mostrar más de una superposición de contraste a la vez, pero, al igual que DevTools, a veces no puede detectar la intención. - Herramientas para desarrolladores de Chrome
Las Herramientas para desarrolladores están integradas en Chrome y cuentan con varias formas de inspeccionar, corregir y depurar problemas de color, pero tienen deficiencias cuando se inspeccionan gradientes y colores semitransparentes, y, a veces, no pueden detectar la intención.
Pika (aplicación para macOS)
Si DevTools o VisBug no pueden evaluar el contraste correctamente, como cuando necesitas probar un color fuera del navegador o cuando hay transparencia o gradientes, Pika está aquí para salvar el día. Pika tiene acceso a cada píxel de la pantalla porque es una herramienta del sistema y no una herramienta web.
Esto también significa que la UX para usar Pika es diferente a la de DevTools o VisBug. Herramientas para desarrolladores y VisBug hacen todo lo posible para mostrar el texto y los colores de fondo del DOM del navegador, mientras que los colores que compara Pika se eligen manualmente desde cualquier punto de la pantalla. Esto le brinda a Pika más control y abre algunos casos de uso adicionales:
- Comparar cualquier par de colores, independientemente de si están o no en el navegador. Si puedes verlos en la pantalla, puedes probarlos.
- Comparación de colores con transparencia.
- Comparar colores dentro de los gradientes
- Comparar colores que usan modos de combinación, como mix-blend-mode en CSS
Comparación de dos colores
Compara el texto con un color de fondo:
Compara 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í, el gris más claro del efecto de vidrio esmerilado se usa como color de comparación de fondo.
Comparación de colores con gradientes
Comparar 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 para que diseñadores y desarrolladores inspeccionen, depuren y jueguen visualmente con el diseño de su sitio web. Se debe tener una barrera de entrada menor que las Herramientas para desarrolladores de Chrome, ya que emula la IU y UX de las herramientas de diseño que los usuarios conocen y adoran usar.
Prueba VisBug o instálalo en Chrome, Firefox, Edge, Brave o Safari.
Una de las opciones que ofrece es la Herramienta de inspección de accesibilidad.
Inspecciona en todos los navegadores (incluso en dispositivos móviles)
Una vez que se hace clic en la herramienta de inspección de accesibilidad, la información de accesibilidad aparece en el cuadro de información sobre cualquier elemento al que el usuario apunte o navegue con el teclado. Esta información sobre herramientas incluye comparaciones de colores entre los colores de primer plano y de fondo descubiertos.
Inspecciona uno o varios
DevTools puede analizar una sola combinación de colores o obtener un informe de todas tus combinaciones de colores en la página, pero VisBug ofrece un buen punto medio, ya que permite varias combinaciones de colores. Haz clic en un elemento y el cuadro de información permanecerá en su lugar. Mantén presionada la tecla Mayúsculas y sigue haciendo clic en otros elementos. Todas las indicaciones sobre herramientas permanecerán en su lugar:
Esto es especialmente importante para el diseño basado en componentes, en el que varias partes de un componente deben aprobar las puntuaciones de la relació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 instalado Chrome, ya tienes muchas herramientas de prueba de contraste:
- El selector de color
- Información sobre la herramienta de inspección
- Descripción general de CSS
- Faro
- La consola de JS
- Herramientas de emulación para daltónicos
- Emulación de preferencias de contraste de color del sistema
- Experimento de APCA de WCAG 3.0
Selector de color de las Herramientas para desarrolladores de Chrome
En el panel Styles de Chrome DevTools del panel Elements, los valores de color tendrán una pequeña muestra de color cuadrada visual junto a ellos. Cuando hagas clic en esta muestra, verás la herramienta de selector de color. Si es posible, el centro de la herramienta mostrará el contraste del color sobre un primer o segundo plano.
En el siguiente ejemplo, se abre el selector de color para un valor de color de propiedad personalizada. La puntuación de la relación de contraste se informa como 15.79 y tiene dos marcas de verificación verdes, lo que indica que la puntuación supera los requisitos de AA y AAA de WCAG 2.1:
Autocorrección 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 que falla, se puede expandir para revelar los objetivos de puntuación de 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, encuentra el color aprobado más cercano:
Si no eres exigente con 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 la tarea.
Cuadro de información de inspección
La herramienta de selección de elementos tiene una función especial durante el desplazamiento del mouse 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 directo Control+Shift+C (o Command+Shift+C en MacOS).
Una vez activado, el ícono se volverá azul, y apuntar a cualquier elemento de la página mostrará la siguiente información de inspección rápida:
En lugar de la herramienta de selector de color, que requiere que encuentres la muestra de color en el panel Estilos, esta herramienta te permite simplemente 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.
Bump bump hasta que pases 🎶
A menudo, inspecciono una combinación de colores con esta herramienta de inspección rápida y descubro que no cumple con la proporción requerida. En lugar de usar la función de autocorrección del selector de color (porque soy exigente), muestro canales de color en CSS y miro hasta pasar la proporción que necesito. Llamo a este proceso “subir hasta que pases” porque estoy subiendo los números de canales de color hasta que pasen la 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 del elemento con la combinación de teclas
Control+Shift+C(oCommand+Shift+Cen MacOS). - Coloca el cursor sobre un objetivo.
- Presiona las flechas hacia arriba o abajo del teclado para cambiar los números del valor del color.
Esto funciona porque el valor del estilo CSS aún tiene el enfoque del teclado, mientras que el mouse te permite apuntar a un objetivo. Asegúrate de no hacer clic en el objetivo, o bien el enfoque se moverá del área del valor de color y no te permitirá ajustar los valores hasta que vuelvas a enfocarte.
Resumen de CSS
Hasta este punto, las Herramientas para desarrolladores de Chrome ofrecieron formas 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 la publicación Descripción general de CSS: Identifica posibles mejoras de CSS o mira a Jocelyn Yeen en YouTube en su serie DevTools Tips, en la que te enseña a identificar posibles mejoras de CSS con el panel Descripción general de CSS.
Faro
Lighthouse es otra herramienta de auditoría de las Herramientas para desarrolladores de Chrome. Puede rastrear tu página y, luego, informar las combinaciones de colores inaccesibles. Muestra capturas de pantalla pequeñas de cada combinación de colores para que las revises y sepas cuáles son aprobadas y cuáles no. Cualquier combinación que falle afectará de forma negativa tu puntuación de Lighthouse.
A continuación, te mostramos cómo pueden verse esos resultados:
La consola de JS
Es posible que todas las herramientas enumeradas hasta ahora no estén donde estás. Tal vez donde te encuentras (todo el día) es JavaScript. Este es un experimento que puedes probar. El panel Problemas de la consola puede informar constantemente sobre 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 de problemas y comprueba si se detectó algún problema. Si es así, pueden verse de la siguiente manera:
Emulación para personas daltónicas
En cuanto al contraste de colores y 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 las diferentes variedades de daltonismo, lo que te dará la oportunidad de modificar tu 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 el color para representar información, como rojo para lo malo y verde para lo bueno. 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 permite solicitar menos o más personalización del contraste en su IU. CSS puede aprovechar este parámetro de configuración, al igual que con las preferencias de temas oscuros o claros. Chrome DevTools ofrece la capacidad de emular esta preferencia para que los diseños puedan probarse y adaptarse a la solicitud del usuario sin tener que activar la configuración desde el sistema.
Prueba WCAG 3.0 APCA
Otro experimento que puedes probar consiste en probar tus pares de colores con el sistema experimental de puntuación de proporción de colores de APCA. Si se habilita a través de Configuración > Experimentos, reemplaza el sistema de proporción WCAG 2.1 por un algoritmo del corrector de contraste más nuevo y mejorado, lo que te permite obtener una vista previa de sus resultados mientras la propuesta trabaja 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 colores es una pieza importante del rompecabezas de la accesibilidad en la Web, y si se respeta, hace que la Web sea más fácil de usar para la mayor cantidad de personas en las situaciones más variadas. Esperamos que estas tres herramientas te ayuden a tomar buenas decisiones de colores.