Ejemplo de texto normal - El rápido zorro marrón.
Ejemplo de texto grande (18pt+)
–
Ratio de contraste
| Norma | Nivel | Ratio mínimo | Resultado |
|---|---|---|---|
| Texto normal | WCAG AA | 4.5:1 | – |
| Texto grande (≥18pt / ≥14pt negrita) | WCAG AA | 3:1 | – |
| Texto normal | WCAG AAA | 7:1 | – |
| Texto grande (≥18pt / ≥14pt negrita) | WCAG AAA | 4.5:1 | – |
Cómo usar el verificador de contraste
- Usa los selectores de color o introduce códigos HEX para los colores de primer plano (texto) y fondo.
- El ratio de contraste y los resultados de conformidad WCAG se actualizan al instante.
- Usa Intercambiar para invertir primer plano y fondo.
Requisitos de contraste WCAG
| Estándar | Tipo de texto | Ratio mínimo |
|---|---|---|
| WCAG AA | Texto normal | 4,5:1 |
| WCAG AA | Texto grande (≥18pt o ≥14pt negrita) | 3:1 |
| WCAG AAA | Texto normal | 7:1 |
| WCAG AAA | Texto grande | 4,5:1 |
WCAG 2.1 nivel AA es el mínimo legal para la mayoría de normativas de accesibilidad (UE, UK, EE.UU.).
Cálculo del ratio de contraste
La luminancia relativa (L) se calcula: L = 0,2126R + 0,7152G + 0,0722B. El ratio es (L1 + 0,05) / (L2 + 0,05) donde L1 es el color más claro.
Por qué importa el contraste
Unos 300 millones de personas en el mundo tienen deficiencia en la visión del color. Un contraste suficiente asegura la legibilidad en todas las condiciones: deficiencias visuales, luz solar intensa, pantallas de baja calidad.
Consejos para superar WCAG AA
- Azul oscuro (
#003087) o gris muy oscuro (#333333) sobre blanco superan fácilmente 4,5:1 - Si tu color de marca es claro, úsalo como fondo con texto oscuro
- Nunca uses el color solo para transmitir información, añade iconos o patrones