Herramienta gratuita

Comprobador de contraste de colores

Con este comprobador de contraste gratis ves si el color de tu texto se lee bien sobre tu color de fondo. Introduce dos colores y obtendrás la relación de contraste y si la combinación cumple WCAG 2.2 nivel AA y AAA, para texto normal, texto grande y botones.

Gratis, sin cuenta

¿Cuánto contraste necesita mi texto?

Según WCAG 2.2 nivel AA, el texto normal necesita una relación de contraste de al menos 4,5:1 con su fondo, y el texto grande al menos 3:1. Los botones, iconos y bordes de formulario también necesitan 3:1 frente a los colores de alrededor. No se redondea, así que 4,49:1 no basta para texto normal.

Qué calcula el comprobador de contraste

El comprobador compara la luminancia relativa de los dos colores, tal como la define WCAG, y da una relación entre 1:1 (sin contraste) y 21:1 (negro sobre blanco). Después compara esa relación con cinco umbrales y muestra una muestra en vivo de un título y un texto con tus colores.
  • AA, texto normal: al menos 4,5:1
  • AA, texto grande: al menos 3:1
  • AAA, texto normal: al menos 7:1
  • AAA, texto grande: al menos 4,5:1
  • Botones, iconos y bordes de formulario: al menos 3:1

Cómo leer el resultado

Verde significa que la combinación cumple el nivel AA para todo el texto. Puedes usarla en párrafos, menús y botones. Naranja significa que la relación está entre 3:1 y 4,5:1. Solo basta para texto grande: al menos 18 puntos (unos 24 píxeles) o 14 puntos en negrita (unos 18,5 píxeles). Úsala en títulos grandes, no en párrafos, precios ni etiquetas de formulario. Rojo significa que la relación está por debajo de 3:1. El texto en estos colores cuesta de leer para mucha gente, sobre todo en el móvil al sol. Oscurece un color o aclara el otro hasta que el resultado sea verde.

Errores habituales con el contraste

  • Texto gris claro sobre blanco porque queda elegante
  • Texto blanco sobre un color de marca claro, como amarillo, verde claro o naranja
  • Usar el texto de ejemplo del campo como única etiqueta del formulario
  • Texto sobre una foto sin una capa oscura encima
  • Bordes de botones e iconos que se confunden con el fondo
  • Pensar que la guía de marca es una excepción: solo los logotipos están exentos

Qué hacer después

Comprueba los colores que usa de verdad tu web: texto, enlaces, botones, precios, campos de formulario y el pie de página. Si un color de marca no pasa, no tienes que eliminarlo. Úsalo como fondo de zonas grandes con texto oscuro encima, o usa un tono más oscuro del mismo color para textos y botones. Después del cambio, vuelve a mirar la página en el móvil al aire libre. Un buen contraste ayuda a todos los visitantes, no solo a las personas con baja visión.

Desde el 28 de junio de 2025, la Ley Europea de Accesibilidad obliga a muchas tiendas y servicios online de la UE a cumplir requisitos de accesibilidad que remiten a WCAG nivel AA. La falta de contraste es una de las carencias más habituales.

Cómo usar el comprobador de contraste

  1. Introduce el color del texto

    Elige el color con el selector o escribe un código hexadecimal como #1e3346.

  2. Introduce el color de fondo

    Usa el color que hay justo detrás del texto o botón. Intercambia los colores con un clic si hace falta.

  3. Lee la relación y las pruebas

    Mira la relación y qué niveles AA y AAA se cumplen para texto normal, texto grande y botones.

  4. Ajusta hasta que cumpla

    Oscurece el color oscuro o aclara el claro y mira la muestra hasta que veas verde.

Preguntas sobre el contraste de color

¿Qué es una buena relación de contraste?
Para texto normal busca al menos 4,5:1, que es el nivel AA de WCAG. Con 7:1 o más cumples el nivel AAA. Negro sobre blanco es el máximo, 21:1.
¿Qué se considera texto grande?
WCAG considera texto grande el de al menos 18 puntos, unos 24 píxeles CSS, o al menos 14 puntos en negrita, unos 18,5 píxeles.
¿Los logotipos tienen que cumplir las reglas de contraste?
No. El texto que forma parte de un logotipo o nombre de marca no tiene requisito de contraste, igual que los controles desactivados y el texto puramente decorativo.
¿Mi tienda online tiene que cumplir estas reglas?
Desde el 28 de junio de 2025 se aplica la Ley Europea de Accesibilidad (European Accessibility Act) a muchas tiendas online y servicios de la UE, y remite al nivel AA de WCAG. Las microempresas que prestan servicios están exentas. Revisa la normativa de tu país para saber qué te aplica.
¿Es obligatorio el nivel AAA?
Que sepamos, ninguna ley exige AAA para toda una web. AA es el objetivo habitual. AAA es un buen paso extra para textos largos y para un público con muchas personas mayores.

Herramientas y guías relacionadas

Una web con tus colores que se lee bien

Las plantillas de SitePack siguen tus colores de marca. Crea tu web desde 15 € al mes con facturación anual, con alojamiento europeo y SSL incluidos. Pruébalo gratis 14 días, sin datos de pago.

Prueba 14 días gratis Ver precios
Preferencias de cookies

Las cookies nos ayudan a proporcionar, proteger y mejorar nuestros productos y servicios. Al utilizar nuestro sitio web, acepta nuestro uso de cookies.