Cargando aplicación...
Preparando tu experiencia meskeIA
Verifica la accesibilidad según WCAG 2.1
Esta herramienta tiene carácter orientativo y está dirigida a profesionales del dominio que conocen sus limitaciones.
meskeIA no se responsabiliza de decisiones basadas en el uso de esta herramienta.
Este es un texto de ejemplo para visualizar el contraste entre el color de texto y el fondo.
Texto pequeño (14px) para verificar legibilidad.
Requiere ratio mínimo de 4.5:1. Aplica a texto menor de 18pt o 14pt negrita.
Requiere ratio mínimo de 3:1. Texto de 18pt o más, o 14pt negrita o más.
Máximo nivel de accesibilidad. Requiere 7:1 para normal y 4.5:1 para grande.
Un buen contraste mejora la legibilidad para personas con baja visión y en condiciones de luz adversas.
Domina los principios de contraste, comprende los niveles WCAG, y aprende a crear diseños accesibles desde el primer momento
Diferencias entre AA y AAA, requisitos mínimos, y cuándo usar cada nivel
| Criterio | Nivel AA | Nivel AAA |
|---|---|---|
| Texto Normal | 4.5:1 mínimo | 7:1 mínimo |
| Texto Grande | 3:1 mínimo | 4.5:1 mínimo |
| Definición Grande | 18pt+ o 14pt+ negrita | 18pt+ o 14pt+ negrita |
| Obligatoriedad Legal | ✅ Requerido por ley en UE, EEUU (sector público) | Recomendado (no obligatorio) |
| Cobertura Discapacidad | Usuarios con baja visión moderada | Baja visión severa, ceguera al color |
| Cuándo Usar | Sitios web públicos, e-commerce, apps corporativas | Apps de salud, finanzas, contenido crítico para lectura prolongada |
| Ideal para | Mayoría de proyectos web y móviles | Proyectos con audiencia mayor de 60 años, interfaces médicas/legales |
Escenarios reales donde el contraste de colores es crítico
Ejemplo:
Texto body: #333333 sobre #FFFFFF (11.7:1 - AAA)
Enlaces: #0066CC sobre #FFFFFF (8.2:1 - AAA)
CTA: #FFFFFF sobre #2E86AB (4.52:1 - AA)Por qué funciona: El texto principal en gris oscuro pasa AAA fácilmente, los enlaces azules destacan sin sacrificar accesibilidad, y los botones CTA cumplen AA para llamar la atención sin perder legibilidad.
Ejemplo:
Headers: #1A1A1A sobre #F5F5F5 (15.3:1 - AAA)
Datos críticos: #DC3545 sobre #FFFFFF (5.5:1 - AA)
Gráficos: Paleta con contraste mínimo 4.5:1Por qué funciona: Dashboards requieren lectura rápida de métricas. Contraste AAA en headers mejora escaneo visual, y los datos críticos (como alertas) usan rojo que cumple AA para destacar sin comprometer accesibilidad.
Ejemplo:
Precio original: #999999 sobre #FFFFFF (2.8:1 - Falla)
Precio descuento: #DC3545 sobre #FFFFFF (5.5:1 - AA)
Botón Comprar: #FFFFFF sobre #28A745 (3.15:1 - AA grande)Por qué funciona: El precio original tachado puede fallar (es decorativo), pero el precio de venta en rojo cumple AA para llamar la atención. El botón "Comprar" en verde cumple AA para texto grande (18pt+).
Ejemplo:
Background: #1A1A1A
Texto principal: #E5E5E5 (13.5:1 - AAA)
Texto secundario: #B0B0B0 (7.8:1 - AAA)
Enlaces: #7FB3D3 (5.2:1 - AA)Por qué funciona: El modo oscuro requiere cuidado especial. Usar gris claro (#E5E5E5) en lugar de blanco puro reduce fatiga visual sin perder contraste. Los enlaces en azul claro cumplen AA y destacan sobre el fondo negro.
Ejemplo:
Párrafos: #333333 sobre #FFFFFF (11.7:1 - AAA)
Títulos: #000000 sobre #FFFFFF (21:1 - AAA)
Citas: #666666 sobre #F9F9F9 (5.7:1 - AA)Por qué funciona: Blogs, revistas online y documentos requieren lectura prolongada. AAA en texto principal reduce fatiga visual. Citas con fondo gris muy claro mantienen distinción visual sin perder contraste AA.
Ejemplo:
Todo el texto: AA obligatorio (mínimo 4.5:1)
Formularios: Etiquetas con contraste 7:1 (AAA)
Errores: #C82333 sobre #FFFFFF (6.4:1 - AA)Por qué funciona: En UE (Directiva 2016/2102) y EEUU (Section 508), las webs del sector público DEBEN cumplir AA. Apuntar a AAA en formularios críticos protege contra demandas y mejora usabilidad para todos.
AA es el estándar legal exigido por normativas de accesibilidad (WCAG 2.1, Directiva UE 2016/2102, Section 508). Requiere 4.5:1 para texto normal y 3:1 para texto grande. Es suficiente para la mayoría de proyectos web y móviles.
AAA es el nivel óptimo (7:1 normal, 4.5:1 grande) recomendado para:
💡 Consejo práctico: Si es tu primera auditoría de accesibilidad, apunta a AA. Una vez conseguido, mejora gradualmente los elementos más críticos (títulos, formularios, CTAs) a AAA.
En la Unión Europea, la Directiva (UE) 2016/2102 obliga a:
En Estados Unidos, la Section 508 y ADA (Americans with Disabilities Act) aplican a:
En España, el RD 1112/2018 exige cumplimiento total desde septiembre 2020 para webs públicas.
💡 Consejo práctico: Aunque tu proyecto no sea legalmente obligado, cumplir AA mejora el SEO (Google penaliza mala accesibilidad desde 2021) y amplía tu audiencia potencial en +15% (personas con discapacidad visual).
Sí, es crítico verificar ambos. El contraste no es simétrico: un par que funciona en modo claro puede fallar en oscuro.
Error común: Usar #FFFFFF sobre fondo negro (#000000) en modo oscuro. Aunque el ratio es 21:1 (perfecto), el blanco puro crea deslumbramiento (glare) que causa fatiga visual.
Solución recomendada:
💡 Consejo práctico: Crea un toggle en tu design system y verifica TODOS los pares de color en ambos modos antes de lanzar. Herramientas como Figma permiten plugins de verificación automática (Stark, A11y).
Sí, es suficiente para cumplimiento legal y la mayoría de casos de uso. Pasar AA significa:
Considera subir a AAA si:
💡 Consejo práctico: Prioriza AAA en elementos críticos (formularios, mensajes de error, CTAs) aunque el resto sea AA. Esto te da un balance óptimo entre usabilidad y esfuerzo de diseño.
Sí, indirectamente. Google no verifica contraste directamente, pero desde 2021 incluye Core Web Vitals de Accesibilidad en su algoritmo de ranking.
Impacto en SEO:
Datos concretos:Sitios con Lighthouse Accessibility Score >90 tienen un 23% más de tráfico orgánico que aquellos con <50 (estudio de HTTPArchive 2023).
💡 Consejo práctico: Ejecuta Google Lighthouse en Chrome DevTools (F12 → Lighthouse → Accessibility). Corrige TODOS los errores de contraste que detecte para maximizar tu score.
Texto sobre imágenes es el escenario más difícil porque el contraste varía según la zona de la imagen. WCAG exige verificar el contraste mínimo (peor zona).
Técnicas recomendadas:
Herramientas específicas:
💡 Consejo práctico: Si el texto es crítico (CTA, títulos hero), usa SIEMPRE overlay o fondo sólido. Las imágenes pueden cambiar (CMS dinámico) y romper tu contraste inicial.
Esta herramienta verifica contraste de un par de colores a la vez. Para auditorías completas y automatización, combina con:
Herramientas de auditoría completa:
Herramientas de diseño (Figma, Adobe XD):
Automatización CI/CD:
💡 Consejo práctico: Workflow recomendado: Diseña con Stark en Figma → Verifica con esta herramienta → Audita con WAVE antes de lanzar → Automatiza con Pa11y en producción.
Problema común: Tu azul corporativo (#5A9FD4) falla AA sobre blanco (3.2:1). No puedes cambiar el color de marca, ¿qué haces?
Técnica: Mantén la marca en elementos grandes, ajusta luminosidad en texto normal.
Herramientas útiles:
💡 Consejo práctico: Documenta en tu design system: "Color primario: #5A9FD4 (solo elementos grandes). Texto primario: #2E7DB3 (AA compliant)". Esto evita confusión en el equipo de diseño.
Haz un inventario completo de combinaciones texto-fondo en tu sitio: body text, títulos, enlaces, botones, formularios, badges, alertas, tooltips, breadcrumbs, menús de navegación, footers, etc. No olvides el modo oscuro si lo tienes implementado. Crea una hoja de cálculo con columnas: Elemento, Color Texto, Color Fondo, Tamaño Fuente, Peso Fuente (normal/bold).
Introduce cada par de colores en la calculadora. Anota el ratio obtenido y si pasa AA/AAA. Para texto <18pt (o <14pt no negrita), necesitas 4.5:1 (AA) o 7:1 (AAA). Para texto ≥18pt (o ≥14pt negrita), necesitas 3:1 (AA) o 4.5:1 (AAA). Marca con 🔴 los que fallen, 🟡 los que pasen AA pero fallen AAA, y 🟢 los que pasen AAA.
No todos los elementos tienen el mismo impacto. Prioridad ALTA: CTAs (botones "Comprar", "Registrarse"), formularios (labels, inputs, errores), alertas críticas, títulos principales. Prioridad MEDIA: Enlaces de navegación, breadcrumbs, texto body, tooltips. Prioridad BAJA: Footers, texto secundario decorativo (ej: precio tachado), badges informativos. Corrige ALTA primero, luego MEDIA, y BAJA solo si tienes tiempo.
Para elementos que fallen: Convierte el color problemático a HSL (usa /conversor-colores/). Si el texto falla por ser muy claro, reduce L (lightness) en incrementos de 5% hasta pasar AA. Si el texto falla por ser muy oscuro, aumenta L. Mantén H (hue) y S (saturation) sin cambios para preservar identidad de marca. Ejemplo: #999999 sobre #FFFFFF (2.8:1 - Falla) → Reducir L de 60% a 40% → #666666 (5.74:1 - Pasa AA).
Después de ajustar colores, vuelve a verificar TODOS los pares afectados. No confíes solo en números:Abre tu sitio en un navegador real y prueba legibilidad en condiciones de luz natural, con brillo de pantalla al 50%, y en dispositivos móviles (pantallas más pequeñas = contraste crítico). Pide a 2-3 personas (especialmente >60 años) que lean el contenido y te confirmen que es legible sin esfuerzo.
Crea variables CSS en tu design system con los pares validados: --text-primary: #333333;, --bg-primary: #FFFFFF;, --link-color: #0066CC;, etc. Añade comentarios con el ratio: /* Contraste 11.7:1 - AAA */. Documenta en Figma/Storybook con badges "AA Compliant" o "AAA Compliant" para que diseñadores usen solo combinaciones aprobadas. Esto previene regresiones futuras.
Para proyectos grandes, integra herramientas de auditoría automática en tu pipeline: Pa11y (CLI que falla el build si detecta errores de contraste), axe-core (librería npm para tests unitarios de accesibilidad), Lighthouse CI (ejecuta Lighthouse en cada PR y bloquea merge si Accessibility Score < 90). Esto garantiza que nadie introduzca colores no accesibles en nuevas features. Tiempo de setup: 1-2 horas. Beneficio: Ahorras 10+ horas anuales en regresiones.
Convierte colores a HSL y modifica solo el componente L (lightness) para mantener identidad de marca mientras cumples contraste.
Si nunca has auditado accesibilidad, apunta a cumplir AA primero. Una vez logrado, mejora gradualmente elementos críticos a AAA.
No asumas simetría: un par que funciona en claro puede fallar en oscuro. Usa #E5E5E5 (no #FFFFFF) para evitar deslumbramiento.
Documenta en tu design system solo combinaciones aprobadas. Añade comentarios CSS con el ratio para referencia futura.
Chrome DevTools (F12 → Inspeccionar → Accessibility) muestra contraste detectado en vivo. Úsalo para debugging rápido.
8% de hombres tienen daltonismo. No uses SOLO color para transmitir información crítica (ej: rojo=error). Añade iconos o texto.