Contrast checker y comprobador de contraste de color
El Verificador de contraste de color es un contrast checker que calcula la relación de contraste entre el color de texto y el de fondo según las pautas WCAG 2.1. Permite introducir códigos HEX o utilizar el cuentagotas para evaluar al instante los cuatro umbrales de accesibilidad AA y AAA para texto normal y grande. Todo el proceso se ejecuta localmente en tu navegador sin registro de usuario ni envío de datos a servidores externos.
Cómo utilizar el comprobador de contraste de color
Para analizar la relación entre dos tonos, solo necesitas definir el color de texto y el de fondo en la herramienta superior:
- Escribe un código hexadecimal de 3 o 6 dígitos en la casilla del color de texto o en la del fondo. También puedes pulsar la muestra de color para desplegar el cuentagotas o selector de color nativo de tu dispositivo.
- Observa la previsualización del texto y la cifra del ratio, calculada automáticamente según la fórmula de luminancia relativa del W3C.
- Comprueba los indicadores de evaluación para verificar si la combinación alcanza las exigencias AA o AAA.
- Pulsa el botón Intercambiar colores si quieres invertir la asignación de primer plano y fondo.
Contraste texto y fondo según las pautas WCAG 2.1
Las pautas WCAG 2.1 establecen dos niveles de conformidad para el texto en entornos digitales. El nivel AA requiere un ratio de al menos 4,5:1 para texto normal y de 3,0:1 para texto grande. El nivel AAA demanda una exigencia superior de 7,0:1 para texto normal y 4,5:1 para texto grande.
Se considera texto grande aquél que tiene un tamaño de al menos 18 pt (24 px) en peso regular o 14 pt (18,66 px) en negrita. Si la combinación cumple el criterio evaluado, la herramienta muestra la etiqueta Pasa.
Contrast checker color y compatibilidad con códigos HEX
Este contrast checker color acepta valores hexadecimales de 3 o 6 dígitos (compuestos por caracteres de 0 a 9 y de A a F). Puedes copiar códigos directamente desde tu herramienta de diseño o archivo CSS, ya que el campo ignora el carácter # inicial y descarta cualquier símbolo innecesario.
Dado que no requiere enviar archivos ni conectar con un servidor, la actualización de datos es inmediata y totalmente privada.
Diferencias con un contrast checker de WebAIM
A diferencia de utilidades tradicionales como el contrast checker de WebAIM o el comprobador de contraste de color de WebAIM, esta herramienta muestra la vista previa del texto y los cuatro indicadores AA/AAA a la vez sin necesidad de recargar la página ni pulsar botones de envío.
Esta inmediatez facilita la tarea de medir contraste de color y medir contraste de colores de forma fluida mientras ajustas la paleta de un proyecto.
Importancia del contraste colores accesibilidad
Mantener un adecuado contraste colores accesibilidad garantiza que el texto resulte legible para personas con daltonismo o baja visión. Además, mejora la usabilidad general cuando se navega desde pantallas móviles en entornos muy iluminados.
Usar este recurso de contraste de color online durante la fase gráfica ayuda a corregir problemas de legibilidad antes de pasar el proyecto a maquetación.
Preguntas frecuentes
¿Cuál es el ratio de contraste mínimo para cumplir WCAG AA?
El ratio de contraste mínimo para cumplir el nivel WCAG 2.1 AA es de 4,5:1 para texto normal y de 3,0:1 para texto grande. Esta herramienta evalúa ambos umbrales al instante junto con las exigencias del nivel AAA.
¿Qué ratio de contraste se considera bueno para texto en una web?
Un ratio de contraste de 4,5:1 o superior es la base recomendada para garantizar la legibilidad del texto de cuerpo en una página web. Para alcanzar la máxima accesibilidad en todo tipo de usuarios, lo ideal es lograr un valor de 7,0:1 o superior.
¿Cuál es el contraste WCAG AA exigido para texto normal?
El nivel WCAG 2.1 AA exige un contraste mínimo de 4,5:1 para el texto de tamaño normal. El texto grande cuenta con un umbral menor de 3,0:1 debido a que el mayor grosor y tamaño de los caracteres facilita su lectura.
¿Es gratis este comprobador de contraste de color?
Sí, el comprobador de contraste de color (AA/AAA) es totalmente gratuito, no requiere registro ni impone límites de uso. Todas las operaciones matemáticas se efectúan en el navegador del usuario.
¿Puedo comprobar la relación de contraste introduciendo códigos HEX?
Sí, basta con escribir o pegar un código HEX de 3 o 6 dígitos en los campos de primer plano o fondo. También puedes usar el cuentagotas integrado para elegir un color de forma visual.
¿Qué diferencia hay entre texto normal y texto grande en WCAG?
En WCAG 2.1, el texto grande se define como aquel que alcanza al menos 18 pt (24 px) en peso normal o 14 pt (18,66 px) en negrita. Todo texto con proporciones inferiores se considera texto normal y requiere un ratio de contraste más alto.
¿Cómo se calcula la relación de contraste entre el texto y el fondo?
La relación de contraste se obtiene aplicando la fórmula oficial de luminancia relativa del W3C entre el color de primer plano y el de fondo. La herramienta realiza este cálculo matemáticamente dentro del navegador cada vez que cambias un color.
¿Por qué es importante el contraste de color en la accesibilidad web?
Un contraste suficiente asegura que el texto sea legible para usuarios con discapacidad visual o limitaciones perceptivas. También ayuda a cualquier persona a leer cómodamente en pantallas expuestas a la luz del sol.
Recomendado
-
Interaction of Color (Josef Albers, en inglés)El clásico sobre por qué un mismo color cambia según el fondo con el que lo combinas.
-
Don't Make Me Think, Revisited (Steve Krug, en inglés)Unos colores legibles son el primer paso; este breve clásico cubre el resto de la usabilidad web.
-
Sensor de color Nix Mini 3Escanea una pintura, tela o muestra de marca a su código hex y compruébalo aquí.
Ayuda a mantener las herramientas gratis. ✨
Imágenes meramente ilustrativas. En calidad de Afiliado de Amazon, obtengo ingresos por las compras adscritas que cumplen los requisitos aplicables.
