Colores y diseño
Comprobador de contraste WCAG
Sabrás en segundos si tus colores son legibles para todo el mundo.
Ratio de contraste
- AA texto normal
- AA texto grande
- AAA texto normal
- AAA texto grande
Vista previa
El veloz murciélago hindú comía feliz cardillo y kiwi.
El veloz murciélago hindú comía feliz cardillo y kiwi.
Ese gris sutil sobre fondo blanco puede estar costándote lectores. Este comprobador calcula el ratio de contraste exacto según WCAG 2.1 entre cualquier color de texto y de fondo, y muestra veredictos claros de aprobado o suspenso para los niveles AA y AAA, tanto en texto normal como en texto grande. Una vista previa muestra una frase real con los colores elegidos para que juzgues el resultado con tus propios ojos, y los selectores más el intercambio en un clic te permiten iterar hasta dar en el blanco. Úsalo en botones, texto de párrafo, gráficos — donde el texto se encuentre con el color. Imprescindible para un diseño accesible y conforme a la ley, y totalmente gratis, sin cuenta.
¿Cómo funciona?
- Define el color del texto y el color de fondo (escribe un valor o usa el selector).
- El ratio de contraste aparece al instante con los veredictos AA y AAA.
- Comprueba en la vista previa cómo se ve un texto real.
- Ajusta cualquiera de los dos colores hasta alcanzar el nivel que necesitas.
Preguntas frecuentes
¿Qué ratio de contraste necesito?
El nivel AA de WCAG exige 4.5:1 para texto normal y 3:1 para texto grande. El nivel AAA, más estricto, exige 7:1 y 4.5:1. La mayoría de los sitios web apuntan al nivel AA.
¿Qué se considera «texto grande»?
Texto de al menos 18 pt (unos 24 px), o 14 pt (unos 18.5 px) si está en negrita. Los títulos suelen entrar en esta categoría, y por eso se les permite un ratio algo menor.
¿Por qué importa tanto el contraste?
Aproximadamente 1 de cada 12 personas tiene alguna deficiencia en la percepción del color, y a cualquiera le cuesta leer un texto de bajo contraste a pleno sol. Un buen contraste mejora la legibilidad para todos y es un requisito legal de accesibilidad en cada vez más países.
Mis colores no pasan la prueba, ¿cómo lo arreglo?
Oscurece el texto o aclara el fondo en lugar de cambiar de tono por completo. Un pequeño ajuste de luminosidad suele bastar para superar el umbral sin que los colores de tu marca dejen de reconocerse.