Entrada
Preparando tu espacio de trabajo…
Cómo usarlo
- Introduce colores opacos de texto y fondo.
- Revisa la vista previa, la relación de contraste y cada resultado.
- Ajusta los colores o usa Intercambiar colores; copia la relación cuando esté lista.
Interpretar el contraste
Un color de texto puede verse claro sobre un fondo y perderse sobre otro. Esta herramienta compara el par y distingue los requisitos para texto normal, texto grande y componentes de interfaz.
La vista previa aporta contexto visual; los resultados se basan en la relación calculada. Aun así, debes evaluar el tamaño y peso de la fuente y el diseño de la interfaz terminada.
Entender la relación
La luminancia relativa se calcula a partir de canales sRGB linealizados. La relación divide la luminancia más clara más 0,05 entre la más oscura más 0,05.
El negro sobre blanco alcanza 21:1. Intercambiar texto y fondo mantiene la relación, aunque cambia la presentación visual.
#000000 on #ffffff21.00:1 · AA and AAA passEl texto negro sobre blanco alcanza la relación máxima WCAG de 21:1.
Umbrales y redondeo
Para texto normal se usan 4,5:1 en AA y 7:1 en AAA; para texto grande, 3:1 y 4,5:1. Los componentes de interfaz requieren 3:1 cuando el criterio sea aplicable.
La relación se muestra con dos decimales, pero se compara sin redondear. No se admiten colores transparentes, pues el color efectivo depende del fondo.
Revisar la interfaz terminada
Evalúa la relación junto con el tamaño y peso del texto y los estados de los componentes. Un par aprobado no comprueba la visibilidad del foco, el teclado, las etiquetas ni el resto de la página.
Entrada de texto de hasta 1 MiB. Las transformaciones de CSS y HTML se ejecutan en un worker con un límite de 30 segundos. Las herramientas de color usan sRGB; los estilos generados son vistas previas y deben probarse en tu propio diseño.
Preguntas frecuentes
¿Por qué puede fallar una relación que parece alcanzar el umbral?
Los dos decimales pueden redondearse hacia arriba. La comprobación usa el valor completo, por lo que una relación ligeramente inferior sigue sin cumplir.
¿Puedo introducir colores transparentes?
No. Introduce los colores opacos finales después de combinarlos con el fondo correspondiente.
¿Intercambiar los colores cambia la relación?
No. La relación de luminancia es simétrica. El intercambio permite comparar ambas presentaciones en la vista previa.
¿Cumplir AA significa que toda la página es accesible?
No. Solo se compara este par con los umbrales mostrados. Hay que revisar por separado el criterio aplicable al texto o componente y los demás requisitos de accesibilidad.
¿Puedo guardar el resultado?
Usa Copiar para copiar la relación mostrada. La herramienta no genera un informe de accesibilidad ni certifica una página.