Contraste de Color WCAG para Diseñadores
La regla 4.5:1, el cálculo de la relación de contraste y herramientas gratuitas para verificar cualquier par de colores.
Si tu texto no cumple con el contraste AA de WCAG, aproximadamente 285 millones de personas con discapacidad visual no pueden leerlo. Además, te encuentras en una posición legal cada vez más riesgosa en la UE y EE. UU. La buena noticia: la regla es simple.
La regla 4.5:1
El texto del cuerpo debe tener una relación de contraste de al menos 4.5:1 contra su fondo para cumplir con WCAG AA. El texto grande (24px+ regular o 18px+ negrita) tiene un umbral más bajo de 3:1.
Para conformidad AAA: 7:1 para el cuerpo, 4.5:1 para texto grande.
Cómo se calcula la relación de contraste
WCAG utiliza luminancia relativa — convierte cada color a un valor de luminancia (0 = negro, 1 = blanco) usando una fórmula específica, luego calcula (L1 + 0.05) / (L2 + 0.05), donde L1 es el color más claro.
No necesitas hacer el cálculo — usa nuestro verificador de contraste gratuito para ingresar dos colores y ver la relación.
Casos comunes de fallo
- Gris claro sobre blanco — #999 sobre #fff = 2.85 (falla). #767676 sobre #fff = 4.54 (pasa).
- Blanco sobre amarillo — casi siempre falla. Usa texto oscuro sobre amarillo.
- Enlaces de color en el texto del cuerpo — la mayoría de los enlaces azules pasan contra blanco pero fallan contra gris claro. Prueba el fondo real circundante.
- Colores de marca que se ven geniales — a menudo fallan. Agrega un fondo blanco roto o oscurece el texto.
Cómo elegir pares de colores accesibles
Tres patrones confiables:
- Oscuro sobre claro — #1f2937 sobre #fff = 14:1 (perfecto).
- Blanco sobre oscuro — #fff sobre #1f2937 = 14:1 (perfecto).
- Oscuro sobre acento — #1f2937 sobre #fbbf24 = 9:1 (perfecto para botones).
Más allá del texto
WCAG 2.1 también requiere 3:1 para elementos no textuales (botones, anillos de enfoque, bordes de formularios). El verificador maneja ambos.
Fondos de pantalla que no pelean con tus widgets
Si eres diseñador y colocas fondos de pantalla detrás de widgets de reloj y notificaciones, elige fondos con un contraste inferior a 5:1 en las zonas de widgets. Nuestra herramienta de desenfoque gaussiano puede suavizar áreas ocupadas de cualquier fondo de pantalla para mejorar la legibilidad de los widgets.
Prueba nuestras herramientas gratuitas
La mayoría de estas guías se complementan con una herramienta práctica que puedes usar ahora mismo — sin necesidad de registro para la primera ejecución:
- Redimensionador de imágenes — reducción y ampliación a nivel de píxel.
- Convertir a WebP — archivos 30-50% más pequeños que JPG.
- Eliminador de fondo — recorte con un clic, PNG transparente.
- Generador de favicon — todos los tamaños de navegador desde una fuente.
- Redimensionador de redes sociales — las dimensiones exactas de cada plataforma.
- Procesamiento por lotes — aplica cualquier herramienta hasta a 200 imágenes a la vez.
Explora el catálogo completo de herramientas.
