Qué comprueba esta regla
Garantiza que el contraste entre colores de primer plano y fondo cumple los límites de la ratio para contraste WCAG 2 AA.
Por qué es importante
WCAG 1.4.3 exige una relación de contraste de al menos 4.5:1 para el texto normal y de 3:1 para el texto grande. Los precios, las etiquetas y los banners con colores tenues son difíciles de leer para las personas con baja visión y, con luz intensa, para todo el mundo.
Cómo corregirlo
En cualquier web
- Localiza el texto con poco contraste y anota sus colores de texto y de fondo: un comprobador de contraste o las herramientas para desarrolladores de tu navegador muestran ambos.
- Cambia el color del texto o del fondo en el CSS de tu tema hasta que la relación sea de al menos 4.5:1 (3:1 para texto de 24px o más, o de 18.66px en negrita).
- Presta especial atención a las etiquetas de oferta, al texto de los marcadores de posición, a los enlaces del pie de página y a los botones sobre imágenes.
En Shopify
- Localiza el texto con poco contraste y anota sus colores de texto y de fondo: un comprobador de contraste o las herramientas para desarrolladores de tu navegador muestran ambos.
- En Tienda online > Temas > Personalizar > Configuración del tema > Colores, oscurece el color del texto o aclara el fondo del esquema de color afectado hasta que la relación sea de al menos 4.5:1.
- Presta especial atención a las etiquetas de oferta, al texto de los marcadores de posición, a los enlaces del pie de página y a los botones sobre imágenes.
Cómo comprobar la corrección
- Vuelve a ejecutar el análisis y confirma que color-contrast ya no aparece.
- Haz una comprobación puntual de los colores exactos con un comprobador de contraste.
Cómo lo detecta FixReports
Nuestro análisis ejecuta la regla color-contrast de axe-core en un navegador Chrome real en cada página que prueba, e informa de cada elemento que no la cumple con su página, su marcado y, cuando procede, una captura de pantalla.
Una prueba automatizada confirma que este problema concreto está presente. No puede determinar si el resto de la página es accesible: algunas barreras solo se detectan cuando una persona revisa la página.