Contraste de colores: la guía para cumplir WCAG en tu web

El contraste entre el texto y su fondo determina si tu web es legible o no, sobre todo para personas con baja visión, daltonismo o cuando hay mucha luz en la pantalla. Además, es un requisito de accesibilidad recogido en las pautas WCAG y exigido por ley en muchos países.

La herramienta Verificador de contraste te dice al instante si una combinación cumple los estándares.

Qué es el ratio de contraste

El ratio de contraste mide la diferencia de luminancia entre dos colores. Va de 1:1 (mismo color, ilegible) a 21:1 (negro puro sobre blanco puro). Cuanto mayor es el número, más legible es el texto.

Niveles AA y AAA de WCAG

Las pautas WCAG 2.1 definen dos niveles:

Nivel	Texto normal	Texto grande
AA (recomendado)	4.5:1	3:1
AAA (reforzado)	7:1	4.5:1

• AA es el objetivo razonable para la mayoría de webs.
• AAA es el nivel máximo, recomendable para contenido crítico o público con baja visión.

Qué se considera “texto grande”

Según WCAG, texto grande es a partir de 18pt (unos 24px) en peso normal, o 14pt (unos 18,66px) en negrita. Al ser más fácil de leer, se le exige menos contraste.

Cómo comprobar tus colores

1. Abre Verificador de contraste.
2. Introduce el color del texto y el del fondo (con el selector o escribiendo el HEX).
3. La herramienta muestra el ratio exacto y si pasa AA y AAA, con una vista previa real.

Consejos para mejorar el contraste

• Oscurece el texto o aclara el fondo (o viceversa) hasta alcanzar al menos 4.5:1.
• Evita gris claro sobre blanco: es uno de los errores más comunes.
• No uses solo el color para transmitir información (añade iconos o texto).
• Comprueba también los estados hover y los enlaces.

Herramientas relacionadas

• Convertir colores entre HEX, RGB y HSL.
• Extraer paleta de colores de una imagen.
• Generador de box-shadow CSS para tus componentes.

Todo se calcula en tu navegador, sin enviar datos a ningún servidor.