Test de contraste de color WCAG AA/AAA

En este test de contraste puedes comprobar si la combinación de tus colores cumple los niveles de accesibilidad WCAG 2.1 AA y AAA para texto, botones y enlaces. Así te aseguras de que tu diseño no solo se ve bonito, sino que también se puede leer sin esfuerzo en todo tipo de pantallas y condiciones.

Solo tienes que elegir un color de fondo y un color de texto, indicar dónde lo vas a usar y la herramienta calculará automáticamente el ratio de contraste y te dirá si aprueba o no las pautas de accesibilidad. Es una forma rápida de evitar errores de legibilidad y de cuidar a todos tus usuarios, incluidos quienes tienen baja visión o diferentes tipos de daltonismo.

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

El contraste de color es la diferencia de luminosidad entre un texto y su fondo (o entre dos elementos de la interfaz). Cuanto mayor es esa diferencia, más fácil resulta leer el contenido, especialmente en pantallas pequeñas, al sol o para personas con visión reducida.

Las pautas de accesibilidad WCAG insisten en mantener un contraste suficiente porque un color que “se ve bien” para ti puede ser casi ilegible para muchos usuarios. Un contraste pobre provoca cansancio visual, errores de lectura y, en el peor de los casos, que una parte de tu audiencia no pueda usar tu web con comodidad.

Usar un buen contraste no es solo un tema técnico o legal: también mejora la experiencia de usuario, aumenta el tiempo de permanencia y reduce abandonos en botones importantes como “Comprar” o “Enviar”. Por eso conviene comprobar siempre tus combinaciones clave antes de llevarlas a producción.

Niveles de contraste WCAG AA y AAA

Las pautas WCAG 2.1 definen distintos niveles mínimos de contraste según el tipo y tamaño de texto. Para texto “normal” (hasta unos 18 px aprox.) recomiendan un contraste mínimo de 4.5:1 para nivel AA y de 7:1 para nivel AAA.

En texto grande (títulos, botones con tipografía grande o muy gruesa), el requisito es un poco más flexible: basta con 3:1 para AA y 4.5:1 para AAA. La idea es que cuanto más grande y grueso es el texto, menos contraste necesitas para que siga siendo legible para la mayoría de usuarios.

Además, las WCAG también recomiendan un contraste mínimo de 3:1 para componentes de la interfaz (como bordes de botones, campos de formulario o iconos importantes) respecto al fondo que los rodea. Así se evita que controles clave “desaparezcan” o resulten difíciles de localizar, sobre todo en pantallas de móvil.

Cómo usar este test paso a paso

1. Elige un color de fondo: escribe el código (HEX, RGB o HSL) o usa el selector para probar distintas opciones hasta acercarte a tu diseño real.
2. Elige un color de texto: introduce el color que utilizarás para textos, botones o enlaces sobre ese fondo y ajústalo si tienes variantes (hover, active, etc.).
3. Indica dónde quieres comparar: selecciona si estás probando un texto normal, un botón o un enlace, para que el resultado se interprete en el contexto adecuado.
4. Haz clic en «¡Comprobar!» y revisa el ratio de contraste que se muestra junto con el nivel que alcanza (si aprueba AA, AAA o ninguno).
5. Si la combinación no cumple el nivel que necesitas, modifica ligeramente uno de los colores (oscureciendo o aclarando) y vuelve a comprobar hasta encontrar un contraste suficiente que siga encajando con tu paleta.

Ejemplos prácticos de uso

Aquí tienes algunas situaciones típicas en las que conviene comprobar el contraste antes de publicar tu diseño:

• Botón de compra en ecommerce: asegúrate de que el texto del botón («Comprar», «Añadir al carrito») tenga un contraste suficiente con el color de fondo del botón para que destaque claramente.
• Texto de párrafo en un blog: los textos largos necesitan un contraste cómodo de leer, especialmente en móviles y pantallas con poco brillo.
• Enlaces dentro de un texto: si distingues los enlaces solo por color, el contraste con el texto normal y con el fondo debe ser alto para que no pasen desapercibidos.
• Texto sobre una imagen: cuando colocas texto encima de fotos o fondos complejos, prueba colores alternativos o añade un fondo sólido/semitransparente para aumentar el contraste.

Errores típicos y cómo corregirlos

• Colores de marca demasiado claros: tonos muy claros sobre fondo blanco o muy claro suelen dar un contraste insuficiente. Puedes mantener la personalidad de marca oscureciendo un poco el color de texto o del fondo.
• Gris sobre gris: textos pequeños en gris medio sobre fondos grises son uno de los problemas de legibilidad más habituales. Aumenta el contraste o el tamaño de la tipografía.
• Elegir solo por estética: un color que “se ve bonito” en una pantalla concreta puede ser ilegible en otras condiciones. Comprueba siempre tus combinaciones clave con una herramienta de contraste.
• No distinguir estados importantes: botones, mensajes de error o avisos tienen que destacar claramente del resto de la interfaz; si el contraste es pobre, pasan desapercibidos.

Preguntas frecuentes sobre contraste de color

¿Qué diferencia hay entre nivel AA y AAA?

El nivel AA marca unos mínimos de contraste razonables para la mayoría de usuarios, mientras que el nivel AAA es más exigente y está pensado para situaciones donde se necesita una legibilidad máxima (por ejemplo, textos pequeños o públicos con necesidades especiales).

¿Por qué mi combinación no aprueba para texto normal pero sí para texto grande?

Las pautas WCAG permiten un contraste algo menor en textos grandes porque son más fáciles de leer. Una combinación puede ser válida para títulos o botones grandes, pero no para párrafos de texto pequeño.

¿Este test es suficiente para cumplir toda la accesibilidad WCAG?

No. El contraste de color es solo uno de los criterios de accesibilidad. También influyen la estructura del contenido, el uso correcto de encabezados, los textos alternativos en imágenes, la navegación por teclado, etc.

¿Qué hago si mi color de marca es muy claro?

Puedes mantener tu color de marca para elementos decorativos y usar una versión más oscura para textos y botones, o combinarlo con fondos que generen un contraste suficiente. Así conservas tu identidad visual sin sacrificar legibilidad.

Contraste y normativa de accesibilidad

El contraste de color forma parte de las pautas de accesibilidad WCAG 2.1, que sirven como referencia internacional para crear experiencias digitales más inclusivas. Cumplir estos niveles no solo ayuda a personas con baja visión o daltonismo, también mejora la experiencia general de todos los usuarios.

Además, en muchos países y regiones (como la Unión Europea) la accesibilidad digital está cada vez más regulada, especialmente en administraciones públicas y determinados servicios. Utilizar herramientas como este test de contraste es un primer paso para acercar tus diseños a esos estándares.

Qué hacer después de comprobar tu contraste

Una vez tengas claras las combinaciones de color que funcionan, puedes seguir afinando tu diseño con otras herramientas de Color;Code.

• Generar una paleta de colores completa que respete el contraste y encaje con tu marca.
• Probar tus colores en el simulador de daltonismo y ver cómo los perciben personas con distintos tipos de visión.
• Jugar a “Adivina el código” para entrenar tu ojo mientras te acostumbras a leer códigos HEX, RGB y HSL.