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
Todos los datos, cálculos, generación de CSS y vistas previas se procesan en tu navegador. No se sube contenido, no se usan servidores de procesamiento, bases de datos, API en línea ni CDN de terceros, y tus entradas no se guardan automáticamente.
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.