¿Qué mide un comprobador de contraste?
Un comprobador de contraste compara la luminancia relativa de un color de primer plano y un color de fondo. El resultado se muestra como una proporción desde 1:1, cuando los colores son visualmente idénticos, hasta 21:1, cuando el negro y el blanco tienen el máximo contraste.
Esta herramienta muestra indicadores de aprobación y rechazo al estilo WCAG para texto normal y texto grande. Es útil para decisiones de diseño tempranas, estados de componentes, tokens de tema y comprobaciones rápidas antes de una revisión de accesibilidad más completa.
Cómo interpretar los resultados
| Check | Proporción mínima | Meaning |
|---|---|---|
| AA texto normal | 4.5:1 | Objetivo común para el texto corporal habitual. |
| AA texto grande | 3:1 | Se aplica al texto más grande o de mayor grosor donde las formas de las letras son más fáciles de leer. |
| AAA texto normal | 7:1 | Objetivo más estricto para texto normal en contextos de alta accesibilidad. |
| AAA texto grande | 4.5:1 | Objetivo más estricto para texto grande. |
Qué no demuestra esta herramienta
Una proporción es una señal fuerte, pero no constituye una auditoría completa de accesibilidad. La legibilidad real también depende de la tipografía, el grosor de la fuente, los estados hover/focus, los estados deshabilitado, los colores circundantes, la calidad de la pantalla y de si el texto aparece sobre imágenes o degradados.
- La transparencia y los degradados requieren una revisión aparte.
- Los iconos pequeños y los trazos finos pueden necesitar un contraste más fuerte que el texto cercano.
- Los colores de la marca pueden aprobar en una combinación y fallar en otra.
- El contraste para el escaneo de QR y el contraste para la legibilidad del texto están relacionados pero no son la misma comprobación.
Formas de mejorar un contraste débil
Oscurecer el primer plano
Para fondos claros, acerque el color del texto a un neutro más oscuro o a una tonalidad de la marca más intensa.
Aclarar el fondo
Pequeños cambios de fondo pueden hacer que un color de marca pase sin cambiar el token de primer plano.
Aumentar el tamaño o el grosor del texto
El texto grande o de mayor grosor tiene un umbral AA más bajo, pero aún necesita suficiente separación visual.
Comprobar cada estado
Los estados hover, focus, deshabilitado, seleccionado y de error suelen usar pares de colores diferentes.
Preguntas frecuentes
¿Es esto una auditoría completa de cumplimiento de WCAG?
No. Calcula los umbrales de contraste al estilo WCAG para pares de colores. Una revisión completa también verifica el diseño, el comportamiento de teclado, la semántica, los estados de foco, las alternativas textuales y la tipografía realmente renderizada.
¿Qué se considera texto grande?
La guía WCAG considera texto grande aproximadamente 18 pt de texto normal o 14 pt en negrita y superior. En trabajo web, verifique el tamaño y el peso realmente renderizados, no solo la etiqueta de diseño.
¿Puedo usar esto para colores transparentes?
Este comprobador compacto utiliza colores sRGB opacos. Si su interfaz usa transparencia, mezcle primero el primer plano y el fondo renderizados finales y luego verifique ese par resultante.
¿Pasar AA significa que el diseño siempre es legible?
No siempre. Las fuentes muy delgadas, las etiquetas de interfaz pequeñas, los fondos recargados y las pantallas de baja calidad pueden seguir haciendo que el texto sea difícil de leer. Trate la proporción como una señal importante.
¿Esto es lo mismo que el contraste de códigos QR?
No. El contraste de códigos QR afecta la fiabilidad del escáner, mientras que esta herramienta se centra en los umbrales de legibilidad del texto. Las matemáticas están relacionadas, pero la decisión práctica es diferente.