Theme customizer
Your values, the same Kaotypr components.
Size, spacing and radius sliders show pixels. Exports use rem (16px = 1rem).
Saved configs
Saved only in this browser. Reset does not delete saved configs.
Export & share
8 contrast warnings. Review the report before using this config.
Import the generated CSS after the base theme. Load the selected font variables on html, then explicitly adopt the config with the installed drift checker. No named presets or dependency changes.
Contrast checks · 8 warnings
Fixed thresholds: 4.5:1 for text, 3:1 for non-text. OKLCH colors are converted and composited for sRGB diagnostics; out-of-gamut colors are flagged. Preview component opacity and focus treatments still need a rendered check.
- light: foreground / background
19.79:1 / 4.5:1 · Pass - light: foreground-subtle / background
9.21:1 / 4.5:1 · Pass - light: card-foreground / card
19.79:1 / 4.5:1 · Pass - light: popover-foreground / popover
19.79:1 / 4.5:1 · Pass - light: muted-foreground / muted
4.34:1 / 4.5:1 · Review - light: primary-foreground / primary
17.16:1 / 4.5:1 · Pass - light: secondary-foreground / secondary
11.52:1 / 4.5:1 · Pass - light: accent-foreground / accent
16.42:1 / 4.5:1 · Pass - light: ring / background
2.59:1 / 3:1 · ReviewToken-level check; translucent component treatments need a rendered check.
- light: border-input / background
1.58:1 / 3:1 · ReviewToken-level check; translucent component treatments need a rendered check.
- light: disabled foreground / surface
7.49:1 / 4.5:1 · PassControl-level estimate; also check the rendered component.
- light: disabled border / surface
3.21:1 / 3:1 · PassControl-level estimate; also check the rendered component.
- light: disabled border / background
3.95:1 / 3:1 · PassControl-level estimate; also check the rendered component.
- light: switch thumb / on
17.41:1 / 3:1 · PassControl-level estimate; also check the rendered component.
- light: switch thumb / off
1.54:1 / 3:1 · ReviewControl-level estimate; also check the rendered component.
- light: slider thumb / range
17.41:1 / 3:1 · PassControl-level estimate; also check the rendered component.
- light: slider thumb / track
1.54:1 / 3:1 · ReviewControl-level estimate; also check the rendered component.
- light: slider range / track
11.33:1 / 3:1 · PassControl-level estimate; also check the rendered component.
- dark: foreground / background
18.96:1 / 4.5:1 · Pass - dark: foreground-subtle / background
6.12:1 / 4.5:1 · Pass - dark: card-foreground / card
17.16:1 / 4.5:1 · Pass - dark: popover-foreground / popover
17.16:1 / 4.5:1 · Pass - dark: muted-foreground / muted
5.83:1 / 4.5:1 · Pass - dark: primary-foreground / primary
14.22:1 / 4.5:1 · Pass - dark: secondary-foreground / secondary
7.94:1 / 4.5:1 · Pass - dark: accent-foreground / accent
14.48:1 / 4.5:1 · Pass - dark: ring / background
4.18:1 / 3:1 · PassToken-level check; translucent component treatments need a rendered check.
- dark: border-input / background
1.47:1 / 3:1 · ReviewToken-level check; translucent component treatments need a rendered check.
- dark: disabled foreground / surface
8.07:1 / 4.5:1 · PassControl-level estimate; also check the rendered component.
- dark: disabled border / surface
3.82:1 / 3:1 · PassControl-level estimate; also check the rendered component.
- dark: disabled border / background
5.01:1 / 3:1 · PassControl-level estimate; also check the rendered component.
- dark: switch thumb / on
1.22:1 / 3:1 · ReviewControl-level estimate; also check the rendered component.
- dark: switch thumb / off
10.88:1 / 3:1 · PassControl-level estimate; also check the rendered component.
- dark: slider thumb / range
1.22:1 / 3:1 · ReviewControl-level estimate; also check the rendered component.
- dark: slider thumb / track
10.88:1 / 3:1 · PassControl-level estimate; also check the rendered component.
- dark: slider range / track
8.89:1 / 3:1 · PassControl-level estimate; also check the rendered component.