Qué revisa 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 poco visibles son difíciles de leer para las personas con baja visión, y para cualquiera bajo una luz intensa.
Cómo corregirlo
En cualquier sitio web
- Encuentra el texto con poco contraste y anota sus colores de texto y de fondo: un verificador 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 marcador de posición (placeholder), a los enlaces del pie de página y a los botones sobre imágenes.
En Shopify
- Encuentra el texto con poco contraste y anota sus colores de texto y de fondo: un verificador 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 colores 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 marcador de posición (placeholder), 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 con un verificador de contraste usando los colores exactos.
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, y reporta cada elemento que no la cumple con su página, su marcado y, cuando aplica, una captura de pantalla.
Una prueba automatizada confirma que este problema específico está presente. No puede determinar si el resto de la página es accesible: algunas barreras solo aparecen cuando una persona revisa la página.