Comprobador de contraste de color — WCAG AA/AAA
Introduce valores hex de primer plano y fondo para ver la ratio de contraste y cómo encaja con los umbrales WCAG AA / AAA para texto normal y grande. Pillar gris pálido sobre blanco antes del lanzamiento — legible para ti no siempre es legible para todos.
Ratio de contraste: 18.88
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
- Introduce hex de primer plano y fondo
- Lee la ratio y las pistas AA/AAA
- 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 de 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.