Por defecto
Los controles enfocados deben seguir siendo legibles en todos los estados.
Accesibilidad primero
Comprobador de contraste Pro
Comprobador practico WCAG 2.1/2.2 para contraste de texto, iconos y bordes en estados por defecto, hover, focus y disabled. Revisa resultados AA/AAA, corrige pares debiles y exporta tokens listos para produccion.
Por defecto
Estado principalHover
InteraccionFoco
Focus con tecladoDeshabilitado
DeshabilitadoCorregir contraste bajo automaticamente
Elige un estado, selecciona un elemento y ajusta automaticamente al color accesible mas cercano sin cambiar demasiado la direccion visual.
Vista previa en vivo del estado
Usa esta vista para evaluar legibilidad y equilibrio visual antes de llevarlo a produccion.
Hover
Los controles enfocados deben seguir siendo legibles en todos los estados.
Foco
Los controles enfocados deben seguir siendo legibles en todos los estados.
Deshabilitado
Los controles enfocados deben seguir siendo legibles en todos los estados.
Informe de contraste WCAG
El estado de texto usa el umbral AA para texto (4.5:1). Iconos y bordes usan el umbral no textual (3:1).
| Estado | Ratio de texto | Texto AA | Ratio de icono | Icono AA | Ratio de borde | Borde AA |
|---|---|---|---|---|---|---|
| Por defecto | 17.06 | Aprobado | 17.06 | Aprobado | 9.90 | Aprobado |
| Hover | 5.17 | Aprobado | 5.17 | Aprobado | 1.30 | Fallido |
| Foco | 4.10 | Fallido | 4.10 | Aprobado | 1.48 | Fallido |
| Deshabilitado | 3.86 | Fallido | 3.86 | Aprobado | 2.08 | Fallido |
Por defecto
Ratio de texto17.06:1Aprobado
Ratio de icono17.06:1Aprobado
Ratio de borde9.90:1Aprobado
Hover
Ratio de texto5.17:1Aprobado
Ratio de icono5.17:1Aprobado
Ratio de borde1.30:1Fallido
Foco
Ratio de texto4.10:1Fallido
Ratio de icono4.10:1Aprobado
Ratio de borde1.48:1Fallido
Deshabilitado
Ratio de texto3.86:1Fallido
Ratio de icono3.86:1Aprobado
Ratio de borde2.08:1Fallido
:root {
--color-default-text: #0f172a;
--color-default-icon: #0f172a;
--color-default-border: #334155;
--color-default-bg: #f8fafc;
--color-hover-text: #ffffff;
--color-hover-icon: #ffffff;
--color-hover-border: #1d4ed8;
--color-hover-bg: #2563eb;
--color-focus-text: #ffffff;
--color-focus-icon: #ffffff;
--color-focus-border: #0ea5e9;
--color-focus-bg: #0284c7;
--color-disabled-text: #64748b;
--color-disabled-icon: #64748b;
--color-disabled-border: #94a3b8;
--color-disabled-bg: #e2e8f0;
}
.a11y-button {
color: var(--color-default-text);
background: var(--color-default-bg);
border: 1px solid var(--color-default-border);
}
.a11y-button:hover {
color: var(--color-hover-text);
background: var(--color-hover-bg);
border-color: var(--color-hover-border);
}
.a11y-button:focus-visible {
color: var(--color-focus-text);
background: var(--color-focus-bg);
border-color: var(--color-focus-border);
}
.a11y-button[disabled] {
color: var(--color-disabled-text);
background: var(--color-disabled-bg);
border-color: var(--color-disabled-border);
}Comprobador WCAG de contraste: que hace y como usarlo
Esta herramienta verifica el contraste de color de la interfaz frente a los umbrales WCAG en estados reales de componentes, no solo en mockups estaticos. Ayuda a detectar problemas de legibilidad en botones, formularios y estados antes del lanzamiento.
Como usarlo: 1) introduce colores de frente/fondo por estado, 2) revisa el informe, 3) corrige automaticamente los pares fallidos, 4) exporta tokens CSS/JSON y aplicalos en tu sistema de diseno.
FAQ del comprobador de contraste WCAG
Que valida este comprobador?
Valida el contraste entre foreground y background para texto, iconos y bordes en estados interactivos usando umbrales WCAG (texto AA/AAA y no-texto 3:1).
Como hago una revision rapida de contraste antes del lanzamiento?
Rellena los colores por estado, revisa las filas fallidas, aplica la correccion automatica y exporta los tokens actualizados. Normalmente esto basta como primera pasada antes de QA.
La correccion automatica rompe el estilo de marca?
En la mayoria de los casos, no. La correccion automatica prioriza el ajuste de luminosidad, por lo que el matiz y la identidad visual suelen mantenerse.
Que obtengo despues de corregir el contraste?
Obtienes variables CSS y tokens JSON exportables para todos los estados, listos para integracion en frontend y sistemas de diseno.