CaliberVisual
Empezar
Herramienta gratis

Comprobador de contraste de color

Dos colores, una relación de contraste y una respuesta clara sobre si el texto en ellos se puede leer.

7.08:1

Texto grande a 24 px
Y texto de párrafo a dieciséis, el tamaño con la exigencia más estricta.
  • AA · texto normalCumplenecesita 4.5:1
  • AA · texto grandeCumplenecesita 3:1
  • AAA · texto normalCumplenecesita 7:1
  • AAA · texto grandeCumplenecesita 4.5:1

Grande significa 18 pt o más, o 14 pt en negrita: unos 24 px, o 18.66 px en negrita. Para subtítulos que se leen en un teléfono, apunta por encima del mínimo y no justo al mínimo: la pantalla es pequeña, muchas veces está al aire libre y el cuadro detrás del texto se mueve.

Qué hace

Calcula la relación de contraste WCAG 2.1 entre un color de primer plano y uno de fondo, y la compara con los cuatro umbrales que importan: 4.5:1 para texto normal en AA, 3:1 para texto grande en AA, 7:1 para texto normal en AAA y 4.5:1 para texto grande en AAA. Grande significa 18 pt, o 14 pt en negrita. Más allá del cumplimiento de accesibilidad, esta es la prueba que decide si un subtítulo se lee sobre el material en un teléfono a plena luz del día, que es donde se lee la mayor parte del texto de video. Cuando un par no cumple, la herramienta sugiere el color más cercano que sí cumple ajustando la luminosidad, así conservas el tono que elegiste en lugar de que te digan que uses negro.

Cómo revisar el contraste de color

  1. 01

    Elige los dos colores

    Escribe códigos hex, usa los selectores o intercámbialos. Ambos se muestran en vivo como texto sobre fondo para que puedas juzgarlo además de medirlo.

  2. 02

    Lee la relación

    Cada uno de los cuatro umbrales WCAG cumple o falla por separado. El texto a 24 px tiene una exigencia menor que el texto de párrafo, por eso un subtítulo puede cumplir donde un párrafo no.

  3. 03

    Corrige un fallo

    La sugerencia mueve la luminosidad de un color lo justo para cumplir, conservando el tono. Úsala, o tómala como la dirección hacia la que moverte.

Preguntas

¿Qué relación de contraste necesito?

4.5:1 para texto normal y 3:1 para texto grande para cumplir WCAG AA, que es el nivel al que se refieren la mayoría de las normativas. AAA pide 7:1 y 4.5:1. Para subtítulos de video que se leen en un teléfono, apunta por encima del mínimo y no justo al mínimo. La pantalla es pequeña, muchas veces está al aire libre y el cuadro detrás del texto se mueve.

¿Qué cuenta como texto grande?

18 pt o más, o 14 pt o más si está en negrita. En píxeles CSS eso son unos 24 px, o 18.66 px en negrita. Por debajo de eso se aplica el umbral de 4.5:1.

¿Cómo mantengo el texto legible sobre video?

El contraste contra un cuadro en movimiento no es un número fijo, así que dale al texto su propio fondo: una placa sólida o semitransparente, un contorno o una sombra. Luego compara el texto con la placa y no con el material. Eso es lo que hace todo rótulo inferior bien hecho.

¿El contraste aplica a logos e íconos?

Los logos están exentos de las reglas de texto de WCAG. Los íconos y componentes de interfaz que transmiten significado deben tener 3:1 contra lo que tienen al lado. La decoración no tiene requisito, pero si tiene que verse, en la práctica sí lo tiene.

Otras herramientas gratis