When designers first encounter accessibility requirements, the reaction is often concern: will this make everything look generic? Will I have to add thick blue focus rings everywhere? Will contrast requirements wash out my palette? No. The tradeoff between accessible and beautiful is largely false — it's a product of implementing accessibility as an afterthought rather than building it in from the start. ## Contrast Is Not Your Enemy WCAG 2.1 AA requires a 4.5:1 contrast ratio for normal text and 3:1 for large text (18pt+ or 14pt+ bold). On a dark theme, this is genuinely easier to satisfy than on light backgrounds. Our site uses `#e8e8e8` on `#0a0a0a` — that's a 17.6:1 ratio. Our mint accent `#4fffb0` on `#0a0a0a` is 11.5:1. These aren't accidents. The dark terminal aesthetic we chose is inherently high-contrast. The one area we monitor carefully: secondary text. Our `#666666` on `#0a0a0a` sits at 4.1:1 — just inside AA for normal text. We use this colour only for genuinely secondary content where users aren't relying on it for critical information. The takeaway: **choose your palette with contrast in mind from the start**, and you'll rarely need to make visual compromises. ## Focus Styles That Fit the Design The default browser focus ring is `outline: 2px solid blue`. On a dark site, it looks out of place. Many developers suppress it with `outline: none` — which is a WCAG failure (2.4.7). The right approach is to replace it with something that fits your design: ```css :focus-visible { outline: 2px solid #4fffb0; outline-offset: 2px; } ``` Two decisions here matter: 1. **Use `:focus-visible` not `:focus`** — this shows the ring only when navigating by keyboard, not on mouse click. It's what browsers do natively for most elements. 2. **Use your brand colour** — our mint green focus ring is immediately recognisable as "active" without feeling like a foreign object. ## Semantic HTML Does Most of the Work A large percentage of accessibility failures come from using the wrong HTML element. The `div` is not a button. The `span` is not a link. Screenreaders navigate by semantic landmarks, and when those landmarks are missing, the experience degrades. Our rules: - Interactive elements use `