Accessible Colour, Typography and Focus

Accessible styling supports perception, reading and keyboard use.

body {
  color: #1f2933;
  background: #ffffff;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
}

a { color: #075985; }

:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 3px;
}

Maintain sufficient contrast and never communicate status through colour alone. Pair colour with text, icons or patterns.

Do not disable zoom, remove focus outlines or use tiny fixed text. Keep line lengths comfortable and headings visually distinct.

Reduced motion

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto;
    animation-duration: 0.01ms !important;
  }
}

Check

• Text/background contrast is sufficient.
• Focus indicator is obvious.
• Status includes words, not colour alone.
• Page works at 200% zoom.
• Motion is not required to understand content.