Contrastes de luminancia WCAG: práctica actual, ¿qué es?

Traté de hacer esta pregunta en otro grupo , pero obtuve una pista de que este grupo podría ser más apropiado.

Acabo de escribir una pequeña herramienta para verificar el contraste de luminancia (WCAG) en una página web. Al probar esto, me sorprendió ver que muchos sitios (por ejemplo, Facebook) usan un contraste tan bajo como 2.7, donde el contraste recomendado es 4.5 (WCAG2 AA).

Hay muchos sitios que hacen eso (por ejemplo, este ;-)). Parece que hay cierto consenso práctico. Parece difícil para un diseñador evitar usar un contraste más bajo en algunos elementos.

Esta publicación tomó un problema algo similar. ¿Hay alguna documentación sobre esta práctica con contraste de usar contraste de baja luminancia? ¿Alguna investigación o alguna recomendación en W3C que no puedo encontrar?

Espero que mi pequeña herramienta no se equivoque. ;-)

Respuestas (1)

muchos sitios (por ejemplo, Facebook) usan un contraste tan bajo como 2.7 donde el contraste recomendado es 4.5 (WCAG2 AA).

Interesante pregunta.

¿Puedo preguntarle dónde encontró la proporción de 2,7:1 de la interfaz de usuario de Facebook?

4.5: 1 es el contraste recomendado "entre el texto (e imágenes de texto) y el fondo detrás del texto" , así que revisé esta publicación de Facebook de muestra:

ingrese la descripción de la imagen aquí

El resultado es:

  • el color de fondo es #fff;
  • El color de primer plano es #141823;
  • La relación de contraste es 17,73:1 (Nivel AAA).

En la barra lateral:

ingrese la descripción de la imagen aquí

  • el color de fondo es #E9EAED;
  • El color de primer plano es #333;
  • La relación de contraste es de 10,50:1 (nivel AAA).

He encontrado proporciones similares en casi todas partes en la interfaz de usuario de Facebook, por lo que me gustaría saber más sobre dónde y cómo midió el contraste.

Gracias por tu respuesta, Leonora. Estoy usando una herramienta que hice yo mismo. Es un bookmarklet, YAVB-C que aún no está listo. Sin embargo, creo que puedes probar un poco con él. Por ejemplo, el texto "GRUPOS" en la columna izquierda de Facebook parece tener poco contraste (2,7). ¿Quizás he cometido algún error? Me encantaría que probaras y compararas con las herramientas que estás usando.
Contrastes de luminancia WCAG: práctica actual, ¿qué es?
RespuestasAquíPolítica de privacidad1y, 0v