Verificador de Contraste

Las Pautas de Accesibilidad para el Contenido Web (WCAG) 2.1, publicadas por el W3C, definen las relaciones mínimas de contraste para asegurar que el texto sea legible para personas con discapacidades visuales. Las pautas especifican tres niveles de conformidad: A (mínimo), AA (estándar) y AAA (mejorado). Para el Nivel AA, los requisitos son 4,5:1 para texto normal (menos de 18pt o 14pt negrita) y 3:1 para texto grande (18pt+ o 14pt+ negrita). Para el Nivel AAA, los requisitos son más estrictos: 7:1 para texto normal y 4,5:1 para texto grande.

The contrast ratio is calculated using the relative luminance of the two colors. Relative luminance is a weighted sum of the linearized RGB channels: L = 0.2126*R + 0.7152*G + 0.0722*B, where R, G, and B are gamma-corrected values (each channel is linearized by applying: if c <= 0.03928 then c/12.92 else ((c+0.055)/1.055)^2.4). The contrast ratio is then (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 is the darker color. The 0.05 offset accounts for ambient light flare on the screen.

Estos requisitos no son arbitrarios — se basan en una amplia investigación sobre la visión humana. Aproximadamente el 8% de los hombres y el 0,5% de las mujeres tienen algún tipo de deficiencia de visión de color (daltonismo). El bajo contraste afecta no solo a estos usuarios sino también a cualquiera que vea una pantalla a la luz del sol, en una pantalla de baja calidad o en ángulo. Cumplir los requisitos de contraste WCAG AA mejora la legibilidad para todos, no solo para usuarios con discapacidades. En muchas jurisdicciones (UE, ADA de EE. UU.), el cumplimiento de WCAG es un requisito legal para sitios web públicos.

El error de contraste más común es usar texto gris claro sobre fondo blanco. Una tendencia de diseño común usa texto gris #999 o #AAA para información secundaria, pero estos colores tienen relaciones de contraste de 2,85:1 y 2,32:1 respectivamente — muy por debajo del mínimo de 4,5:1. Para texto secundario sobre blanco, usa #767676 (4,54:1) o más oscuro. Otro problema común es usar colores de marca que se ven bien visualmente pero no superan las comprobaciones de contraste — un azul claro de marca (#00BFFF) sobre blanco tiene una relación de 2,32:1, no superando WCAG AA. Oscurece los colores de marca para uso en texto o úsalos solo para elementos no textuales (bordes, fondos, iconos).

For large text (headings, buttons), the 3:1 requirement is more forgiving, but don't abuse it. Large text that barely passes 3:1 is still hard to read for many users. Aim for 4.5:1 whenever possible, regardless of text size. When using colored backgrounds, test both the text color and any text that might appear on hover or focus states. CSS custom properties (variables) make it easier to maintain consistent contrast -- define your color palette with contrast-tested pairs and reuse them throughout your design system.