Verificador de contraste WCAG
Prueba un par de colores
Contraste: —
| Criterio | Nivel | Umbral | Resultado |
|---|---|---|---|
| Introduce dos colores válidos… | |||
Vista previa
Texto normal (16 px): el que lee el 90% de tus usuarios.
Texto grande (24 px / 18,7 px negrita)
Elemento de interfaz: ▢ icono · ── borde · ⬤ control
Texto sobre imagen
Los checkers de pares asumen fondos planos; la web real pone texto sobre fotos. Sube una captura, dibuja con el ratón la caja donde va el texto (o teclea sus coordenadas) y se muestreará el fondo píxel a píxel.
Qué significan los criterios
1.4.3 Contraste (mínimo) — nivel AA: el texto normal necesita un ratio de contraste de al menos 4,5:1, y el texto grande (18 pt / 24 px, o 14 pt / 18,7 px en negrita) al menos 3:1, salvo texto decorativo o logotipos.
1.4.6 Contraste (mejorado) — nivel AAA: sube la exigencia a 7:1 para texto normal y 4,5:1 para texto grande.
1.4.11 Contraste no textual — nivel AA: partes de la interfaz que identifican el estado (bordes de campos, iconos, focos) necesitan al menos 3:1 frente a los colores adyacentes.
El ratio se calcula con la luminancia relativa de la especificación oficial: (L1 + 0,05) / (L2 + 0,05). En el modo imagen, cada píxel del fondo se evalúa contra el color del texto: el peor caso marca la zona hostil y el % de área que pasa indica si hace falta velo, recorte o mover el texto.