Color-Blind Safe Palette
Design status indicators and data visualisations that remain distinguishable for users with deuteranopia, protanopia, and tritanopia using shape, pattern, and safe oklch hues.
focus-visible focus ring
Keyboard-only focus ring using :focus-visible.
Focus-Within Card Highlight
Use :focus-within to highlight an entire card or form group when any child element receives keyboard focus — no JavaScript required.
High Contrast Mode
Support Windows High Contrast Mode and forced-colors media query — keep UI usable when the OS overrides your color palette.
Keyboard Navigation Styles
Style keyboard navigation with :focus-visible — show focus rings only for keyboard users, never for mouse users, without any JavaScript.
Motion-Safe Animation
Write animations inside @media (prefers-reduced-motion: no-preference) so motion is opt-in by default — the safest approach for vestibular-sensitive users.
Prefers Reduced Transparency
Use prefers-reduced-transparency to replace frosted glass and translucent UI with solid alternatives for users who need clearer backgrounds.
Reduced Motion
Use prefers-reduced-motion to disable or slow animations for users who have requested less motion in their OS settings.
Skip to content link
An accessible skip-to-content link that appears on keyboard focus using :focus-visible.
Visually Hidden (Screen Reader Only)
The .sr-only pattern hides text visually while keeping it accessible to screen readers — the right way to add context for assistive technology.
WCAG contrast pair
Choose foreground and background color pairs that meet WCAG AA contrast ratios using oklch() — readable at any size.