Contrast Checker

Verify WCAG 2.1 accessibility standards in real-time.

#
#

Texto de ejemplo para verificar la accesibilidad.

The quick brown fox jumps over the lazy dog.

Relación de Contraste
1.00 : 1

AA (Texto Normal)

--

AA (Texto Grande)

--

AAA (Texto Normal)

--

AAA (Texto Grande)

--

Verificador de Contraste: Crea Diseños Accesibles y Profesionales ✨

Asegúrate de que tus combinaciones de colores sean legibles, atractivas y cumplan con los estándares internacionales de accesibilidad en cuestión de segundos.

💡 ¿Por qué usar esta herramienta?

El contraste de color es el pilar de un diseño inclusivo. Con esta herramienta, no solo diseñas para la estética, sino también para la funcionalidad:

  • Garantiza la Legibilidad: Facilita la lectura para personas con visión reducida o para quienes consultan tu web bajo la luz directa del sol.
  • Cumple con las Pautas WCAG: Evalúa tus paletas siguiendo las guías WCAG 2.1 (niveles AA y AAA), asegurando que tu sitio sea apto para todos.
  • Vista Previa en Tiempo Real: Experimenta con diferentes tonos y observa los cambios al instante para lograr el equilibrio perfecto.

📘 Guía rápida de uso

  • Formatos Flexibles: Introduce tus códigos hexadecimales (HEX) o usa el selector visual para explorar diferentes matices.
  • Evaluación por Tamaño de Texto: El sistema distingue entre "Texto normal" y "Texto grande", ya que los caracteres de mayor tamaño mantienen la legibilidad incluso con contrastes más bajos.
  • Optimización Automática: Si tu combinación no alcanza los niveles mínimos, haz clic en "Sugerir Color Accesible". El sistema ajustará automáticamente el brillo del texto para cumplir con el estándar AA (4.5:1) respetando la esencia de tu color original.

🧐 Preguntas Frecuentes

  • ¿Qué diferencia hay entre el nivel AA y el AAA?
  • Nivel AA: Es el estándar mínimo recomendado para la mayoría de los sitios web (proporción de contraste de 4.5:1).
  • Nivel AAA: Es el estándar de oro de la accesibilidad, ideal para sitios con mucho contenido informativo (proporción de 7.0:1).
  • ¿Qué se considera "Texto grande"?
  • Por lo general, se refiere a texto de 18pt (~24px) o superior, o 14pt (~18.6px) si se utiliza una fuente en negrita (bold).
  • ¿Qué pasa con mi privacidad?
  • Puedes estar tranquilo. Todos los cálculos se procesan localmente en tu navegador. No guardamos ni enviamos tus preferencias de color a ningún servidor externo.

📚 ¿Sabías que...?

Un buen contraste no solo ayuda a personas con discapacidad visual. También mejora la experiencia de usuarios mayores que pierden sensibilidad al contraste con la edad, o de cualquier persona que use su móvil con el brillo bajo para ahorrar batería. ¡Diseñar para la accesibilidad es, sencillamente, diseñar mejor para todos!