Cómo se usa
- Establece el color de fondo y el color del texto con los selectores de color o escribiendo códigos HEX.
- Lee la relación de contraste mostrada como un número, por ejemplo 4.50:1, y mira la tarjeta de vista previa.
- Consulta las insignias APROBADO o SUSPENSO para texto normal AA, texto grande AA y texto normal AAA.
El comprobador calcula la relación de contraste tal como la definen las Pautas de Accesibilidad para el Contenido Web (WCAG). Cada color se convierte a luminancia relativa con la fórmula sRGB, y la relación es la luminancia más clara más 0,05, dividida entre la luminancia más oscura más 0,05. El resultado se muestra con dos decimales, desde 1:1 para colores idénticos hasta 21:1 para negro sobre blanco. Los colores predeterminados son blanco y negro.
Se muestran tres resultados. El texto normal en el nivel AA necesita una relación de al menos 4,5. El texto grande en el nivel AA necesita al menos 3. El texto normal en el nivel AAA necesita al menos 7. Cada uno se marca como APROBADO o SUSPENSO. La relación en sí también se señala con color. Según las WCAG, texto grande significa aproximadamente 18 puntos en peso normal o 14 puntos en negrita, así que usa el resultado de texto grande solo cuando tu texto tenga ese tamaño.
Una tarjeta de vista previa usa tus dos colores y muestra un título y una línea de texto de ejemplo, para que puedas juzgar los colores además del número. Una puntuación aprobada no garantiza por sí sola una buena legibilidad, ya que también importan el grosor de la fuente, el tamaño y el entorno.
Los colores deben introducirse como códigos HEX de 6 dígitos. El cálculo se hace en tu navegador.
Preguntas frecuentes
¿Qué relación necesito?
Para WCAG AA, el texto normal necesita 4,5:1 y el texto grande 3:1. Para AAA, el texto normal necesita 7:1. La herramienta muestra el resultado de cada uno.
¿Qué cuenta como texto grande?
En WCAG, el texto de unos 18 puntos o más, o de 14 puntos en negrita o más.
¿Qué color va dónde?
La herramienta trata un color como fondo y el otro como texto, pero la relación es la misma en ambos sentidos.
¿Por qué no funciona mi código HEX corto?
Introduce la forma completa de 6 dígitos, como #333333 en lugar de #333.
¿Comprueba elementos que no son texto?
Solo ofrece umbrales para texto. Se muestra la relación, así que puedes compararla tú mismo con la pauta de 3:1 para componentes de interfaz.