Herramienta gratuita · WCAG 2.2
Comprobador de contraste de color
Elige el color del texto y el del fondo. Te decimos si se puede leer según WCAG, y si no, qué color cercano sí cumple.
Un color cercano que sí cumple
Mismo tono, solo más claro u oscuro, para llegar a 4,5:1 (texto normal, nivel AA).
Así se ve un texto normal de 16 píxeles sobre tu fondo.
Texto grande
- Texto normal AA WCAG 1.4.3 · 4,5:1
- Texto normal AAA WCAG 1.4.6 · 7:1
- Texto grande AA WCAG 1.4.3 · 3:1
- Texto grande AAA WCAG 1.4.6 · 4,5:1
- Botones, iconos y bordes AA WCAG 1.4.11 · 3:1
Qué exige WCAG
- Texto normal: 4,5:1 (AA)
- El criterio 1.4.3 pide al menos 4,5:1 entre el texto y su fondo. El nivel AAA (1.4.6) sube a 7:1. Es el nivel AA el que piden la ley europea y la ADA.
- Texto grande: 3:1 (AA)
- Se considera grande el texto de 24 px o más, o de 18,66 px o más en negrita (18 pt y 14 pt). Al ser más fácil de leer, basta con 3:1.
- Botones, iconos y bordes: 3:1
- El criterio 1.4.11 pide 3:1 para las partes de la interfaz que hay que ver para usarla: el borde de un campo, un icono, el estado de un interruptor.
- Cómo se calcula
- Se compara la luminancia relativa de los dos colores: (L1 + 0,05) / (L2 + 0,05). Va de 1:1 (mismo color) a 21:1 (negro sobre blanco).
Preguntas frecuentes
Preguntas sobre el contraste
Lo que la gente nos pregunta antes de probar. Respuestas cortas y sin letra pequeña.
¿No está tu pregunta?
Escríbenos y te respondemos en un día laborable.
¿Qué contraste mínimo pide WCAG?
Para el nivel AA, que es el que exige la normativa, 4,5:1 para el texto normal y 3:1 para el texto grande y para los componentes de la interfaz. El nivel AAA pide 7:1 y 4,5:1.
¿Qué se considera texto grande?
A partir de 18 puntos (unos 24 píxeles) en peso normal, o de 14 puntos (unos 18,66 píxeles) en negrita.
¿El contraste se aplica también a los logotipos?
No. Los logotipos y el texto que forma parte de una marca están exentos, igual que el texto decorativo o de controles desactivados.
¿Y si el texto está sobre una imagen?
Se mide contra la parte más clara (o más oscura) de la imagen que quede detrás del texto. Si varía mucho, lo más seguro es poner una capa de color detrás del texto.
¿Se guarda algo de lo que pruebo?
No. El cálculo se hace en tu navegador. Los colores solo se guardan en la dirección de la página, para que puedas compartirla.
Un par de colores no es toda tu web
El test gratuito abre tu página en un navegador real y comprueba el contraste de cada texto, además de imágenes, botones, formularios y teclado.