Accesibilidad Web: Entendiendo el Contraste de Color

El contraste de color es esencial para la accesibilidad y un requisito legal en muchos países. Aprende qué exigen las pautas WCAG y cómo verificar tus diseños.

Uno de cada doce hombres y una de cada doscientas mujeres tienen algún tipo de deficiencia en la visión del color. Un contraste de color adecuado garantiza que tu sitio web sea legible para todos, incluidas las personas con discapacidad visual, los ancianos y quienes usan una pantalla bajo la luz solar directa.

El estándar de contraste WCAG

Las Pautas de Accesibilidad para el Contenido Web (WCAG) definen las ratios de contraste mínimas. El nivel AA requiere 4.5:1 para texto normal y 3:1 para texto grande (18pt o 14pt negrita). El nivel AAA exige 7:1 para texto normal — el estándar de oro para máxima accesibilidad.

Cómo se calcula la ratio de contraste

La ratio de contraste se deriva de la luminancia relativa de dos colores. Una ratio de 1:1 significa ningún contraste (colores idénticos), mientras que 21:1 es el máximo teórico (negro puro sobre blanco puro). La fórmula tiene en cuenta cómo los ojos humanos perciben el brillo.

Consejos prácticos para mejor contraste

El texto oscuro sobre fondos claros casi siempre supera al texto claro sobre fondos de color. Evita el texto gris claro sobre blanco, una tendencia de diseño común que no supera las verificaciones de accesibilidad. Cuando uses colores de marca para el texto, verifica siempre el contraste contra el fondo.

Cómo usar el verificador de contraste

Introduce tus colores de primer plano y fondo usando el selector de color o los campos de entrada hexadecimal. La herramienta calcula instantáneamente la ratio de contraste y muestra qué niveles WCAG (AA y AAA) pasan o fallan. La vista previa muestra cómo se ve realmente tu combinación de texto.