Verificador de contraste WCAG
Introduce colores de primer plano y fondo para ver al instante la relacion de contraste y los resultados WCAG 2.2 AA/AAA, con sugerencias, historial y enlace para compartir.
Introduce colores arriba para ver la vista previa en vivo.
Guia
Como usar el verificador de contraste
- 1 Introduce un color de primer plano
Escribe un color en el campo PP en formato HEX, RGB o HSL. Tambien puedes hacer clic en la muestra de color para abrir el selector nativo.
- 2 Introduce un color de fondo
Escribe o selecciona un color de fondo en el campo FN. Se admiten valores alfa.
- 3 Lee la relacion de contraste
La herramienta calcula al instante la relacion WCAG 2.x y la muestra con 2 decimales (p. ej. 4,52:1).
- 4 Consulta las insignias AA y AAA
Cuatro insignias muestran el resultado para los niveles WCAG 2.2: AA Normal, AA Grande, AAA Normal y AAA Grande.
- 5 Usa la vista previa en vivo
La tarjeta de vista previa muestra texto normal (16 px) y grande (24 px) para visualizar tu combinacion de colores.
- 6 Aplica una sugerencia de color
Si el par falla AA Normal, la barra de sugerencias ofrece hasta 5 opciones de color ajustadas. Haz clic en una muestra para aplicarla.
- 7 Comparte o copia el resultado
Haz clic en "Compartir enlace" para copiar un enlace con tu par de colores, o en "Copiar resultado" para copiar la relacion y el estado WCAG.
- 8 Intercambia o restablece
Usa el boton de intercambio entre los dos campos, o haz clic en Restablecer para borrar ambos campos y volver al estado vacio.
Referencia
Umbrales de contraste WCAG 2.2
| Nivel | Relacion minima | Caso de uso |
|---|---|---|
| AA Texto normal | 4,5:1 | Texto del cuerpo, etiquetas, enlaces menores de 18,67 px o 14 px negrita |
| AA Texto grande | 3:1 | Texto >= 18,67 px normal, o >= 14 px negrita |
| AAA Texto normal | 7:1 | Texto mejorado para usuarios con baja vision |
| AAA Texto grande | 4,5:1 | Texto grande mejorado |
Preguntas frecuentes
Que es la relacion de contraste WCAG?
La relacion de contraste WCAG es un numero de 1:1 (sin contraste) a 21:1 (contraste maximo). Se calcula a partir de la luminancia relativa de los dos colores segun la formula sRGB IEC 61966-2-1 definida en WCAG 2.x.
Cual es la relacion minima para WCAG AA?
WCAG 2.2 Nivel AA requiere una relacion de al menos 4,5:1 para texto normal y 3:1 para texto grande.
Cual es la diferencia entre AA y AAA?
AA es el nivel de conformidad estandar. AAA es el nivel mejorado, que requiere 7:1 para texto normal y 4,5:1 para texto grande.
Como afecta el alfa (transparencia) a la relacion de contraste?
Los colores transparentes se componen sobre el fondo y luego sobre blanco opaco, segun la especificacion WCAG. La relacion se calcula a partir de los colores compuestos y opacos.
Que formatos de color acepta la herramienta?
La herramienta acepta HEX (#RGB, #RGBA, #RRGGBB, #RRGGBBAA), RGB/RGBA y HSL/HSLA, con valores alfa de 0 a 1 o de 0% a 100%.
La herramienta envia mis colores a un servidor?
No. Todos los calculos se realizan en tu navegador. Tus datos de color nunca se envian a ninguna parte.
Por que 4,50 puede fallar AA Normal?
La especificacion WCAG compara la relacion sin redondear con el umbral. Una relacion de 4,4996 se muestra como 4,50 pero falla porque el valor bruto es inferior a 4,5.