UX/UI · Accesibilidad

Verificador de contraste

Elige el color del texto y del fondo. La herramienta calcula la relación de contraste y muestra si pasa los niveles AA y AAA de la WCAG.

Texto grande de ejemplo Este es un párrafo de texto normal usado para evaluar la legibilidad del contraste en tamaño de cuerpo.
Relación de contraste 21 : 1

El contraste es accesibilidad, no estética

El texto de bajo contraste excluye a personas: con baja visión, daltonismo, y a cualquiera leyendo en una pantalla al sol. La WCAG define una relación de contraste mínima entre el texto y el fondo — cuanto mayor, más legible.

Los umbrales: el texto normal necesita 4,5:1 para el nivel AA y 7:1 para AAA. El texto grande (desde ~18,66px en negrita o ~24px normal) puede usar 3:1 (AA) y 4,5:1 (AAA). Los componentes de interfaz e íconos esenciales piden al menos 3:1.

Este cálculo sigue la fórmula oficial de luminancia relativa de la WCAG y funciona en tu navegador. Resuelve el criterio de contraste — la accesibilidad completa implica mucho más (teclado, lectores de pantalla, estructura semántica), así que trátalo como un primer filtro.

Preguntas frecuentes

¿Qué son los niveles AA y AAA de la WCAG?

Son criterios de contraste de color de las directrices de accesibilidad WCAG. AA es el mínimo recomendado para la mayoría de los textos; AAA es más estricto. La herramienta muestra si la combinación de colores pasa en cada nivel.

¿Pasar el contraste garantiza accesibilidad total?

No. El contraste es una parte importante, pero la accesibilidad completa implica otros factores (estructura, teclado, lectores de pantalla) y requiere pruebas con personas y tecnologías asistivas.

¿La herramienta es gratuita?

Sí. Forma parte de la EduBuilders Toolbox, una colección de herramientas gratuitas para diseñadores instruccionales, profesionales de L&D y educadores. Sin registro, sin inicio de sesión.

¿Qué es EduBuilders?

EduBuilders es un estudio de productos educativos que trabaja en la intersección entre educación, tecnología e IA. Además de construir productos digitales para el aprendizaje, mantiene la EduBuilders Toolbox: herramientas gratuitas hechas por quien trabaja de verdad con Diseño Instruccional.

¿Quién es Ivan Chagas?

Ivan Chagas es diseñador instruccional, creador de productos educativos y fundador de EduBuilders. Trabaja con educación desde 2012, en la intersección entre diseño instruccional, inteligencia artificial y tecnología aplicada al aprendizaje, y creó estas herramientas para resolver problemas reales de quienes construyen cursos.