Comprobador de contraste de color – Ratio WCAG AA y AAA
Asegúrate de que tu texto se lee bien para todo el mundo. Introduce el color del texto y del fondo para obtener el ratio de contraste WCAG, el resultado AA y AAA, una vista previa y una sugerencia de corrección.
Introduce el color del texto y del fondo en HEX, RGB o HSL, o usa los selectores. La herramienta calcula el ratio, por ejemplo 4,83:1, y muestra si cumple WCAG AA (4,5:1 para texto normal, 3:1 para texto grande) y AAA (7:1 y 4,5:1). Si no cumple, sugiere el color de texto válido más cercano.
Cómo usar la herramienta: Comprobador de contraste de color
- Introduce o elige el color del texto.
- Introduce o elige el color de fondo.
- Lee el ratio de contraste y los resultados WCAG.
- Revisa la vista previa con título, texto y botón.
- Usa el color sugerido si la pareja no aprueba.
Requisitos de contraste WCAG
Las Pautas de Accesibilidad para el Contenido Web (WCAG 2.x) fijan ratios mínimos de contraste entre el texto y su fondo. El ratio va de 1:1 (mismo color) a 21:1 (negro sobre blanco).
| Nivel | Texto normal | Texto grande | Componentes de interfaz |
|---|---|---|---|
| AA | 4,5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4,5:1 | — |
«Texto grande» significa al menos 24 px normal o unos 18,7 px en negrita. Los componentes de interfaz incluyen bordes de campos, iconos y el foco. AA es el objetivo legal y práctico habitual; AAA es más estricto y conviene en textos largos.
Cómo se calcula el ratio
Cada color se convierte a su luminancia relativa, que da mucho más peso al verde que al azul porque el ojo es más sensible a él. El ratio es (más claro + 0,05) ÷ (más oscuro + 0,05). El comprobador redondea hacia abajo, como exige WCAG, así que 4,499 no aprueba.
Cómo corregir un contraste bajo
Cuando una pareja no aprueba, la herramienta mantiene el tono y la saturación del texto y lo oscurece o aclara hasta llegar a 4,5:1, para que tu color de marca siga reconociéndose. Otras opciones: oscurecer el fondo, usar texto más grande o en negrita, o dejar el color de poco contraste solo para decoración. El gris sobre blanco es el fallo más común: #767676 es el gris más claro que aprueba AA sobre blanco.
Más allá de los números
El contraste es solo una parte de la accesibilidad. No uses solo el color para indicar errores o enlaces, mantén legible el texto sobre fotos con una capa oscura y revisa el modo claro y el oscuro. Para crear una paleta, usa el Generador de paletas de colores; para sacar colores de un diseño, el Selector de color de imagen; para convertir valores, Convertir HEX a RGB.
También te pueden servir estas herramientas gratis: Formateador JSON, Generador de contraseñas y Probador de regex.
Preguntas frecuentes
¿Qué ratio necesito para WCAG AA?
4,5:1 para texto normal y 3:1 para texto grande y componentes de interfaz.
¿Cuál es el ratio WCAG AAA?
7:1 para texto normal y 4,5:1 para texto grande.
¿Qué se considera texto grande?
Al menos 24 px normal o unos 18,7 px en negrita (18 pt o 14 pt negrita).
¿Qué gris aprueba sobre fondo blanco?
#767676 es el gris más claro que llega a 4,5:1 sobre blanco.
¿Cómo funciona la sugerencia de color?
Mantiene el tono y la saturación y ajusta la luminosidad hasta llegar a 4,5:1.
Última actualización: