Design System Colors
Token palette, contrast-safe badge combinations, and hover-state patterns used across A11ySolutions products. All pairings meet WCAG 2.1 AA contrast minimums (4.5 : 1 for normal text).
Token Palette
primary
#075f47
primary-light
#E8F0EC
primary-foreground
#ffffff
background
#ffffff
foreground
#171717
card
#ffffff
card-foreground
#171717
secondary
#f5f5f5
secondary-foreground
#1f2937
muted
#f5f5f5
muted-foreground
#52525b
accent
#f5f5f5
accent-foreground
#1f2937
destructive
oklch(0.577 0.245 27.325)
error
#b91c1c
error-light
#fef2f2
warning
#92400e
warning-light
#FDF8EC
info
#1d4ed8
info-light
#eff6ff
border
#e5e7eb
input
#e5e7eb
ring
#a1a1aa
chart-1
oklch(0.646 0.222 41.116)
chart-2
oklch(0.6 0.118 184.704)
chart-3
oklch(0.398 0.07 227.392)
chart-4
oklch(0.828 0.189 84.429)
chart-5
oklch(0.769 0.188 70.08)
Soft Badges — Color Contrast
Lightweight status badges with background/text pairs that pass WCAG AA contrast. Use these instead of saturated badges for softer UI.
bg: #fef2f2 · fg: #b91c1c
bg: #E8F0EC · fg: #075f47
bg: #FDF8EC · fg: #92400e
bg: #eff6ff · fg: #1d4ed8
Hover States — Color Contrast
Interactive cards from A11ySolutions products showing idle → hover background transitions with icon and text contrast preserved.
Warning card
Hover me to see the transition
bg
bg-warning-light
hover
hover:bg-warning-light-hover
border
border-warning-border
icon
text-warning
text
text-foreground
label
text-muted-foreground
Success card
Hover me to see the transition
bg
bg-primary-light
hover
hover:bg-[#d9e9e0]
border
border-[#b6d4c4]
icon
text-primary
text
text-foreground
label
text-muted-foreground
Error card
Hover me to see the transition
bg
bg-error-light
hover
hover:bg-error-light-hover
border
border-error-border
icon
text-error
text
text-foreground
label
text-muted-foreground