Verificador de Contraste de Color WCAG
Verifique si el contraste de color cumple con los estándares de accesibilidad
Texto Normal AA
Texto Normal AAA
Texto Grande AA
Texto Grande AAA
Vista Previa en Vivo
Acerca de los Estándares de Contraste WCAG
Nivel AA
Texto normal: mínimo 4.5:1 de relación de contraste
Texto grande (18pt+ o 14pt+ negrita): mínimo 3:1 de relación de contraste
Nivel AAA
Texto normal: mínimo 7:1 de relación de contraste
Texto grande (18pt+ o 14pt+ negrita): mínimo 4.5:1 de relación de contraste
Definición de Texto Grande
Texto de 18pt (24px) o más grande, o texto de 14pt (18.66px) o más grande en negrita
Cómo Usar un Verificador de Contraste de Color para Diseño Accesible
Entendiendo el Contraste de Color
El contraste de color mide la diferencia en luminancia entre los colores de primer plano y fondo. Las relaciones de contraste más altas facilitan la lectura del texto, especialmente para usuarios con discapacidades visuales o deficiencias en la percepción de colores. Un buen verificador de contraste calcula esta relación al instante y le ayuda a crear combinaciones de colores accesibles.
Quién Necesita Cumplimiento con WCAG
Los sitios web gubernamentales, instituciones educativas, proveedores de atención médica y empresas que sirven al público deben cumplir con los estándares WCAG. El cumplimiento de WCAG AA es un requisito legal en muchos países, mientras que AAA representa el estándar de accesibilidad más alto para experiencias de usuario premium.
Probando Sus Colores
Usar el verificador de contraste de color de ILovePalette es simple: ingrese sus colores de primer plano (texto) y fondo en formato HEX, o seleccione colores comunes predefinidos. La herramienta calcula instantáneamente su relación de contraste y muestra qué niveles WCAG cumple. Pruebe tanto tamaños de texto normales como grandes, ya que tienen diferentes requisitos.
Problemas Comunes de Contraste
Las combinaciones de bajo contraste como texto gris claro sobre fondos blancos, o texto rojo sobre fondos verdes, no cumplen con los estándares WCAG. Incluso los diseños elegantes deben mantener la legibilidad. Al probar, asegúrese de que su contenido principal, navegación y elementos interactivos cumplan con los requisitos mínimos de contraste.
Más Allá del Contraste Básico
La verificación del contraste de color es solo una parte del diseño accesible. No dependa solo del color para conveying información—agregue iconos, etiquetas o patrones. Considere usuarios con diferentes tipos de daltonismo. Pruebe su diseño con usuarios reales que usan tecnologías de asistencia para garantizar una accesibilidad completa.
Mejores Prácticas
Comience las pruebas de accesibilidad temprano en su proceso de diseño. Use este verificador de contraste de color para validar las elecciones de color antes de programar. Documente sus combinaciones de colores aprobadas en un sistema de diseño. Vuelva a probar después de cualquier cambio de color. Recuerde: el diseño accesible beneficia a todos, no solo a usuarios con discapacidades.