Saltar al contenido

Comprueba el contraste — WCAG AA / AAA

Contraste WCAG gratis: prueba hex de primer plano y fondo frente a AA y AAA.Runs locally in your browser; files never leave your device.Runs locally in your bro

Sample text Aa

Ratio de contraste: 3.15:1

AA texto normal (≥4.5)No cumple
AA texto grande (≥3)Cumple
AAA texto normal (≥7)No cumple

Consejo: oscurece el primer plano o aclara el fondo para mejorar el contraste hacia AA.

Privado · Rápido · Gratis

La ratio de contraste es una métrica central de accesibilidad. Números más altos significan texto más claro sobre el fondo. WCAG fija barras distintas para cuerpo frente a encabezados grandes en negrita.

Esto es una comprobación rápida de diseño, no una auditoría completa — el orden de foco, lectores de pantalla y rutas de teclado también importan.

Cuando los colores de marca son muy claros, oscurece el texto o añade una placa de fondo en lugar de pedir a los usuarios que entornen los ojos.

Cómo comprobar

  1. Introduce hex de primer plano y fondo
  2. Lee la ratio y las pistas AA/AAA
  3. Ajusta los colores hasta alcanzar tu objetivo

Qué pillan las comprobaciones de contraste

  • Menos esfuerzo para lectores con baja visión.
  • Menos vueltas de revisión de diseño por grises ilegibles.
  • Los números cierran debates de “creo que está bien”.

Escenarios

  • Etiqueta de botón frente a color de relleno
  • Enlaces del pie en gris claro
  • Texto en modo oscuro sobre paneles tintados

Consejos

  • El texto de cuerpo tiene umbrales más estrictos que tipografía display grande — aún así apunta alto.
  • Los iconos también necesitan contraste discernible.
  • En degradados, muestrea el color que realmente hay detrás del texto.

Referencia

Entrada Salida Nota
Texto oscuro sobre blanco Suele pasar AA Cuerpo típico
Gris claro sobre blanco A menudo falla Oscurece texto o fondo

Preguntas sobre contraste

¿AA frente a AAA?
AAA es más estricto. Muchos productos apuntan a AA como mínimo; AAA cuando se pueda.
¿Qué cuenta como texto grande?
Aproximadamente tamaño regular mayor o negrita a tamaño moderado — la página aplica umbrales habituales.
¿Usuarios daltónicos?
El contraste ayuda, pero no dependas solo del color para transmitir estado.

Herramientas relacionadas