Cuadrícula de contraste
Verifica el contraste de accesibilidad entre múltiples colores a la vez
Acerca de Cuadrícula de contraste
Genera una cuadrícula de ratio de contraste WCAG para todas tus combinaciones de colores — verifica la conformidad de accesibilidad de un vistazo, estilo Eightshapes.
Cómo usar Cuadrícula de contraste
- 1Agrega colores a tu paleta usando valores HEX y etiquetas opcionales.
- 2La cuadrícula genera automáticamente ratios de contraste para cada combinación de primer plano/fondo.
- 3Revisa qué pares cumplen los niveles WCAG AA o AAA y cuáles fallan.
- 4Filtra la cuadrícula para mostrar todas las combinaciones, solo las que pasan o solo las que fallan.
- 5Exporta la cuadrícula completa como CSV para documentación o revisión del equipo.
Consejos
- Comienza con los colores de tu marca y neutros para encontrar rápidamente qué pares texto/fondo son accesibles.
- WCAG AA requiere un ratio mínimo de 4.5:1 para texto normal y 3:1 para texto grande.
- Exporta el CSV e inclúyelo en la documentación de tu sistema de diseño como referencia para desarrolladores.
Límites gratis vs. pago
Gratis: colores limitados. Starter+: colores ilimitados en la paleta.
Herramientas relacionadas
Equipo OneKitToolsActualizado 2.21.4