Herramienta gratuita · Sin registro
Comprobador de contraste WCAG para colores de texto y fondo
Este comprobador de contraste gratuito calcula la relación entre el color del texto y el del fondo y la compara con los límites WCAG AA y AAA. Cambia los valores hexadecimales o elige colores. El cálculo se realiza directamente en tu navegador.
Comprobar colores
Introduce el color del texto y el del fondo. La vista previa y los resultados se actualizan al instante.
Texto grande
Texto normal de ejemplo para la vista previa.
Relación de contraste 5,47 a 1
- AA · texto normalSuperado · mín. 4,5 : 1
- AA · texto grandeSuperado · mín. 3 : 1
- AAA · texto normalNo superado · mín. 7 : 1
- AAA · texto grandeSuperado · mín. 4,5 : 1
- AA · controles y gráficosSuperado · mín. 3 : 1
3 o 6 dígitos hexadecimales, por ejemplo #0F766E o #FFF. Se evalúa el valor sin redondear.
¿Qué valores necesitas?
Para texto de tamaño normal, WCAG 2.2 AA exige por lo general al menos 4,5:1. El texto grande necesita 3:1. Grande significa al menos 18 pt, o 14 pt en negrita, lo que equivale aproximadamente a 24 y 18,67 píxeles CSS respectivamente. AAA exige 7:1 para texto normal y 4,5:1 para texto grande.
Para la información visual necesaria para identificar controles importantes y gráficos se aplica, en las condiciones del criterio 1.4.11, una relación mínima de 3:1 con los colores adyacentes. Los criterios incluyen excepciones definidas.
Qué cubre esta prueba
La calculadora compara dos colores sRGB opacos con la fórmula WCAG de luminancia relativa. Con degradados, imágenes o transparencias, primero tienes que determinar los colores realmente visibles en el punto más desfavorable.
Un par de colores que supera la prueba solo valora este contraste. No demuestra la accesibilidad completa de una web. Revisa también los estados de foco, los mensajes de error, los estados al pasar el ratón y si el color transmite significado sin una indicación adicional.
Fuentes originales del cálculo
- W3C: Contraste del texto, tamaños y límites
- W3C: Contraste de controles y gráficos
- WCAG 2.2: Luminancia relativa y fórmula de contraste
Encontrarás más comprobaciones prácticas en la lista de verificación WCAG.
¿Listo para el primer paso?
El escáner también funciona sin el widget instalado. Analiza primero una página importante de tu web.
Analizar gratisCrear un proyecto gratuitoConocimiento práctico para tus próximos pasos
Todos los artículos de la sección de conocimientoDiseño y contenido
Contraste y colores: cómo revisarlos en tu diseño web
Diseña textos, botones y mensajes de error comprensibles: mide bien el contraste según las WCAG y revisa los colores en todo el diseño.
Desarrollo y pruebas
Accesibilidad móvil: pantallas pequeñas, procesos completos
Revisa webs móviles en cuanto a ampliación, objetivos táctiles, gestos y orientación. Con una lista para dispositivos reales y tareas clave.
Tu siguiente paso
¿Qué necesita tu web?
Analiza una página pública en busca de barreras detectables automáticamente. Los resultados muestran hallazgos concretos y te ayudan a priorizar.
Análisis web gratuitoUn proceso de revisión sensato
- Encontrar problemas detectables automáticamente
- Probar manualmente el teclado y los recorridos reales
- Corregir, volver a analizar y documentar