# Los elementos deben tener un contraste de colores suficiente

<https://www.fixreports.com/es/issues/color-contrast>

WCAG 1.4.3 Contraste (mínimo) · Nivel AA

Hay texto que no destaca lo suficiente sobre su fondo como para que lo lean las personas con baja visión.

## 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
1. 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.
2. 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).
3. 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
1. 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.
2. 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.
3. 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 WooCommerce y WordPress
1. 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.
2. 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).
3. 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.

## Fuentes
- Documentación de la regla de axe-core (Deque): https://dequeuniversity.com/rules/axe/4.13/color-contrast
- Comprender WCAG 1.4.3 (W3C): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum