Usa el Comprobar Contraste de Color WCAG gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningún servidor.
Por Qué el Contraste Es la Mejora de Accesibilidad Más Simple
El contraste es la diferencia de brillo entre el texto y su fondo, y decide si las palabras se pueden leer en absoluto. Un texto gris claro sobre fondo blanco puede verse elegante en una herramienta de diseño, pero para muchos lectores, incluidos usuarios mayores y personas a plena luz del sol, simplemente desaparece. Las Pautas de Accesibilidad para el Contenido Web, conocidas como WCAG, establecen proporciones mÃnimas claras para que los diseñadores no tengan que adivinar qué significa legible.
Este comprobador mide la proporción exacta entre dos colores y la compara con los niveles WCAG. El nivel AA pide al menos 4.5 a 1 para texto normal y 3 a 1 para texto grande, mientras que el nivel AAA, más estricto, pide 7 a 1 para texto normal y 4.5 a 1 para texto grande. Se considera texto grande al menos 18 puntos, o 14 puntos en negrita. La herramienta muestra una vista previa en vivo de tus colores a tamaño de titular y de cuerpo, para que juzgues el resultado con tus ojos además de con los números.
Cómo Usarlo
Elige un color de texto y un color de fondo con los selectores de color, o escribe valores hexadecimales directamente. La proporción y los cuatro resultados de aprobado o suspenso se actualizan al cambiar cualquier color, y la vista previa muestra tu combinación exacta en dos tamaños.
- Elige tu color de texto con el primer selector de color.
- Elige tu color de fondo con el segundo selector.
- Lee la proporción de contraste en la parte superior del resultado.
- Revisa los cuatro resultados: AA y AAA para texto normal y grande.
- Si un resultado falla, oscurece el texto o aclara el fondo en pasos pequeños hasta que pase.
- Usa el botón de intercambio para probar la combinación inversa, que se usa a menudo en botones y banners.
Un Ejemplo Práctico
Un texto gris oscuro sobre blanco, alrededor del hexadecimal 111827, da una proporción muy por encima de 17 a 1, asà que pasa todos los niveles con facilidad. Un texto gris medio sobre blanco, alrededor del 777777, da una proporción por debajo de 4.5 a 1, asà que suspende AA para texto normal aunque a simple vista parezca correcto en un buen monitor. Esa diferencia entre parece correcto y pasa la norma es justo por qué medir importa: el comprobador detecta combinaciones que el ojo aprueba y la norma rechaza.
Consejos Que Ahorran Tiempo
- Apunta a AA para todo el texto del cuerpo, y trata AAA como objetivo para texto pequeño o importante como las etiquetas de formularios.
- Prueba los colores de marca pronto. Una paleta de marca que suspende el contraste obligará a rediseños más tarde si solo se comprueba en el lanzamiento.
- Prueba también el texto sobre imágenes y degradados, usando la parte más oscura de la imagen detrás del texto como color de fondo.
- No confÃes en la negrita o el tamaño grande para rescatar una combinación que falla, salvo que el texto sea realmente grande en todos los lugares donde aparece.
- Guarda una lista de parejas aprobadas de tu paleta, para que las páginas futuras reutilicen colores ya comprobados.
Errores Comunes Que Debes Evitar
El error más común es juzgar el contraste en un monitor brillante y de alta calidad en una habitación oscura, lo que favorece a las combinaciones débiles. Otro es comprobar solo el tamaño de titular y olvidar que el texto del cuerpo, los pies de foto y las ayudas de formularios son más pequeños y necesitan una proporción mayor. Un tercero es usar solo el color para transmitir significado, por ejemplo rojo para error, sin añadir también texto o un icono, lo que deja a los lectores daltónicos sin el mensaje. El contraste es necesario, pero es solo una parte de un diseño legible.
Preguntas Frecuentes
¿Qué proporción necesito en realidad? Para la mayorÃa de sitios web, AA es el objetivo aceptado: 4.5 a 1 para texto normal y 3 a 1 para texto grande. AAA es más estricto y es un buen objetivo para texto pequeño.
¿Esta herramienta cambia mi sitio web? No. Solo mide los colores que eliges aquà en tu navegador. No se sube nada y no se cambia ningún archivo.
Un texto legible no es cuestión de gusto, es un número que puedes comprobar en segundos. Elige tus colores, lee la proporción, y publica combinaciones que pasen.