Herramienta gratis · Accesibilidad
Verificador de contraste de color
Compara aquí mismo un color de texto con un color de fondo según WCAG 2.2, o ingresa la dirección de una página para encontrar todos los textos por debajo del contraste mínimo, con sus colores medidos y el color más cercano que cumple.
Calculadora de contraste
Ingresa un color de texto y un color de fondo. Todo se calcula en tu navegador.
Así se ve el texto normal a 16 píxeles.
Texto grande a 24 píxeles
El contorno de un botónRelación de contraste4.54:1
| Texto normal, AAWCAG 1.4.3, requiere 4.5:1 | Cumple |
|---|---|
| Texto grande, AAWCAG 1.4.3, requiere 3:1 | Cumple |
| Texto normal, AAAWCAG 1.4.6, requiere 7:1 | No cumple |
| Texto grande, AAAWCAG 1.4.6, requiere 4.5:1 | Cumple |
| Íconos, bordes y campos de formularioWCAG 1.4.11, requiere 3:1 | Cumple |
Los colores de texto más cercanos que cumplen sobre este fondo
Se considera texto grande el de al menos 24 píxeles, o 18.66 píxeles en negritas. Las relaciones se redondean hacia abajo, así que 4.499:1 aparece como 4.49:1 y no cumple, tal como lo pretende WCAG.
O analiza una página para encontrar texto con poco contraste
Gratis. Revisa la dirección que ingresas en unos 20 segundos.
Qué revisa esta herramienta
La relación WCAG de cualquier par de colores
La calculadora usa la fórmula de luminancia relativa de las definiciones de WCAG 2.2 y muestra el resultado para texto normal, texto grande y componentes de la interfaz, en los niveles AA y AAA. Funciona en tu navegador.
Un color que cumple, ya calculado
Cuando un par no cumple, busca el color de texto más cercano del mismo tono que alcanza 4.5:1 o 7:1, para que cambies tu diseño lo menos posible.
Todos los textos con poco contraste de una página
El análisis de la página ejecuta la regla color-contrast de axe-core en un navegador Chrome real y enumera cada elemento que no cumple con su color de texto, su color de fondo, su tamaño de fuente y su relación.
Agrupados por par de colores
Las fallas se agrupan por color de texto y de fondo, porque un solo cambio en un color del tema suele corregir todos los elementos que lo usan.
El umbral correcto para el texto grande
El texto de al menos 24 píxeles, o de 18.66 píxeles en negritas, necesita 3:1 en lugar de 4.5:1. El análisis aplica a cada elemento el umbral que le corresponde según su tamaño y su grosor calculados.
Lo que no pudo medir, y por qué
El texto sobre imágenes, degradados o elementos superpuestos aparece por separado con el motivo, para que sepas exactamente qué revisar a simple vista.
Qué no puede revisar
- Medir texto sobre fotos, degradados o video. El software no puede saber qué parte de una imagen queda detrás de cada letra, así que estos casos se enumeran para que los revises.
- Revisar los estados hover, foco u otros. El análisis ve la página tal como se carga; revisa esos colores con la calculadora.
- Analizar los íconos, los bordes y los campos de formulario de la página según WCAG 1.4.11. La calculadora muestra el resultado de 3:1 para cualquier par que ingreses.
- Leer texto que forma parte de una imagen, como un banner con las palabras integradas en la propia imagen.
- Probar más páginas que la que ingresas. El análisis gratuito completo prueba hasta cinco páginas clave.
Por qué es importante
El bajo contraste es la falla de accesibilidad más común en la web. El análisis de WebAIM de 2026 sobre el millón de páginas de inicio más visitadas encontró texto con poco contraste en el 83.9% de ellas, con un promedio de 34 casos por página.
El texto tenue es difícil de leer para las personas con baja visión o con alteraciones en la percepción del color, y para cualquiera que use el celular bajo el sol. El criterio de conformidad 1.4.3 de WCAG 2.2, de nivel AA, fija el mínimo en 4.5:1 para el texto normal y en 3:1 para el texto grande.
También es uno de los problemas más baratos de corregir: en la mayoría de los sitios, unos pocos colores del tema causan casi todas las fallas, y al cambiarlos se corrigen todas las páginas a la vez.
Cómo interpretar los resultados
- Relación de contraste
- De 1:1 (el mismo color dos veces) a 21:1 (negro sobre blanco). Las relaciones se redondean hacia abajo, así que un par que muestra 4.49:1 no alcanza el mínimo de 4.5:1.
- Texto normal, AA (4.5:1)
- El mínimo para el texto del cuerpo, los enlaces, las etiquetas y el texto de los botones según WCAG 1.4.3.
- Texto grande, AA (3:1)
- Para texto de al menos 24 píxeles, o de 18.66 píxeles en negritas. WCAG define el texto grande como el de 18 puntos, o 14 puntos en negritas.
- AAA (7:1 y 4.5:1)
- El nivel mejorado de WCAG 1.4.6. No se necesita para la conformidad AA, pero ayuda a más lectores.
- Íconos, bordes y campos de formulario (3:1)
- WCAG 1.4.11 pide 3:1 frente a los colores adyacentes para las partes de los controles y de los gráficos que las personas necesitan ver para usarlos.
- Texto que no cumple
- Cada elemento que el análisis midió por debajo de su umbral, con su selector, sus colores, su tamaño y su relación. Abre uno para ver su marcado y, cuando está disponible, una captura de pantalla.
- Por revisar a simple vista
- Texto que axe-core no pudo medir, con el motivo, por ejemplo una imagen o un degradado detrás.
Cómo corregir los problemas más comunes
Texto gris sobre blanco
#767676 es aproximadamente el gris más claro que alcanza 4.5:1 sobre blanco (4.54:1). Los grises más claros, como #999999 (2.84:1), son una causa común de fallas en pies de página, pies de foto, textos de marcador de posición y precios.
Texto blanco sobre un botón del color de la marca
Si el texto blanco sobre el color de tu marca no cumple, oscurece unos cuantos tonos el fondo del botón o usa texto oscuro. Revisa también los colores de hover y de foco, porque muchas veces son más claros.
Texto de marcador de posición en formularios
El texto de marcador de posición (placeholder) sigue siendo texto y necesita 4.5:1. Mejor aún, usa una etiqueta visible arriba del campo para que el marcador de posición no sea la única instrucción.
Texto sobre imágenes y carruseles
Pon el texto sobre un fondo sólido o semitransparente, o agrega una capa oscura a la imagen, y después revisa la parte más clara de la imagen que queda detrás del texto.
Etiquetas de oferta y letra pequeña
El texto de los controles deshabilitados está exento del 1.4.3, pero las etiquetas de oferta, los precios y la letra pequeña legal no. Suelen ser el texto más tenue de las páginas de una tienda.
Preguntas sobre esta herramienta
¿Qué relación de contraste exige WCAG?
Para el nivel AA, 4.5:1 para el texto normal y 3:1 para el texto grande (criterio de conformidad 1.4.3), y 3:1 para los componentes de la interfaz y los gráficos con significado (1.4.11). El nivel AAA pide 7:1 y 4.5:1 (1.4.6).
¿Qué se considera texto grande?
WCAG define el texto a gran escala como el de al menos 18 puntos, o 14 puntos en negritas. En píxeles CSS, eso equivale a unos 24px, o 18.66px en negritas.
¿Los logotipos tienen que cumplir el contraste mínimo?
No. WCAG 1.4.3 exime los logotipos y el texto que forma parte de un logotipo o de un nombre de marca, así como el texto puramente decorativo y el texto de los controles inactivos.
¿Por qué el análisis deja para revisión el texto sobre una imagen?
axe-core mide colores planos. Cuando detrás del texto hay una imagen, un degradado u otro elemento, no puede saber qué colores se encuentran, así que marca el elemento para que lo revise una persona en lugar de adivinar.
¿Necesito un contraste AAA?
AAA no es obligatorio para la conformidad de nivel AA, y el W3C no recomienda exigir AAA para sitios web completos. Aun así, alcanzar 7:1 en el texto del cuerpo es una buena práctica cuando tu diseño lo permite.
¿APCA forma parte de WCAG?
No. APCA es un método de contraste distinto que se ha discutido para WCAG 3, que todavía es un borrador. Hoy la conformidad se mide con la relación de WCAG 2 que calcula esta herramienta.
Fuentes
- W3C: Comprender el criterio de conformidad 1.4.3 Contraste (mínimo) de WCAG 2.2(se abre en una pestaña nueva)
- W3C: Comprender el criterio de conformidad 1.4.6 Contraste (mejorado)(se abre en una pestaña nueva)
- W3C: Comprender el criterio de conformidad 1.4.11 Contraste no textual(se abre en una pestaña nueva)
- W3C: Definición de luminancia relativa en WCAG 2.2(se abre en una pestaña nueva)
- Deque: regla color-contrast de axe-core(se abre en una pestaña nueva)
- WebAIM: The WebAIM Million (2026)(se abre en una pestaña nueva)
Herramientas relacionadas
- AccesibilidadVerificador de accesibilidad webPrueba tu sitio web con WCAG 2.2 A y AA en un navegador real y ve cada barrera con el elemento, la página y por qué es importante.Abrir la herramienta
- AccesibilidadVerificador de texto alternativoEnumera todas las imágenes de una página con su texto alternativo y descubre cuáles no lo tienen, cuáles son decorativas y cuáles lo tienen pero no ayuda.Abrir la herramienta
- AccesibilidadVerificador WCAG 2.2Revisa cada criterio de conformidad de WCAG 2.2 de nivel A y AA en tu sitio: fallido, requiere revisión, sin fallas automáticas o verificación manual.Abrir la herramienta
¿Necesitas las correcciones, no solo los hallazgos?
El Reporte de Accesibilidad ($174, pago único) parte del análisis gratuito completo y agrega más páginas, el cambio que debes hacer para cada hallazgo, un PDF y reevaluaciones para verificar tus correcciones.