Cómo comprobar el contraste entre texto y fondo (WCAG)
En esta página
En resumen: abre Paleta de colores de una imagen de Imgovo, abre la pestaña Contraste, elige un color de texto y un color de fondo y lee el resultado de WCAG 2.2. Una relación de 4,5:1 cumple AA para texto normal, 3:1 cumple AA para texto grande y 7:1 cumple AAA para texto normal. Puedes sacar los colores de una foto o escribir tus propios códigos HEX. No se sube nada.
Qué significa la relación de contraste
La relación de contraste compara cuánta luminosidad tienen dos colores. Va de 1:1 (colores idénticos) a 21:1 (negro sobre blanco). Un texto con poco contraste cuesta leerlo, sobre todo para personas con baja visión, en un móvil al sol o en una pantalla mala.
Los números que conviene recordar
| Nivel | Texto normal | Texto grande | Elementos de interfaz e iconos |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4.5:1 | – |
Texto grande significa al menos 24 px, o 18,66 px en negrita.
Paso a paso
- Abre Paleta de colores de una imagen. Añade una imagen para crear una paleta o usa Crear una paleta sin imagen.
- Abre la pestaña Contraste.
- Elige el Color del texto y el Color de fondo de tu paleta o escribe los tuyos.
- Mira los ejemplos (texto grande y normal) y los Resultados WCAG 2.2 para este par: la relación y si cumple o no AA y AAA.
- Si el par no cumple, haz clic en Sugerir un color de texto legible y luego en Usar la sugerencia.
- Con Intercambiar prueba texto claro sobre fondo oscuro y al revés. En Todos los pares ves cada combinación de la paleta.
Colores sacados de una foto
Si has extraído una paleta de una foto, no des por hecho que sirve para texto. Los colores suaves o parecidos suelen fallar. Elige una muestra oscura para el texto y una clara para el fondo, o al revés, y prueba el par. Para crear la paleta, lee Cómo obtener una paleta de colores de una imagen.
Mira cómo pueden ver otros la paleta
La herramienta también muestra una aproximación de diferencias habituales en la visión del color. Te ayuda a notar colores que a algunas personas les parecen iguales. No es una prueba de contraste ni una herramienta médica.
Prueba los colores en una interfaz
La pestaña Vista previa muestra tus colores en una pequeña maqueta con página, tarjeta, texto, acento y borde, para verlos en contexto antes de copiar los códigos a tu CSS.
Límites
El comprobador mide un par de colores sólidos cada vez. No prueba fotos detrás del texto, degradados, estados al pasar el cursor ni el resto de la accesibilidad. Toma el resultado como una comprobación útil, no como un certificado.
Privacidad
Los colores se comprueban en tu navegador. No se sube nada.
Pruébalo ahora
Abre Paleta de colores de una imagen, ve a Contraste y prueba tus colores de texto y de fondo.
Preguntas frecuentes
¿Qué relación de contraste necesito?
WCAG 2.2 pide, en el nivel AA, al menos 4,5:1 para texto normal y 3:1 para texto grande. El nivel AAA pide 7:1 para texto normal y 4,5:1 para texto grande. Los elementos de interfaz y los iconos necesitan 3:1.
¿Qué cuenta como texto grande?
Al menos 24 px, o 18,66 px en negrita.
¿Es un certificado de que mi diseño es accesible?
No. El comprobador mide un par de colores sólidos. No es un certificado para un diseño entero y no prueba imágenes, degradados, texto sobre fotos ni otros aspectos de la accesibilidad.
¿Puede Imgovo sugerir un color de texto legible?
Sí. Elige un color de fondo y usa «Sugerir un color de texto legible». Después puedes usar la sugerencia o quedarte con el tuyo.
¿Puedo comprobar todos los colores de una paleta a la vez?
Sí. La vista «Todos los pares» enumera cada par de texto y fondo de tu paleta con su resultado.
¿Se sube mi imagen a un servidor?
No. Los colores se comprueban en tu navegador y nada sale de tu dispositivo.