Verificador de Contraste de Color
Verifica las relaciones de contraste de color WCAG 2.1 entre texto y fondos. Comprueba el cumplimiento AA y AAA para texto normal y grande.
Cómo usar Verificador de Contraste de Color
- 1Ingresa tu color de primer plano (texto), RGB o color nombrado.
- 2Ingresa tu color de fondo.
- 3Ve la relación de contraste y el cumplimiento WCAG 2.1 AA/AAA para texto normal y grande.
- 4Ajusta los colores hasta que tu diseño cumpla con los requisitos de accesibilidad.
ZenovayAnalytics
Analytics pensado para fundadores.
- Seguimiento de visitantes en tiempo real
- Privacidad primero, sin aviso de cookies
- Configurado en dos minutos
Herramientas relacionadas
Formateador y Validador JSON
Formatea, valida y embellece datos JSON con resaltado de sintaxis y detección de errores.Decodificador JWT
Decodifica e inspecciona tokens JWT. Consulta el encabezado, la carga útil y verifica firmas.Base64 Codificar/Decodificar
Codifica texto a Base64 o decodifica Base64 a texto. Soporta UTF-8 y datos binarios.Codificador/Decodificador de URL
Codifica o decodifica componentes de URL. Maneja caracteres especiales, cadenas de consulta y URLs completas.Preguntas frecuentes
¿Qué es el contraste de color WCAG?▾
WCAG (Web Content Accessibility Guidelines) requiere suficiente contraste de color entre el texto y su fondo para que las personas con baja visión o daltonismo puedan leer el contenido. La relación de contraste se mide de 1:1 (sin contraste) a 21:1 (negro sobre blanco).
¿Qué es el cumplimiento WCAG AA frente a AAA?▾
WCAG AA requiere una relación de contraste de 4,5:1 para texto normal y 3:1 para texto grande (18 pt o más, o 14 pt o más en negrita). AAA requiere 7:1 para texto normal y 4,5:1 para texto grande. AA es el mínimo legal para la mayoría de las leyes de accesibilidad (ADA, EN 301 549). AAA es el estándar de oro.
¿Qué se considera texto grande en WCAG?▾
El texto grande se define como 18 pt (24 px) o más para peso normal, o 14 pt (aproximadamente 18,67 px) o más para texto en negrita. El texto grande tiene requisitos de contraste más bajos porque es más fácil de leer con menor contraste.
¿Por qué el contraste de color importa para el SEO?▾
El texto con poco contraste aumenta la tasa de rebote (los usuarios se van), reduce el tiempo en la página y perjudica las puntuaciones de Core Web Vitals. Google usa señales de participación en el posicionamiento. Los sitios accesibles también se posicionan mejor porque sirven a más usuarios de manera efectiva.
¿Cómo corrijo un contraste bajo?▾
Oscurezca el color del texto o aclare el fondo (para temas claros). Pequeños ajustes incrementales de 10–20% en luminosidad suelen ser suficientes. Use una rueda de colores para mantener el tono de su marca mientras ajusta la luminosidad.
¿Qué formatos de color acepta esta herramienta?▾
Esta herramienta acepta colores hexadecimales (#fff, #ffffff), RGB (rgb(255,255,255)), colores CSS con nombre (white, red) y HSL (hsl(0, 0%, 100%)). El hexadecimal es el formato más fiable.
¿El contraste WCAG aplica a iconos y gráficos?▾
WCAG 1.4.11 (Contraste de elementos no textuales, Nivel AA) requiere una relación de contraste de 3:1 para componentes de la interfaz de usuario (iconos, botones, controles de formulario) y gráficos informativos. Esta herramienta se centra en el contraste de texto (WCAG 1.4.3 y 1.4.6).