Verificador Contraste Color Gratis: WCAG AA AAA Accesibilidad Online
153 usosTexto de muestra
The quick brown fox jumps over the lazy dog. 0123456789
15.39:1
Relación de contraste
Consejos Accesibilidad
Ratio de contraste WCAG
WCAG AA requiere ratio 4.5:1 para texto normal y 3:1 para texto grande. AAA requiere 7:1 y 4.5:1 respectivamente.
Cumplimiento AA y AAA
Se muestra si la combinación cumple WCAG AA y AAA para texto normal y grande. Verde = cumple, rojo = no cumple.
Texto de ejemplo
Previsualiza cómo se ve tu texto con los colores elegidos. Verifica legibilidad antes de implementar.
Preguntas frecuentes
¿Qué ratio de contraste necesito?
WCAG AA: 4.5:1 para texto normal, 3:1 para grande (>18px). AAA: 7:1 y 4.5:1. Cumplir AA es el mínimo recomendado para accesibilidad.
¿Qué es WCAG?
Web Content Accessibility Guidelines — pautas internacionales para hacer contenido web accesible a personas con discapacidades visuales.
¿Cómo mejorar el contraste?
Oscurece el texto o aclara el fondo (o viceversa). Evita combinaciones como gris claro sobre blanco.
¿Puedo probar texto sobre un fondo de imagen?
No, esta herramienta solo funciona con pares de colores sólidos. Para imágenes necesitarás otro programa. Toma una captura de pantalla del área y usa un cuentagotas para muestrear los píxeles más claros y más oscuros donde esté el texto. Prueba ambos contra tu color de texto. Si alguno falla, considera añadir una capa semitransparente detrás del texto — un negro al 40% de opacidad suele funcionar bien.
¿El soporte acepta valores HSL o RGB en lugar de HEX?
Sí, puedes ingresar colores en HEX, RGB o HSL. Solo pega el valor en el campo — la herramienta detecta el formato automáticamente. Por ejemplo, escribe 'rgb(255, 0, 0)' o 'hsl(0, 100%, 50%)' y funciona al instante. Es muy útil cuando tomas colores directamente del código CSS.
¿Puedo usar este verificador para probar texto contra su propio color de fondo en estados de hover?
Sí. Ingresa primero el par predeterminado, luego intercambia los colores de hover por separado. WCAG exige que los estados de hover y focus también cumplan con los contrastes mínimos — no solo el texto estático. Por ejemplo, si el fondo de tu botón cambia de #007bff a #0056b3 al pasar el ratón, prueba ambos contra el texto blanco. Un error común: los diseñadores aclaran demasiado los fondos en hover, lo que arruina el contraste.
¿El contraste solo importa para el texto, o elementos de interfaz como íconos y bordes también deben cumplir?
Los elementos no textuales también necesitan contraste, pero con reglas ligeramente distintas. WCAG exige una relación 3:1 para componentes de interfaz y objetos gráficos como íconos, botones y bordes de formularios. Pruebe aquí el color de su ícono contra el fondo. Si la relación es menor a 3:1, no cumple AA. Un consejo: use el mismo color del texto para los íconos.
¿Puedo confiar en la relación de contraste si mis colores se ven similares en pantalla?
No confíes en tus ojos — son pésimos juzgando contraste. Dos colores que te parecen bien podrían alcanzar solo 2.5:1, fallando incluso WCAG AA. Esta herramienta calcula matemáticamente, considerando la percepción humana del color y la luminancia. Por ejemplo, un gris claro #C0C0C0 sobre blanco #FFFFFF se ve legible pero solo da 1.6:1. Verifica siempre con nuestro indicador de aprobado/reprobado.
Cómo Verificar Contraste
- Selecciona color de texto (foreground)
- Selecciona color de fondo (background)
- El ratio de contraste se calcula al instante
- Se muestra cumplimiento WCAG AA y AAA
- Previsualiza con texto de ejemplo