Visual Accessibility

Color Contrast Validation

Validate contrast ratios across light and dark themes so glass depth never compromises readability.

Contrast Checklist

Run this pass for every major visual update.

Body copy on glass surfaces meets WCAG AA contrast ratio.
Muted labels remain readable in light and dark themes.
Focus rings and active states are visible against frosted backgrounds.
Status colors (success/warning/error) are never color-only without text.

Audit Scope

Prioritize high-traffic docs and demos first.

Landing hero + topbar controls

Component docs tables and code blocks

States: hover, focus-visible, selected, disabled

Semantic variants: success, warning, error badges and alerts

Reference Surface Pattern

TSX

1<div className="rounded-xl border border-border/60 bg-[var(--glass-3-surface)] p-4">
2  <p className="text-sm text-neutral-700 dark:text-neutral-200">
3    Secondary copy keeps AA contrast on glass surfaces.
4  </p>
5  <a
6    href="#"
7    className="mt-2 inline-flex text-sm font-medium text-[var(--color-foreground)] underline underline-offset-4"
8  >
9    Read the full accessibility spec
10  </a>
11</div>

Release Audit Script

Shell

1# Suggested release audit workflow
2pnpm --filter @glinui/docs build
3
4# Then validate key routes with browser accessibility tooling:
5# - /docs/getting-started
6# - /docs/components/radix/button
7# - /docs/components/radix/table
8# - /docs/forms-accessibility

Color Contrast Validation

Contrast Checklist

Audit Scope

Reference Surface Pattern

Release Audit Script

Related Guides