Accessible & Inclusive Design

Accessibility is usually introduced late, as a list of fixes handed to whoever is closest to the code. By then the decisions that matter have already been made: the colour palette, the type scale, the order of the form fields, the way a menu opens. Retrofitting around those is expensive, and it rarely produces something anyone enjoys using.

Treated as a design constraint from the first sketch, it costs almost nothing and improves the work for everybody. Every project in this studio starts from that assumption, and the practices below are the ones that have earned their place.

Contrast is a design decision, not a test result

A 4.5:1 ratio is the floor, not the target. Picking colours that clear it comfortably is easier at the palette stage than at the review stage, and it protects the work from the real world — a phone at midday, a projector, a cheap monitor with the brightness turned down.

Where a brand colour cannot carry text, it does not have to. Use it for surfaces, borders and accents, and give the words a colour that can hold them.

Never let colour carry meaning alone

Roughly one in twelve men has some form of colour vision deficiency. A red field border, a green success state and a chart series told apart only by hue all fail for them, and for anyone printing in greyscale.

Pair every colour signal with a second one: an icon, a label, a change in weight, a pattern. It takes one extra element and it makes the interface clearer for everyone, not only for the people it was added for.

Write the markup the content actually is

A heading that is a heading, a button that is a button, a list that is a list. Most of what a screen reader needs is already in HTML, and most accessibility problems come from reaching past it — a `div` with a click handler, a paragraph styled to look like a title, a link that goes nowhere.

The test is quick: turn off the stylesheet. If the page still reads in a sensible order and every control is still reachable by keyboard, the structure is sound.

Motion should be an enhancement, never a requirement

Animation carries meaning — where a panel came from, what just changed, how far through a process someone is. It should never be the only thing carrying it, and it should always be optional.

Honour `prefers-reduced-motion`, keep transitions under half a second, and avoid large parallax movement near text. For a significant number of people, motion is not a flourish; it is a reason to close the tab.