Cómo usar el comprobador de contraste de color
- Elige el color del texto y el color de fondo con los selectores o escribe códigos HEX como #1a2b3c.
- La relación de contraste aparece en letra grande, por ejemplo 4,5 : 1. Cuanto mayor es el número, más fácil de leer.
- Mira las etiquetas de abajo para ver los resultados AA y AAA del texto normal, el texto grande y los componentes de la interfaz, y observa el ejemplo en vivo.
Cómo funciona el comprobador de contraste de color
Las Pautas de Accesibilidad para el Contenido Web (WCAG) definen la relación de contraste a partir de la luminancia relativa de dos colores. Cada valor de rojo, verde y azul se convierte a un rango de 0 a 1, se elimina la corrección gamma y los resultados se ponderan con 0,2126, 0,7152 y 0,0722 y se suman para dar la luminancia relativa. La relación es la luminancia más clara más 0,05 dividida entre la luminancia más oscura más 0,05, así que el negro sobre blanco da el máximo de 21 : 1. El texto normal necesita al menos 4,5 : 1 para el nivel AA y 7 : 1 para el nivel AAA, mientras que el texto grande (18 pt o más, o 14 pt en negrita) necesita 3 : 1 para AA y 4,5 : 1 para AAA. Las partes de la interfaz de usuario, como los bordes de los botones y los iconos, deberían llegar a 3 : 1.
Por qué importa el contraste
El texto de bajo contraste es difícil de leer incluso para personas con buena vista bajo el sol o en una pantalla muy brillante, y casi ilegible para quienes tienen cambios de visión por la edad, baja visión o deficiencia de visión del color. El texto gris claro y el texto blanco sobre un fondo pastel son problemas clásicos. A medida que más sitios web públicos y corporativos siguen las pautas de accesibilidad, diseñadores y desarrolladores necesitan comprobar el contraste antes de publicar. La solución más fácil es un color de texto más oscuro o un fondo más claro.
Consejos
- Considera 4,5 : 1 como el mínimo para el texto del cuerpo.
- No confíes solo en el color para transmitir significado; añade iconos o texto.
- Comprueba tanto el tema claro como el oscuro.
- Para el texto sobre fotos, añade detrás una capa oscura semitransparente, porque el fondo varía.
Notas y limitaciones
Este comprobador solo calcula la relación entre dos colores. No tiene en cuenta el grosor ni el tamaño de la fuente, las imágenes de fondo ni los colores del entorno, y no es una certificación legal. En los servicios importantes usa también pruebas con usuarios reales y herramientas de accesibilidad específicas.
Preguntas frecuentes
¿Qué diferencia hay entre AA y AAA?
Ambos son niveles de accesibilidad y AAA es más estricto. El texto normal necesita 4,5 : 1 para AA y 7 : 1 para AAA.
¿Por qué el listón es más bajo para el texto grande?
El texto grande o en negrita se reconoce con más facilidad, así que el requisito se relaja a 3 : 1 para AA y 4,5 : 1 para AAA.
¿Puedo usar códigos HEX de 3 dígitos?
Sí. Un código como #fff se amplía a seis dígitos antes de calcular.