Comprobador de Contraste WCAG
Comprueba el ratio de contraste entre colores de texto y fondo según WCAG 2.x. Ve al instante si cumple AA o AAA para texto normal y grande.
Colores a comparar
Relación de contraste
Cumplimiento (WCAG 2.2)
Ejemplo de texto grande
Texto normal de cuerpo con 92% de brillo.
Cómo usar: Contraste
- 1Introduce el color del texto y el del fondo.
- 2Elige si el texto es normal o grande.
- 3Consulta la relación de contraste y si cumple WCAG AA y AAA.
¿Para qué sirve?
- Garantizar que los textos de tu web sean legibles para todos.
- Revisar botones y enlaces antes de publicar un diseño.
- Cumplir requisitos de accesibilidad en proyectos públicos.
Contraste de color y accesibilidad (WCAG)
Qué mide el ratio
El ratio de contraste compara la luminancia relativa del texto y del fondo y va de 1:1 (idénticos) a 21:1 (negro sobre blanco). La fórmula de las pautas WCAG pondera los canales rojo, verde y azul según la sensibilidad del ojo humano, por lo que dos colores que «se ven distintos» pueden tener un contraste bajo.
Niveles AA y AAA
Para cumplir AA, el texto normal necesita al menos 4,5:1 y el texto grande (a partir de 24 px, o 18,66 px en negrita) 3:1. El nivel AAA exige 7:1 y 4,5:1 respectivamente. Los componentes de interfaz, como bordes de campos o iconos esenciales, deben alcanzar 3:1 con su entorno.
Por qué importa
Un contraste insuficiente afecta a personas con baja visión o daltonismo, pero también a cualquiera que use el móvil a pleno sol. Además, en muchos países la accesibilidad web es un requisito legal para administraciones y para ciertos servicios privados, con normativa europea como la EN 301 549.
Cómo corregir un color
Normalmente basta con oscurecer el color del texto o aclarar el fondo hasta superar el umbral, manteniendo el tono de marca. No dependas solo del color para transmitir información (errores en rojo, por ejemplo): añade un icono o un texto que lo refuerce.
Herramientas relacionadas
Artículos relacionados
Preguntas frecuentes
¿Qué ratio necesito para cumplir WCAG?+
Texto normal necesita 4.5:1 (AA) y 7:1 (AAA). Texto grande (≥18pt ó ≥14pt negrita) necesita 3:1 (AA) y 4.5:1 (AAA).