Probar el contraste de color de texto con el Selector de colores
Es posible que las personas con visión baja no vean áreas muy brillantes o muy oscuras. Todo tiende a aparecer en el mismo nivel de brillo, lo que hace que sea difícil distinguir contornos y bordes.
La relación de contraste mide la diferencia de brillo entre el primer plano y el fondo del texto. Si el texto tiene una relación de contraste baja, las personas con visión baja podrían experimentar el sitio como una pantalla en blanco.
En DevTools, una forma de ver la relación de contraste de un elemento de texto es usar el Selector de colores, desde la pestaña Estilos. El Selector de colores te ayuda a comprobar que el texto cumple los niveles de relación de contraste recomendados.
Para comprobar el contraste de color de texto con el Selector de colores:
En DevTools, seleccione la herramienta Elementos.
En el árbol DOM, seleccione el elemento de texto que desea inspeccionar.
En la pestaña Estilos, busque la propiedad color que se aplica al elemento y, a continuación, seleccione el cuadrado de color junto a la propiedad color.
Examine la sección Relación de contraste del Selector de colores. Una marca de verificación significa que el elemento cumple la recomendación mínima. Dos marcas de verificación significan que cumple la recomendación mejorada.
Para obtener más información, seleccione la sección Relación de contraste para expandirla. En el selector visual de la parte superior del Selector de colores, aparecen dos líneas que se ejecutan en el selector visual, junto con un círculo para el color actual. Si el color actual cumple las recomendaciones, cualquier cosa del mismo lado de la línea también cumple las recomendaciones. Si el color actual no cumple las recomendaciones, cualquier cosa del mismo lado tampoco cumple las recomendaciones.
Para probar diferentes colores, seleccione dentro del selector visual o seleccione una muestra de color en la parte inferior del Selector de colores.
Nota
Algunas partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y se usan según los términos descritos en la Licencia internacional de Creative Commons Attribution 4.0. La página original se encuentra aquí y está redactada por Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).
Este trabajo se publica bajo una licencia de Atribución 4.0 Internacional de Creative Commons.