La respuesta corta

El contraste de color es la diferencia de luminosidad entre el texto y su fondo. El nivel AA de WCAG pide una proporción de al menos 4,5:1 para el texto normal y de 3:1 para el texto grande (24 px, o unos 19 px en negrita) y para botones, iconos y bordes de formularios. Prueba cada par con un verificador de contraste y oscurece el texto o aclara el fondo hasta que pase.

Puntos clave

  • El texto normal necesita 4,5:1. El texto grande necesita 3:1.
  • Botones, iconos y bordes de campos necesitan 3:1 frente a lo que tienen al lado.
  • El texto gris claro sobre blanco es el culpable número uno.
  • Revisa también el texto sobre fotos en el móvil, donde los velos suelen desaparecer.
  • Corrígelo una vez en tu sistema de diseño y quedará corregido en todas partes.

El informe WebAIM Million 2026 encontró texto con poco contraste en el 83,9 % del millón de páginas de inicio más visitadas. Perjudica a las personas con baja visión, daltonismo o vista cansada por la edad, y a cualquiera que lea el móvil bajo el sol. La buena noticia: suele arreglarse con unas pocas líneas de CSS.

Las reglas en un minuto

  • 4,5:1 para el texto normal (WCAG 1.4.3, nivel AA).
  • 3:1 para el texto grande: 24 px o más, o unos 19 px o más en negrita.
  • 3:1 para los elementos no textuales que hay que ver para usar la página: contornos de botones, bordes de campos, iconos e indicadores de foco (WCAG 1.4.11).
  • Los logos y el texto puramente decorativo están exentos.

La proporción va de 1:1 (blanco sobre blanco) a 21:1 (negro sobre blanco). No hace falta negro puro sobre blanco; un gris oscuro como #333333 sobre blanco da unos 12,6:1, que es muy legible.

Cómo probar, paso a paso

  1. Haz una lista de tus pares de colores

    Anota el texto principal, los encabezados, enlaces, botones, textos de ejemplo, el texto del pie de página y cualquier texto sobre fondos de color o fotos, con el fondo de cada uno.

  2. Prueba cada par

    Usa un verificador gratuito como WebAIM Contrast Checker, o el selector de color de las herramientas de desarrollo de Chrome o Firefox, que muestra la proporción y si pasa o no.

  3. Corrige los fallos en tus estilos

    Oscurece el texto gris (por ejemplo de #999999 a #595959 sobre blanco) o usa un tono más profundo de tu color de marca para el texto. Cámbialo en tu tema o en tus tokens de diseño para que se actualice en todas partes.

  4. Revisa el texto sobre imágenes

    Añade un velo oscuro o un degradado detrás del texto sobre fotos y prueba la parte más clara de la imagen. Revisa en un teléfono, donde el recorte cambia.

  5. Revisa los estados

    Prueba los estados de hover, foco, desactivado y visitado, y el propio contorno de foco, que también necesita 3:1.

  6. Analiza para detectar el resto

    Ejecuta un análisis con comprobaciones en vivo en el navegador para encontrar el bajo contraste que surge de los estilos reales calculados en cada página.

Correcciones que respetan tu marca

No tienes que renunciar a tus colores. La mayoría de las marcas mantiene un color vivo para formas grandes y fondos, y añade un tono más oscuro del mismo color para el texto y los iconos pequeños. Si el azul de tu marca no pasa como texto sobre blanco, prueba un tono dos o tres pasos más oscuro. Tu diseñador apenas lo notará; tus lectores sí.

No uses solo el color para transmitir significado. Un borde rojo en un campo con error también necesita un icono o un mensaje, porque alrededor de 1 de cada 12 hombres tiene alguna forma de deficiencia en la visión del color.

Por qué un escáner ve más que tú

El contraste puede cambiar en cada página: un botón blanco sobre un banner claro, texto gris en un aviso de cookies, un widget de chat de terceros. Accessible Nord comprueba el contraste de dos formas: en el código de la página y en los navegadores de visitantes reales una vez cargados tus estilos, así detecta problemas que una revisión del código por sí sola pasaría por alto.

Después, asegúrate de que las personas vean dónde están cuando usan el teclado: lee cómo probar tu sitio solo con el teclado.

Fuentes

La mayoría de las fuentes son documentos oficiales en inglés.

  1. The WebAIM Million, 2026 report
  2. Understanding WCAG 2.2: Contrast (Minimum) (1.4.3)
  3. Understanding WCAG 2.2: Non-text Contrast (1.4.11)
  4. WebAIM Contrast Checker

Última revisión: .

Preguntas frecuentes

¿Qué es una buena proporción de contraste?

Al menos 4,5:1 para el texto normal y 3:1 para el texto grande para cumplir WCAG AA. Para lecturas largas, apunta más alto, a unos 7:1, que es el nivel AAA.

¿El texto de ejemplo de los campos debe cumplir el contraste?

Sí, si transmite información. Mejor aún, usa una etiqueta visible encima del campo y deja el texto de ejemplo como una pista opcional.

¿El negro puro sobre blanco es lo mejor?

Pasa con facilidad, pero algunas personas con dislexia encuentran cansado un contraste muy alto. Un gris muy oscuro sobre blanco o blanco roto es un buen equilibrio.

Esta guía es información general, no asesoría legal. Para tus obligaciones concretas, consulta con un abogado o con tu regulador.