Contrast checker y comprobador de contraste de color
Este contrast checker calcula la relación de contraste entre el texto y el fondo de forma inmediata. Al introducir cualquier código hex, la herramienta verifica el cumplimiento de las directrices WCAG 2.1 para los niveles AA y AAA en texto normal y grande. El procesamiento es totalmente local y no envía datos a ningún servidor.
Cómo usar el comprobador de contraste de color
Para evaluar la legibilidad de una combinación cromática, basta con indicar los dos valores de color en la herramienta:
- Escribe el código hexadecimal del color de primer plano o selecciónalo con el cuentagotas nativo.
- Introduce el código hex del color de fondo en el segundo campo.
- Revisa de forma instantánea el ratio de contraste obtenido y las cuatro tarjetas de verificación para confirmar si cumple o no cumple los niveles AA y AAA.
Si necesitas alternar la función de cada tono, usa el botón para invertir colores y reevaluar la interfaz al momento.
Medir contraste de colores con códigos hex
La herramienta admite códigos hexadecimales de 3 y 6 dígitos (utilizando caracteres del rango 0–9 y A–F). Si pegas un valor con el símbolo de almohadilla inicial o espacios adicionales, la caja de texto ignora los caracteres no válidos para evitar fallos durante la edición.
Este análisis de contraste de color online calcula la luminancia relativa exacta conforme a la fórmula oficial de la W3C. Al ejecutarse en el navegador mediante JavaScript, la vista previa del texto y los indicadores de apto se actualizan según escribes sin necesidad de recargar la página.
Contraste colores accesibilidad y normativa UNE-EN 301 549
Las pautas WCAG 2.1 establecen umbrales exigibles para garantizar la accesibilidad web. El nivel AA requiere un ratio de contraste mínimo de 4,5:1 para texto normal y de 3,0:1 para texto grande (definido como 18 pt / 24 px en peso regular o 14 pt / 18,66 px en negrita). Por su parte, el nivel AAA eleva el requisito a 7,0:1 en texto normal y 4,5:1 en texto grande.
En España, alcanzar el nivel AA de accesibilidad es un requisito legal fijado por la norma UNE-EN 301 549:2022. Esta norma traspone la Directiva Europea 2016/2102 y la Acta Europea de Accesibilidad, siendo de obligado cumplimiento para sitios web y aplicaciones de las administraciones públicas y de empresas privadas que prestan servicios de especial trascendencia económica.
Diferencias con un contrast checker de WebAIM
A diferencia de utilidades tradicionales como el comprobador de contraste de color de WebAIM, este comprobador ofrece una muestra en vivo del texto sobre el fondo que responde simultáneamente a cada cambio de dígito. No hace falta pulsar botones de envío ni esperar respuestas de red.
Analizar el contraste texto y fondo durante la etapa de prototipado o maquetación evita realizar correcciones de diseño a posteriori y asegura una lectura cómoda para usuarios con baja visión o daltonismo.
Preguntas frecuentes
¿Cuál es el ratio de contraste mínimo para cumplir WCAG AA?
El nivel AA de las pautas WCAG 2.1 requiere un ratio de contraste mínimo de 4,5:1 para texto normal y de 3,0:1 para texto grande. El texto grande se define a partir de 18 pt (24 px) en peso regular o 14 pt (18,66 px) en negrita.
¿Qué se considera «texto grande» según las pautas de accesibilidad?
Según la especificación WCAG 2.1, texto grande es aquel que mide al menos 18 pt o 24 px en peso normal, o al menos 14 pt o 18,66 px en negrita. Al tener trazos más anchos y glifos mayores, las pautas permiten un umbral de contraste más bajo sin perder legibilidad.
¿Qué diferencia hay entre el nivel AA y el nivel AAA de contraste?
El nivel AA es el estándar de cumplimiento legal en auditorías de accesibilidad, exigiendo ratios de 4,5:1 en texto normal y 3,0:1 en texto grande. El nivel AAA es el grado de exigencia superior, requiriendo 7,0:1 para texto normal y 4,5:1 para texto grande.
¿Cómo puedo medir el contraste entre el texto y el fondo con códigos hex?
Escribe el código hex del color del texto en el campo de primer plano y el código hex del fondo en el campo secundario. El comprobador calcula automáticamente la relación de contraste y muestra si la combinación cumple con las directrices de accesibilidad.
¿Cuál es la relación de contraste recomendada para una lectura cómoda?
Una relación de 4,5:1 es el punto de partida recomendado para garantizar una lectura ágil en texto de cuerpo. Para ofrecer la mejor experiencia visual posible a personas con baja visión o bajo luz solar directa, lo idóneo es alcanzar o superar un ratio de 7,0:1.
¿Es gratuito este comprobador de contraste de color?
Sí, la herramienta es totalmente gratuita y se puede utilizar sin restricciones, registros ni límites de consulta. Tampoco requiere instalar ningún componente en el equipo.
¿Se envían mis códigos de color o datos a algún servidor al usar la herramienta?
No, las operaciones se procesan íntegramente en el navegador mediante JavaScript. Ningún código de color, imagen o dato de navegación se transmite a servidores externos.
¿Cómo afecta el contraste a las personas con daltonismo o baja visión?
Las deficiencias en la percepción del color dificultan la distinción entre tonos con saturación o matiz similares. Un ratio de contraste elevado se apoya en la diferencia de luminancia relativa, garantizando que el texto siga siendo legible independientemente del tipo de visión del usuario.
