Verificador de Contraste A11y: Diseña contenidos legibles para todo el mundo

Esta herramienta te permite calcular la relación de contraste entre el texto y el fondo de tus diseños para asegurar que cumplan con los estándares internacionales de accesibilidad WCAG.

💡 Sobre esta herramienta

¿Alguna vez has intentado leer un texto gris claro sobre un fondo blanco? Es frustrante, ¿verdad? La legibilidad no es solo una elección estética, es un pilar fundamental de la experiencia de usuario.

Contar con un buen contraste es vital para personas con discapacidad visual, pero también beneficia a cualquier usuario que consulte su teléfono bajo la luz del sol o en pantallas con poco brillo. Este verificador te ayuda a validar tus combinaciones de color de forma rápida, objetiva y profesional.

📘 Consejos de uso

• Resultados al instante: Selecciona tus colores con el cuentagotas o introduce directamente el código hexadecimal para ver los cambios en tiempo real.
• Niveles de cumplimiento: Comprueba si tu diseño alcanza el nivel AA (contraste mínimo recomendado) o el nivel AAA (contraste mejorado para máxima accesibilidad).
• Texto estándar vs. Texto grande: Las reglas cambian según el tamaño de la fuente. Nuestra herramienta desglosa ambos resultados para que no tengas que adivinar.
• Previsualización en vivo: Antes de implementar el código en tu proyecto, echa un vistazo al cuadro de vista previa para confirmar que la combinación es cómoda para la vista.

🧐 Preguntas frecuentes

• ¿Cuál es la diferencia entre AA y AAA?: El nivel AA es el estándar base para la mayoría de sitios web (relación 4.5:1). El nivel AAA es más exigente (relación 7:1) y está pensado para plataformas que buscan la excelencia en accesibilidad.
• ¿Qué se considera "Texto grande"?: Por norma general, es aquel que tiene un tamaño de al menos 18pt (24px), o 14pt (18.67px) si se utiliza una fuente en negrita (bold).
• ¿Puedo usar colores con transparencia?: Actualmente, el verificador trabaja con colores sólidos. Si tu diseño incluye transparencias, te recomendamos extraer el color final resultante para obtener una medición exacta.

📚 ¿Sabías que...?

La fórmula de contraste de las WCAG se basa en la luminancia relativa. Curiosamente, el ojo humano percibe el color verde de forma mucho más brillante que el azul. Por eso, en el cálculo de brillo, el verde aporta un 72% de la percepción, mientras que el azul apenas un 7%. ¡Esta es la razón por la que un texto blanco sobre un fondo azul oscuro se lee mucho mejor que sobre un fondo verde neón!