Comprobador de contraste
Comprueba el contraste WCAG entre un color de texto y un fondo, con vista previa en vivo y resultados AA / AAA.
Elige colores
Resultados del contraste
Relación de contraste
14.68:1
- Texto normal AA (4.5:1)✓ Cumple
- Texto grande AA (3:1)✓ Cumple
- Texto normal AAA (7:1)✓ Cumple
- Texto grande AAA (4.5:1)✓ Cumple
Vista previa del título
El texto de ejemplo muestra los colores de primer plano y de fondo.
¿Qué es el contraste de color?
El contraste de color es la diferencia de luminancia entre el texto y su fondo. WCAG fija ratios mínimos para que las personas con baja visión puedan leer el texto.
AA exige 4.5:1 en texto normal y 3:1 en texto grande. AAA sube a 7:1 y 4.5:1.
Cómo comprobar el contraste
- Introduce o elige el color del texto.
- Introduce o elige el color de fondo.
- Lee el ratio en vivo y la lista AA / AAA.
- Ajusta cualquiera de los colores hasta que pase.
Ejemplos de contraste
Negro sobre blanco
#000000 sobre #ffffff
21:1 — AAA
Texto normal típico
#1f2937 sobre #ffffff
14.7:1 — AAA
Combinación débil
#999999 sobre #ffffff
2.85:1 — No pasa en texto normal
Comprobador en el navegador frente a otras opciones
| Criterio | Comprobador de UrsaKit | DevTools del navegador | Cálculo manual |
|---|---|---|---|
| Selectores de color en vivo | Sí | Limitado | No |
| Lista AA / AAA | Sí | Parcial | No |
| Los datos salen del dispositivo | No, se ejecuta en el navegador | No | No |
Preguntas frecuentes
¿El comprobador es gratis?
Sí, sin cuenta y sin límite.
¿Qué ratio necesita el texto normal?
WCAG AA exige al menos 4.5:1 en texto normal. El texto grande de 18pt, o 14pt en negrita, solo necesita 3:1.
¿Qué se considera texto grande?
18pt (24px) normal o 14pt (18.66px) en negrita, según la definición de WCAG.
¿Pasar AAA garantiza accesibilidad?
Es una medida importante, pero la accesibilidad también incluye semántica, foco, teclado y movimiento.
¿Qué colores admite?
Valores hex de tres y seis dígitos, con o sin almohadilla.