Comprobador de contraste de color WCAG
Elige un color de texto y un color de fondo: obtén la relación de contraste, los resultados AA y AAA (apto/no apto) y una vista previa real de lo legible que resulta.
Relación de contraste (de 1:1 a 21:1)
Este es un ejemplo de texto normal: un párrafo igual que los que tus visitantes leen cada día.
Este es un titular grande
Qué significan los niveles AA y AAA
Las WCAG (Web Content Accessibility Guidelines) miden la legibilidad con una relación de contraste que va de 1:1 (sin contraste) a 21:1 (negro sobre blanco). El nivel AA, el estándar que exige la mayoría de normativas de accesibilidad, pide al menos 4,5:1 para el texto normal y 3:1 para el texto grande. El nivel más estricto AAA sube esos umbrales a 7:1 y 4,5:1. «Texto grande» significa texto de al menos 24 px, o 18,5 px si está en negrita.
Por qué el contraste importa de verdad
Aproximadamente una de cada veinte personas tiene algún tipo de baja visión o deficiencia en la visión del color, y a todo el mundo le cuesta leer una pantalla a pleno sol o con el brillo bajado. El contraste insuficiente es uno de los fallos de accesibilidad más habituales de la web — y uno de los más fáciles de arreglar: muchas veces basta con oscurecer el texto o aclarar el fondo unos cuantos tonos. Acuérdate de comprobar también los estados secundarios, como los enlaces, los textos de ejemplo (placeholder) y el texto de los botones de color.