Verificador de contraste de colores (WCAG)
Comprobá si el texto se lee bien sobre un fondo, según las pautas de accesibilidad WCAG. Elegí los colores y mirá el resultado al instante.
Tus colores
Escribí el código hexadecimal (por ejemplo 0C72BA o FFF) o elegí el color con el selector.
Resultado
Texto normal de 16 px: así se lee este párrafo sobre el fondo elegido.
Texto grande de 24 px
Botón de ejemploSegún las pautas de accesibilidad web WCAG 2.1. “Texto grande” es de 24 px o más, o de 18,66 px o más en negrita.
Cómo verificar el contraste de colores para accesibilidad
Elegí el color del texto y el del fondo, y mirá en la vista previa cómo se lee. La herramienta calcula la relación de contraste con la fórmula de las pautas de accesibilidad WCAG 2.1 y te dice si cumple los niveles AA y AAA para texto normal, texto grande y componentes de interfaz. Si no cumple, te sugiere un color de texto del mismo tono que sí lo haga.
El contraste es una parte de la accesibilidad, no toda. También importan el tamaño y el peso de la letra: mirá la escala tipográfica para ordenar tus tamaños, y no dependas solo del color para transmitir información. Para piezas impresas, revisá el tamaño necesario con la calculadora de píxeles para imprimir.
Preguntas frecuentes
¿Qué contraste mínimo necesita un texto?
Las pautas WCAG 2.1 piden al menos 4,5:1 para texto normal y 3:1 para texto grande en el nivel AA, que es el que se suele exigir. El nivel AAA, más estricto, pide 7:1 y 4,5:1.
¿Qué es el texto grande?
Para las pautas WCAG, el texto de 24 px o más (18 puntos), o de 18,66 px o más (14 puntos) en negrita.
¿Y los botones, íconos y gráficos?
Los componentes de interfaz (como el borde de un botón o de un campo) y los elementos gráficos necesarios para entender el contenido deben tener al menos 3:1 contra los colores que los rodean.
¿Por qué importa el contraste?
Porque un texto con poco contraste es difícil de leer para muchas personas: con baja visión, con pantallas con reflejos, al aire libre o con poca luz. Mejorarlo suele mejorar la lectura para todos.
¿Cómo se calcula?
Se calcula la luminancia relativa de cada color (corrigiendo el brillo percibido de cada canal de rojo, verde y azul) y se divide la del más claro más 0,05 por la del más oscuro más 0,05. El resultado va de 1:1 (sin contraste) a 21:1 (negro sobre blanco).
Otras herramientas
¿Querés una marca que se lea bien en todos lados?
Diseñamos identidades y piezas con colores y tipografías pensados para leerse. El diagnóstico es gratis.