Error · color-contrast
Texto difícil de leer
Lighthouse / axe lo llaman: Elements must meet minimum color contrast ratio thresholds · Background and foreground colors do not have a sufficient contrast ratio
Hay textos demasiado claros sobre su fondo. Personas con baja visión, clientes mayores y cualquiera con el celular al sol no los pueden leer. Es el hallazgo más común en demandas de accesibilidad.
A quién deja fuera: personas con baja visión · quien entra desde el celular
Cómo se corrige
Oscurecer un poco esos textos. Calculamos el color más cercano que cumple y lo verificamos; tu desarrollador lo aplica en minutos.
En el código
Oscurece el texto (o aclara el fondo) hasta llegar a 4.5:1 (3:1 para texto ≥ 24px o negrita ≥ 19px).
✓ Nuestro escáner escribe y prueba esta corrección por ti.
Dónde se arregla sin programar
Si tu sitio está en una de estas plataformas, la corrección está en el panel:
WordPress:
Edita la página → clic en el texto → panel Bloque → Tipografía → Color: elige un color de texto más oscuro. Para todo el sitio: Apariencia → Editor → Estilos → Colores. O pega el CSS de abajo en CSS adicional.Shopify:
Tienda online → Temas → Personalizar → Configuración del tema → Colores: elige un color de texto más oscuro para esa sección.Wix:
Editor → clic en el texto → Ajustes de texto → Color: elige un tono más oscuro. Wix también tiene un Asistente de accesibilidad (Sitio → Accesibilidad) que marca el contraste.Squarespace:
Diseño → Estilos del sitio → Colores: elige un color de texto más oscuro para el tema de esa sección.Webflow:
Designer → selecciona el texto → Estilo → Tipografía → Color. El panel de auditoría de Webflow también marca el contraste.Odoo:
Sitio web → Editar → Tema (pincel) → Colores: oscurece el color de texto de ese bloque.
¿No quieres arreglarlo a mano, elemento por elemento?
Pon tu dirección. En un minuto tienes cada fallo de la página explicado y el código corregido, ya probado en un navegador, de cada elemento que se puede arreglar. Gratis, sin cuenta.
El reporte completo cubre las páginas que importan (pago, carrito, contacto) y todas las correcciones, por $15 una vez o con el monitoreo.
Errores relacionados
- El contraste podría ser mayor color-contrast-enhanced
- Enlaces que parecen texto normal link-in-text-block
- El zoom está bloqueado en el celular meta-viewport
- Botones demasiado pequeños para tocar target-size
- Espaciado de texto bloqueado avoid-inline-spacing
- Orientación de pantalla bloqueada css-orientation-lock
Las pruebas automáticas cubren cerca de la mitad de los criterios WCAG; una declaración de conformidad completa requiere además revisión manual. Información técnica, no asesoría legal.