Comprobador de contraste de color
Escribe o elige el color del texto y el del fondo. Te decimos su relación de contraste y si cumple los niveles AA y AAA de WCAG. Todo se calcula en tu navegador.
Esta herramienta necesita JavaScript
El cálculo se hace en tu navegador con JavaScript. Mientras tanto, más abajo tienes los valores mínimos que exige WCAG.
Qué exige WCAG
| Qué | Nivel AA | Nivel AAA |
|---|---|---|
| Texto normal | 4,5:1 (1.4.3) | 7:1 (1.4.6) |
| Texto grande | 3:1 (1.4.3) | 4,5:1 (1.4.6) |
| Componentes de interfaz y gráficos | 3:1 (1.4.11) | No hay nivel AAA |
Se considera texto grande el de al menos 18 puntos (24 píxeles CSS) o el de al menos 14 puntos en negrita (unos 18,66 píxeles CSS).
Cosas que conviene saber
- La relación va de 1:1 (sin contraste) a 21:1 (negro sobre blanco). Se calcula con la luminancia relativa de los dos colores.
- No se redondea: 4,49:1 no llega a 4,5:1.
- No se exige contraste en logotipos, texto decorativo ni controles desactivados.
- El contraste no lo es todo: la información nunca debe depender solo del color (criterio 1.4.1).
- En nuestra web usamos un mínimo propio de 7:1 para el texto de cuerpo, más exigente que WCAG AA.
Empieza a utilizar SiteNorma
Crea tu cuenta y empieza a mejorar la accesibilidad de tu web. El plan Gratis incluye 10 páginas analizadas al mes, sin tarjeta.