GUÍAS PRÁCTICAS · Web y códigos
Comprueba el contraste del texto sin falsear el umbral
Dos colores diferentes pueden producir un texto difícil de leer. Mide la pareja real y considera tamaño del texto, composición del fondo y estados de la interfaz.
1. Recoge los colores efectivos
Identifica el color de las letras y el fondo inmediato. Una paleta general no basta: el mismo texto puede aparecer sobre varias superficies.
La herramienta compara dos colores hexadecimales opacos. No analiza automáticamente una página ni reconstruye transparencias, imágenes o degradados bajo el texto.
2. Elige el criterio correspondiente
WCAG AA exige al menos 4,5:1 para texto normal y 3:1 para texto grande. La categoría depende de tamaño y grosor según la definición, no de que el elemento sea un título.
Para escritura latina, texto grande significa al menos 18 puntos normales o 14 en negrita, con equivalencias para otras escrituras. Si dudas, comprueba el requisito más estricto.
Comprobador de contraste de colores WCAG3. Lee la proporción y el resultado
Introduce ambos colores y consulta el resultado de la categoría adecuada. Una proporción mostrada con dos decimales puede ocultar una diferencia cerca del límite.
No redondees hacia arriba para declarar un aprobado. La herramienta evalúa el valor calculado antes del redondeo visual: consulta también su veredicto.
PRUEBA ESTE PASO
Comprobador de contraste de colores WCAG
Utiliza aquí el calculador completo: carga los valores del ejemplo, cambia un dato cada vez y compara el resultado con los pasos de la guía.
Un ejemplo reproducible
Carga #777777 sobre #FFFFFF: aproximadamente 4,48:1, insuficiente para AA de texto normal. Cambia solo el texto a #767676: aproximadamente 4,54:1, suficiente para ese umbral. El veredicto usa el valor sin redondear.
Resultado
El resultado aparecerá aquí.
4. Ejemplo: dos grises muy próximos
Sobre blanco, #777777 da aproximadamente 4,48:1 y no supera AA para texto normal. #767676 da unos 4,54:1 y sí alcanza ese umbral. Una diferencia visual pequeña cambia el resultado.
Dos grises sobre el mismo blanco
- Datos iniciales
- Fondo #FFFFFF; texto #777777 o #767676
- Resultado
- Aproximadamente 4,48:1: no supera AA normal. 4,54:1: sí lo supera.
Los recuadros son demostrativos. Las etiquetas explican colores, proporciones y resultados sin depender solo del aspecto.
-
#777777 sobre #FFFFFF
Unos 4,48:1: insuficiente para AA normal.
-
#767676 sobre #FFFFFF
Unos 4,54:1: suficiente para ese umbral.
5. Repite con temas y estados
Comprueba cuerpo de texto, enlaces, texto secundario y etiquetas de botones sobre sus fondos reales. Repite en tema oscuro y estados relevantes, sin asumir que basta invertir los colores.
Con fondos variables necesitas comprobar las combinaciones reales, incluida la menos favorable. Un único punto de una imagen no representa toda su superficie.
| Criterio | Proporción mínima |
|---|---|
| AA normal | 4,5:1 |
| AA grande | 3:1 |
| AAA normal | 7:1 |
6. Evalúa algo más que la proporción
Un resultado suficiente no demuestra accesibilidad completa. Tamaño, grosor, espaciado, significado y dependencia exclusiva del color requieren revisión en la interfaz real.
Si apenas alcanzas el umbral, considera un margen mayor. Cuando un color comunica un resultado, conserva una etiqueta o forma que aporte el mismo significado.
Son datos de ejemplo, no medidas de un caso real. El resultado utiliza el mismo motor que la herramienta completa. Compáralo con los pasos de la guía y marca las comprobaciones después de revisarlo.
Fuentes y método
Preguntas frecuentes
¿Un aprobado certifica conformidad WCAG?
No. Comprueba el contraste analizado con esos colores y condiciones; los demás requisitos necesitan evaluaciones separadas.
¿Puedo introducir un color transparente?
Necesitas el color efectivo una vez compuesto con el fondo. Esta prueba de dos colores opacos no reconstruye toda la página.