Comprobador de paleta y contraste
Crea paletas y valida el contraste WCAG 2.1 (AA/AAA). Haz clic en una muestra para aplicarla al primer plano (FG) o al fondo (BG).
Generador de paletas
Elige un color base y un esquema. Cada muestra muestra tintes → base → sombras. Usa las opciones “Aplicar a FG/BG” para decidir dónde se aplica una muestra al hacer clic.
Color base
Esquema
Pasos (tintes/sombras)
Comprobador de contraste
AA requiere 4.5:1 para texto normal y 3.0:1 para texto grande (≥24px normal o ≥18.66px en negrita). AAA es más estricto: 7.0:1 normal y 4.5:1 grande.
Primer plano
Fondo
Texto de muestra
Tamaño de fuente (px)
Peso
Contraste: —
AA Normal: —
AA Grande: —
AAA Normal: —
AAA Grande: —
Texto de vista previa
Etiqueta
Tabla: colores de la paleta vs. el fondo actual
| Color | Hex | Ratio | AA N | AA G | AAA N | AAA G |
|---|
Qué significan estos números
- El contraste usa la luminancia relativa sRGB (Y) con
(Llight+0.05)/(Ldark+0.05). - “Grande” = ≥24px normal, o ≥18.66px en negrita.
- Umbrales WCAG AA/AAA: 4.5/7.0 para texto normal; 3.0/4.5 para texto grande.
- Copiar CSS exporta
--color-fg,--color-bgy las primeras 12 paletas como--color-01..12.