Prueba del contraste de color de texto mediante el selector de colores

Personas con visión baja podría no ver áreas muy brillantes o muy oscuras. Todo tiende a aparecer aproximadamente 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 bajo, es posible que las personas con visión baja experimenten su sitio como una pantalla en blanco.

En DevTools, una manera de ver la relación de contraste de un elemento de texto es usar el Selector de colores, desde la pestaña Estilos de la herramienta Elementos . El selector de color le ayuda a comprobar que el texto cumple los niveles de relación de contraste recomendados.

Para comprobar el contraste de color de texto mediante el Selector de colores:

1. En DevTools, abra la herramienta Elementos .

2. En el árbol DOM, seleccione el elemento de texto que desea inspeccionar.

3. En la pestaña Estilos , busque la propiedad de color que se aplica al elemento y, a continuación, haga clic en el cuadrado de color situado junto a la propiedad color .

   Se abre el selector de colores:

   

4. Examine la sección Relación de contraste del Selector de colores:

   

   En la sección Relación de contraste se muestra una puntuación para la relación de contraste entre el texto y el fondo y un icono que indica si la relación de contraste cumple las recomendaciones:

   • Un círculo rojo tachado significa que el elemento no cumple la recomendación mínima.
   • Una marca de verificación significa que el elemento cumple la recomendación mínima.
   • Dos marcas de verificación significan que el elemento cumple la recomendación mejorada.

5. Para obtener más información, haga clic en la sección Relación de contraste para expandirla:

   

   En el selector de objetos visuales 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 elemento del mismo lado tampoco cumple las recomendaciones.

6. Para probar diferentes colores, haga clic en el selector visual o seleccione una muestra de color en la parte inferior del Selector de colores.

Consulte también

• Cambiar colores con el selector de colores en la referencia de características CSS

Nota:

Las partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y usadas según los términos descritos en la licencia internacional creative Commons Attribution 4.0. La página original se encuentra aquí y está creada por Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Esta obra está licenciada bajo una Licencia Internacional Creative Commons Attribution 4.0.