Accesibilidad y Color | — | —
Cuando diseñamos interfaces, elegir colores que se vean bien no siempre es suficiente. Una combinación visualmente atractiva puede resultar ilegible para personas con baja visión, daltonismo o quienes usan pantallas en condiciones de luz adversa. Esta app permite ingresar dos valores hexadecimales —uno para el fondo, otro para el texto o figura— y obtener de inmediato el ratio de contraste y su nivel de conformidad según la WCAG.
Color de fondo
Color de figura / texto
Color de acento
A
AA
AAA
A
Simulación de daltonismo
Criterios WCAG 2.1 — Contraste de color
| Nivel | Texto normal | Texto grande (+18pt / +14pt bold) | Uso recomendado |
|---|---|---|---|
| A | 3.0 : 1 | 3.0 : 1 | Mínimo aceptable, solo en casos muy específicos |
| AA | 4.5 : 1 | 3.0 : 1 | Estándar recomendado para la mayoría de interfaces |
| AAA | 7.0 : 1 | 4.5 : 1 | Máxima accesibilidad, ideal para texto crítico |
Salida CSS
Tokens y estilos de muestra con tus colores actuales.