Respuesta corta: En el nivel AA de las WCAG, el texto normal necesita un contraste de 4.5 a 1 o más, y el texto grande, de 3 a 1 o más. Chrome DevTools lo comprueba gratis: su selector de color muestra el contraste de cualquier texto, y CSS Overview lista los textos con poco contraste de la página. Revisa el modo claro y el oscuro, los botones y la letra pequeña, no solo el cuerpo del texto.
Qué piden las WCAG
La norma de la W3C para el contraste mínimo, el nivel AA, pone el mínimo en 4.5 a 1 entre el texto y su fondo. El texto grande, de 18 puntos o de 14 en negrita, necesita al menos 3 a 1. El nivel AAA, más estricto, los sube a 7 a 1 y 4.5 a 1.
Los logos y los nombres de marca no tienen requisito de contraste, y tampoco la decoración ni el texto de un control inactivo. La documentación de Chrome dice que el texto con poco contraste es el problema de accesibilidad más común en la web: en febrero de 2022 lo tenía el 83.9% del millón de portadas más visitadas.
Contraste mínimo según el tipo de texto
| Texto | Nivel AA | Nivel AAA |
|---|---|---|
| Texto normal | Al menos 4.5 a 1 | Al menos 7 a 1 |
| Texto grande: 18 puntos, o 14 en negrita | Al menos 3 a 1 | Al menos 4.5 a 1 |
| Logos y nombres de marca | Sin requisito | Sin requisito |
| Decoración | Sin requisito | Sin requisito |
| Texto de un control inactivo | Sin requisito | Sin requisito |
De las páginas «Understanding» de la W3C para los criterios 1.4.3 y 1.4.6, en inglés, consultadas el 3 de noviembre de 2026.
Cómo revisar el contraste de tu web
- Abre la página en Chrome y abre DevTools.
- Usa CSS Overview o un informe de Lighthouse para listar los textos con poco contraste de la página.
- Inspecciona cada uno y abre el selector de color junto al color del texto para ver el contraste.
- Compáralo con 4.5 a 1, o con 3 a 1 si el texto es grande.
- Si no llega, elige el color que sugiere DevTools más cercano a tu marca.
- Pasa tu web al modo oscuro, si lo tiene, y vuelve a revisar.
- Emula deficiencias visuales en DevTools para ver la página como la ven los visitantes que las tienen.
El contraste es un requisito entre muchos: nuestra guía de accesibilidad web y ADA explica cómo hacer accesible la web de tu negocio. Nuestra guía del call to action explica el tamaño y el contraste de los botones.
Cómo mide el texto de nuestra web
El 3 de noviembre de 2026 leímos el contraste de una de nuestras guías como la ve un visitante, a 1,440 píxeles, en modo claro y oscuro. El cuerpo del texto llega a 17.96 a 1 en modo claro y a 15.83 a 1 en modo oscuro, y los títulos a 19.45 y 16.79 a 1.
Lo más bajo es nuestro botón principal, con 4.67 a 1 en modo claro y 5.17 a 1 en modo oscuro: cumple AA con poco margen. Las líneas de fuentes y las cabeceras de tabla, de 14 píxeles, miden entre 6.45 y 6.98 a 1: cumplen AA y se quedan justo por debajo del 7 a 1 de AAA.
Antes de dar tus colores por accesibles
- El cuerpo del texto llega a 4.5 a 1 o más.
- El texto grande llega a 3 a 1 o más.
- Los botones y los enlaces también cumplen, no solo los párrafos.
- La letra pequeña, los pies de foto y el pie de página cumplen.
- El modo oscuro cumple por sí solo.
- CSS Overview o Lighthouse no listan ningún texto con poco contraste.
Recuerda4.5 a 1 para el texto y 3 a 1 para el texto grande. Revisa cada par de colores que ven tus visitantes, en modo claro y oscuro.
Si quieres arreglar los colores de tu web sin perder tu marca, mira nuestro servicio de diseño web.
Respuestas rápidas sobre el contraste de color
¿Qué contraste de color es bueno?
El nivel AA pone el mínimo en 4.5 a 1 para el texto normal y en 3 a 1 para el texto grande. El nivel AAA los sube a 7 a 1 y 4.5 a 1. Cuanto más alto, más fácil se lee.
¿Qué cuenta como texto grande en las WCAG?
La W3C considera que el texto de 18 puntos, o de 14 puntos en negrita, es lo bastante grande para necesitar menos contraste. En el nivel AA le basta 3 a 1, en lugar del 4.5 a 1 del texto normal.
¿Mi logo debe cumplir el contraste?
No. Las WCAG dicen que el texto que forma parte de un logo o de un nombre de marca no tiene requisito de contraste. Lo mismo vale para la decoración y para el texto de un control inactivo, como un botón desactivado.
¿Cómo compruebo el contraste de color gratis?
Con Chrome DevTools. Inspecciona un texto y abre el selector de color junto a su color: muestra el contraste y si cumple AA o AAA. CSS Overview y Lighthouse listan todos los textos con poco contraste de la página.
¿Tengo que revisar el modo oscuro aparte?
Sí, porque los colores cambian. En nuestra propia guía, el botón principal dio 4.67 a 1 en modo claro y 5.17 a 1 en modo oscuro. El texto del cuerpo pasó de 17.96 a 15.83 a 1.
Fuentes
Consultadas el 3 de noviembre de 2026, en inglés. W3C Web Accessibility Initiative: Understanding Success Criterion 1.4.3: Contrast (Minimum) y Understanding Success Criterion 1.4.6: Contrast (Enhanced). Chrome for Developers: Make your website more readable. Nuestro caso: el contraste del texto de una de nuestras guías a 1,440 píxeles, en modo claro y oscuro, el 3 de noviembre de 2026.