Automated accessibility tools catch about a third of real issues. The rest were decided long before the build — in the moment someone picked a grey that looked elegant, or drew a form with the label inside the field.
The four decisions that cause most of the damage
1. Text contrast
Light grey on white is the most common failure on the web, and it is always a design choice. Body text needs a 4.5:1 ratio against its background. Large headings can go to 3:1. Check it in the design file, not after launch.
2. Placeholder-only labels
A placeholder disappears the moment someone types. If it was the only label, the user has now lost the question. Keep a visible label, or accept that half your form errors will be unexplainable.
3. Focus states
Removing the focus ring because it “looks messy” makes the site unusable by keyboard. If the default ring is ugly, design a better one — a two-pixel outline in your primary colour with a small offset looks intentional and works everywhere.
4. Meaning carried only by colour
Red for error, green for success — fine, as long as there is also an icon or a word. Around one in twelve men cannot reliably tell those two apart.
What this buys you
Better contrast helps everyone reading on a phone in sunlight. Visible focus helps power users. Real labels help anyone filling in a form while distracted, which is everyone.
Accessibility work almost never makes a design worse. It usually reveals that the design was relying on the reader having perfect conditions.
Build the four checks into your review and the audit at the end stops being frightening.





0 Comments