Comprobador de contraste de color

Introduce un color de texto y uno de fondo para ver su relación de contraste y si cumplen WCAG AA y AAA. Si no cumplen, te damos el color más cercano que sí lo hace.

  • Gratis
  • Sin registro
  • Funciona en tu navegador
contrast-checker
Relación de contraste —

Ejemplo de texto grande

Este es un texto normal de 16 píxeles, el tamaño que usan la mayoría de párrafos.

El texto pequeño de 12 píxeles es el más difícil de leer.

Borde de botón o icono

100 % privado — los colores se calculan en tu navegador y no se envía nada a ningún sitio.

Siguiente paso

Sigue con tu resultado en otra herramienta. No se sube nada.

Cómo funciona

Introduce dos colores

Elígelos con el selector o escribe cualquier color CSS: hexadecimal, rgb(), hsl() o un nombre.

Lee la relación

Ves la relación de contraste y si cumple o no cada nivel de WCAG, con una vista previa en directo.

Aplica un arreglo

Si no cumple, elige el color sugerido: mantiene el mismo tono y solo cambia la luminosidad.

¿Qué relación de contraste exige WCAG?

Las Pautas de Accesibilidad para el Contenido Web (WCAG) miden el contraste como una relación entre el brillo de dos colores, desde 1:1 (colores idénticos) hasta 21:1 (negro sobre blanco). Cuanto más alta es, más fácil se lee el texto, sobre todo para personas con baja visión o daltonismo, o para cualquiera que lea el móvil a pleno sol. Los umbrales son:

  • AA, texto normal: 4,5:1. Es el nivel que piden la mayoría de leyes y contratos.
  • AA, texto grande: 3:1. Grande significa al menos 24 px, o 18,66 px si va en negrita.
  • AAA, texto normal: 7:1, y 4,5:1 para texto grande. Es el nivel más estricto.
  • Componentes de interfaz y gráficos: 3:1. Incluye bordes de botones, contornos de campos de formulario, iconos y elementos de gráficos que transmiten información.

Por qué el texto gris claro suspende siempre

A los diseñadores les encanta el texto gris suave sobre blanco, y es el fallo más común. El gris #999999 sobre blanco tiene una relación de solo 2,85:1. Incluso #777777, que se lee perfectamente, obtiene 4,48:1 y se queda a un pelo del AA, mientras que #767676 aprueba con 4,54:1. Esa diferencia de un solo paso es la razón de que un número exacto valga más que juzgar a ojo.

Lo que hace esta herramienta y otras no

  • Acepta cualquier color CSS, no solo hexadecimal: nombres, rgb(), hsl() y formatos modernos. Los interpreta tu navegador, así que lo que escribes es lo que se calcula.
  • Si un color tiene transparencia, se mezcla con el fondo antes de medir, que es como lo ve realmente el lector.
  • Nunca redondea hacia arriba cruzando un umbral. Un valor de 4,496 se muestra como 4,49 y no cumple, porque WCAG no permite redondear hacia arriba para llegar al mínimo.
  • Cuando un par no cumple, sugiere el color más cercano que sí cumple cambiando solo la luminosidad, de modo que se conserva el tono de tu marca.

Accesibilidad y ley

En Europa, el Acta Europea de Accesibilidad se aplica a muchos servicios al consumidor desde junio de 2025 y remite a la norma EN 301 549, basada en WCAG 2.1 nivel AA. Los sitios y aplicaciones del sector público español están cubiertos por el Real Decreto 1112/2018 con la misma base, y las reclamaciones de accesibilidad en Estados Unidos suelen juzgarse según WCAG AA. Esta herramienta es una ayuda de diseño y no constituye asesoramiento legal.

Límites que conviene conocer

La fórmula de WCAG es una simplificación de cómo ven las personas. No juzga el texto sobre fotos o degradados (mide el peor punto), ignora el grosor y el tamaño de la letra más allá de la regla del texto grande, y puede ser demasiado generosa con los fondos oscuros. Los logotipos y los controles desactivados están exentos de estas reglas.

Preguntas frecuentes

¿Qué relación de contraste necesito en mi web?
Para texto normal, al menos 4,5:1 para cumplir el nivel AA de WCAG, que es el estándar que usan la mayoría de normativas. El texto grande y los componentes de interfaz necesitan 3:1. El nivel AAA pide 7:1 para texto normal.
¿Qué se considera texto grande?
El texto de al menos 24 píxeles (18 puntos) en grosor normal, o de al menos 18,66 píxeles (14 puntos) en negrita. Todo lo más pequeño es texto normal y necesita la relación más alta.
¿Por qué 4,49:1 no cumple si está tan cerca de 4,5:1?
WCAG define los umbrales de forma exacta y no permite redondear hacia arriba. Por ese motivo esta herramienta nunca redondea una relación hacia arriba cruzando un mínimo, así que un par que no cumple nunca se muestra como si cumpliera.
¿Puedo usar colores que no sean hexadecimales?
Sí. Puedes escribir colores con nombre como navy, rgb(31, 41, 55), hsl(215 28% 17%) y otros formatos CSS. Si un color tiene transparencia, se mezcla antes con el fondo.
¿Los logotipos y los botones desactivados necesitan contraste?
No. WCAG exime a los logotipos y a los componentes de interfaz inactivos. El texto puramente decorativo también está exento. Todo lo que un usuario necesita leer o manejar debe cumplir.
¿Cómo compruebo un texto colocado sobre una imagen o un degradado?
Mide el texto contra la parte más clara o más oscura del fondo que atraviesa, la que sea peor. Añadir un panel sólido o semitransparente detrás del texto es la solución fiable.
¿Es lo mismo que el nuevo método de contraste de WCAG 3?
No. Esta herramienta usa la relación de WCAG 2, la que exigen las leyes y estándares actuales. WCAG 3 sigue siendo un borrador y propone un método distinto, llamado APCA.

Más herramientas

Otras utilidades que también funcionan sin salir de tu navegador.

Comprobar una paleta en escala de grisesComprueba si tu paleta de color sigue funcionando al convertirla a escala de grises. Extractor de colores de marcaObtén los colores dominantes de un logo o foto como códigos hex listos para usar. Generador de paletas de colorCrea una paleta de color a juego a partir de un color base, en seis esquemas clásicos. Sacar el color de una imagenHaz clic en cualquier punto de una foto y obtén su color exacto en hex, RGB y HSL. Ajustar un color accesibleAjusta un color para que cumpla el contraste WCAG sobre un fondo, conservando su tono. Simulador de daltonismoMira cómo se ve una imagen para alguien con daltonismo, una junto a otra.