Contraste de color WCAG para diseñadores
La regla 4.5:1, matemática de relación de contraste y herramientas gratuitas para verificar cualquier par de colores.
Si tu texto no cumple con el contraste WCAG AA, se estima que 285 millones de personas con discapacidad visual no pueden leerlo. Además, te encuentras en un terreno legal cada vez más inestable 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 cuerpo, 4.5:1 para texto grande.
Cómo se calcula la relación de contraste
WCAG utiliza la 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 los cálculos: usa nuestro verificador de contraste gratuito para ingresar dos colores cualesquiera y ver la relación.
Casos de fallo comunes
- Gris claro sobre blanco — #999 sobre #fff = 2.85 (falla). #767676 sobre #fff = 4.54 (aprueba).
- 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 aprueban sobre blanco pero fallan sobre gris claro. Prueba el fondo circundante real.
- Colores de marca que se ven geniales — a menudo fallan. Agrega un fondo casi blanco u oscurece el texto.
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 competirán con tus widgets
Si eres diseñador y colocas fondos de pantalla detrás de widgets de reloj y notificaciones, elige fondos de pantalla con contraste menor 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 combinan 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 + ampliación perfecta en píxeles.
- 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 para redes sociales — dimensiones exactas de cada plataforma.
- Procesamiento por lotes — aplica cualquier herramienta a hasta 200 imágenes a la vez.
Explora el catálogo completo de herramientas.
