Acerca de: Comprobador de contraste de color
El texto que no destaca lo suficiente sobre su fondo resulta difícil de leer para las personas con baja visión o daltonismo, para las personas mayores y para cualquiera que lea el móvil a pleno sol. Las Pautas de Accesibilidad para el Contenido Web (WCAG) definen relaciones de contraste mínimas entre el texto y el fondo: 4,5:1 para el texto normal y 3:1 para el texto grande en el nivel AA, y 7:1 y 4,5:1 en el nivel AAA, más estricto. Este comprobador calcula la relación exacta entre dos colores cualesquiera y te indica qué niveles cumplen, con una vista previa en tiempo real.
Cómo usarla
- Elige el color del texto (primer plano) y el color de fondo con los selectores, o escribe valores HEX, RGB o HSL.
- Consulta la relación de contraste, desde 1:1 (sin contraste) hasta 21:1 (negro sobre blanco).
- Comprueba qué niveles WCAG se superan. Si un nivel no se supera, oscurece o aclara uno de los colores hasta que lo haga.
- Usa el botón de intercambio para probar los colores al revés.
Preguntas frecuentes
¿Qué se considera texto grande?
Las WCAG definen el texto grande como el de al menos 18 puntos (24 píxeles CSS) en grosor normal, o de al menos 14 puntos (unos 18,7 píxeles CSS) en negrita.
¿Qué nivel debe cumplir mi sitio web?
El nivel AA es el objetivo de la mayoría de las leyes y políticas de accesibilidad en todo el mundo, incluida la Ley Europea de Accesibilidad y la ADA en Estados Unidos. Se recomienda el nivel AAA para los textos largos de lectura siempre que sea posible.
¿Qué es la comprobación de «componentes de interfaz»?
Las WCAG 2.1 y versiones posteriores exigen un contraste de 3:1 para las partes visibles de los controles, como los bordes de los campos y los iconos, y para los gráficos con significado, respecto a los colores adyacentes.