Comprobador de contraste de color (WCAG)
Comprueba la relación de contraste entre el color del texto y el del fondo según WCAG AA y AAA, para texto normal, texto grande y componentes de interfaz, con correcciones sugeridas.
Cargando Comprobador de contraste…
Tus archivos nunca salen de tu dispositivo
Cómo usar Comprobador de contraste
- 1
Abre Comprobador de contraste en esta página. Se carga directamente en tu navegador.
- 2
Añade tu archivo, texto o valores y ajusta la configuración.
- 3
Copia o descarga el resultado. No se sube ni se guarda nada.
Acerca de esta herramienta
El texto con poco contraste es uno de los problemas de accesibilidad más comunes en la web, y molesta a cualquiera que lea en el móvil a pleno sol. Este comprobador de contraste de color calcula la relación de contraste entre un color de texto y uno de fondo y te dice si cumple las pautas WCAG 2. Si no cumple, sugiere los colores más cercanos que sí lo hacen, para que lo corrijas sin cambiar tu diseño.
Cómo comprobar el contraste
- Introduce el color del texto y el del fondo, o elígelos de forma visual.
- Lee la relación de contraste y si aprueba o no en cada nivel.
- Mira la vista previa en vivo con texto normal, títulos grandes y letra pequeña.
- Si un nivel falla, usa una corrección sugerida o intercambia los dos colores para probar al revés.
- Copia el CSS de la combinación que aprueba.
Requisitos de contraste WCAG
| Elemento | AA | AAA |
|---|---|---|
| Texto normal | 4,5:1 | 7:1 |
| Texto grande (24px, o 18,66px en negrita) | 3:1 | 4,5:1 |
| Componentes de interfaz e iconos | 3:1 | no definido |
AA es el nivel al que se refieren la mayoría de leyes y políticas de accesibilidad. AAA es más estricto y se recomienda para textos largos. El texto en negrita de unos 18px también cuenta como texto grande.
Cómo se calcula la relación
El comprobador convierte ambos colores a luminancia relativa, una medida del brillo percibido, y divide el más claro más 0,05 entre el más oscuro más 0,05. El resultado va de 1:1 (sin contraste, el mismo color) a 21:1 (negro sobre blanco).
Consejos para colores accesibles
- El texto gris sobre blanco es el culpable habitual: #767676 es aproximadamente el gris más claro que aún aprueba AA para texto normal sobre blanco.
- Revisa todos los estados: placeholders, botones desactivados, enlaces, colores hover y texto sobre imágenes.
- No dependas solo del color para transmitir significado, como el rojo para errores; añade un icono o texto.
- Prueba pronto los colores de marca, porque los amarillos vivos y los azules claros suelen fallar como color de texto.
¿Diseñas un esquema completo? El generador de paletas de colores muestra el contraste de cada color, y el conversor de colores traduce valores entre HEX, RGB y HSL.
Preguntas frecuentes
¿Qué relación de contraste exige WCAG AA?
Al menos 4,5:1 para texto normal y 3:1 para texto grande y componentes de interfaz como botones, bordes de formularios e iconos.
¿Qué cuenta como texto grande?
Texto de al menos 24px, o texto en negrita de al menos unos 18,66px (14 puntos). El texto grande necesita 3:1 para AA y 4,5:1 para AAA.
¿Qué diferencia hay entre AA y AAA?
AA es el nivel estándar al que remiten la mayoría de leyes de accesibilidad. AAA es más estricto, 7:1 para texto normal, y se recomienda para pasajes largos de texto.
¿Cuál es la relación de contraste más alta posible?
21:1, que es texto negro sobre fondo blanco o al revés.
Mi color de marca no aprueba. ¿Qué hago?
Usa una corrección sugerida, que mantiene el tono pero ajusta la luminosidad hasta aprobar, o usa el color de marca en títulos grandes y fondos en lugar del texto principal.
¿Comprueba texto sobre imágenes?
No. Comprueba dos colores sólidos. Para texto sobre fotos, prueba el color contra las zonas más claras y más oscuras de la imagen detrás del texto.