Relación de contraste con resultados WCAG 2.2 AA y AAA para texto e interfaz Acepta HEX, RGB, HSL, OKLCH y nombres de color CSS, además de selectores Mezcla los colores transparentes como lo hace el navegador Vista previa con titular, texto, letra pequeña y un botón Sugiere el color más cercano que cumple, cambiando solo la luminosidad

Comprobador de contraste de color - Prueba WCAG AA y AAA

¿Qué es el contraste de color y por qué importa?

La relación de contraste mide la diferencia de luminosidad percibida entre dos colores, de 1:1 (iguales) a 21:1 (negro sobre blanco). Las pautas WCAG 2.2 exigen al menos 4,5:1 para texto normal y 3:1 para texto grande y elementos de interfaz en el nivel AA, y 7:1 y 4,5:1 en el nivel AAA. Uno de cada doce hombres tiene alguna alteración de la visión del color y mucha gente lee el móvil a pleno sol, así que el texto de poco contraste excluye a usuarios reales. Leyes como la Ley Europea de Accesibilidad o la ADA remiten a WCAG AA, lo que convierte el contraste en un requisito legal para muchos sitios.

Funciones

• Relación de contraste con resultados WCAG 2.2 AA y AAA para texto e interfaz
• Acepta HEX, RGB, HSL, OKLCH y nombres de color CSS, además de selectores
• Mezcla los colores transparentes como lo hace el navegador
• Vista previa con titular, texto, letra pequeña y un botón
• Sugiere el color más cercano que cumple, cambiando solo la luminosidad

Instantáneo y privado

Todos los cálculos se hacen en tu navegador. Los colores de diseños sin publicar no se envían a ningún sitio.

Fórmula WCAG 2.2, 100% en el cliente.

Cómo usar: Comprobador de contraste

1
Introduce el color del texto y el del fondo escribiendo cualquier color CSS (#1e293b, rgb(), hsl(), oklch() o un nombre) o con los selectores de color.
2
Lee la relación de contraste. El resultado se trunca, no se redondea hacia arriba, así que 4,49:1 nunca aparece como aprobado.
3
Revisa los cinco resultados WCAG: AA y AAA para texto normal y grande, más 3:1 para componentes como bordes de campos, iconos y anillos de foco.
4
Si alguno falla, mira el color sugerido con el mismo tono y otra luminosidad y pulsa Usarlo, o intercambia los colores para probar la combinación inversa.

Ejemplos prácticos

Texto de marcador gris

El gray-400 de Tailwind (#9ca3af) sobre blanco solo llega a 2,5:1 y no cumple AA. gray-500 (#6b7280) alcanza 4,8:1 y sirve para texto normal.

Color de marca en botones

Un azul de marca claro puede cumplir para textos grandes de botón (3:1) pero no para texto pequeño. Comprueba ambos o oscurece el fondo hasta que el texto blanco llegue a 4,5:1.

Paletas de modo oscuro

El blanco puro sobre negro puro (21:1) puede resultar agresivo. Prueba pares más suaves como #e2e8f0 sobre #0f172a, que siguen superando AAA con unos 14:1.

Bordes de formulario e iconos

La pauta WCAG 1.4.11 pide 3:1 para el borde de los campos y los iconos con significado. Un borde #e5e7eb sobre blanco queda muy por debajo y los campos cuestan de ver.

Preguntas frecuentes

¿Qué se considera texto grande?+

En WCAG, texto de al menos 18 pt (24px) normal o 14 pt (unos 18,66px) en negrita. El texto grande solo necesita 3:1 en AA porque los trazos gruesos se leen mejor.

¿Necesito AA o AAA?+

AA es el objetivo legal habitual para la mayoría de webs y apps. AAA es más estricto y recomendable para lectura extensa, servicios públicos y personas con baja visión.

¿El contraste se aplica a logotipos y botones desactivados?+

No. WCAG exime logotipos, imágenes decorativas y controles inactivos (disabled). Sí cuentan el texto de marcador, los enlaces y los indicadores de foco.

¿Y APCA y WCAG 3?+

APCA es un modelo de contraste más nuevo propuesto para el futuro WCAG 3. Sigue siendo un borrador, así que las relaciones de WCAG 2.2 son las que piden hoy las leyes y auditorías.