Acerca de esta herramienta
Este comprobador calcula el contraste entre dos colores opacos, muestra texto real y evalúa AA / AAA por separado para texto normal y grande. Solo comprueba el contraste de color; no constituye una evaluación completa de accesibilidad del sitio.
Cómo usarla
- Introduce colores de texto y fondo en HEX opaco de 3 o 6 dígitos.
- Observa cómo se lee el texto sobre el fondo.
- Consulta la relación de contraste y los cuatro resultados de cumplimiento.
- Ajusta los colores, vuelve a comprobarlos y copia el resultado.
Ejemplos de uso
- #000000 y #ffffff → 21:1.
- Dos colores idénticos → 1:1.
- #777777 y #ffffff → aproximadamente 4.48:1, por debajo del mínimo AA de 4.5:1 para texto normal.
Cómo se calcula
Primero se dividen los canales sRGB entre 255. Si c ≤ 0.04045, el canal lineal es c / 12.92; si no, ((c + 0.055) / 1.055)^2.4. La luminancia relativa es L = 0.2126R + 0.7152G + 0.0722B y el contraste = (L más alta + 0.05) / (L más baja + 0.05). La evaluación usa el resultado completo sin redondear; el redondeo solo se aplica al mostrarlo.
Umbrales de contraste de texto WCAG 2.x
- AA, texto normal: al menos 4.5:1.
- AA, texto grande: al menos 3:1.
- AAA, texto normal: al menos 7:1.
- AAA, texto grande: al menos 4.5:1.
Por lo general, se considera grande el texto de al menos 18pt (24 CSS px), o de al menos 14pt (aproximadamente 18.67 CSS px) en negrita. Los límites se evalúan siempre con el contraste sin redondear.
Usos habituales
- Comprobar los colores del texto y fondo de botones.
- Revisar el contraste de texto normal y títulos de un tema.
- Ajustar diseños a los umbrales de contraste de texto WCAG.
Privacidad
Los datos y los resultados se procesan en tu navegador, sin subirse ni guardarse automáticamente. Copia los resultados que quieras conservar antes de salir de la página.
FAQ
¿Qué es el contraste WCAG?
Mide la diferencia entre colores a través de la luminancia relativa del primer plano y el fondo, con valores entre 1:1 y 21:1.
¿Qué significa 4.5:1?
Es el contraste mínimo de WCAG AA para texto normal. El resultado debe alcanzar o superar 4.5 para cumplir.
¿Qué diferencia hay entre AA y AAA?
Para contraste de texto, AAA exige más: 7:1 en texto normal y 4.5:1 en texto grande.
¿Qué se considera texto grande?
Generalmente, texto de al menos 18pt o de al menos 14pt en negrita, equivalentes aproximadamente a 24px y 18.67px.
¿Puedo comprobar colores transparentes o degradados?
Esta página solo procesa colores sólidos opacos. Los transparentes deben componerse primero sobre su fondo real; en degradados se debe comprobar el menor contraste de la zona cubierta por el texto.