Designing for Accessibility Without Sacrificing Aesthetics

Accessibility is often treated as a checklist item, something you bolt on after the design is "done." That framing creates unnecessary tension between accessibility and aesthetics.

The False Trade-Off

The most common objection I hear is that accessible colour contrast "kills" the brand palette. But this misses the point: if your colour choices make text hard to read, they were never good design choices to begin with. Good contrast is good design.

Focus States Are Not Ugly by Default

Default browser focus rings are ugly because browsers ship conservative defaults, not because focus states are inherently unattractive. A well-designed focus ring can use your brand's action colour, a subtle shadow, or a high-contrast outline that feels intentional.

Hierarchy Solves Many Problems

Most accessibility issues trace back to poor information hierarchy. When headings, body text, and secondary information are visually distinct, users with cognitive disabilities navigate more easily, and so does everyone else. Accessibility and clarity are the same thing.

Motion and Animation

Framer Motion and CSS transitions are fantastic tools, but they should respect `prefers-reduced-motion`. The fix is trivial and the impact on users with vestibular disorders is significant.

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

Accessible design is just good design with a wider aperture.