Making your website accessible: a practical checklist

Text needs at least a 4.5:1 contrast ratio against its background (3:1 for large text from 24px, or 18.66px bold). Check this with a contrast checker, not by eye: what looks readable on your own screen isn't automatically readable for everyone.

Never use color as the only way to convey information. An error message that's only colored red is invisible to someone who's colorblind without an icon or text alongside it.

Every interactive component (links, buttons, form fields, dropdowns, modals) must be reachable and operable with the keyboard alone. Test this by tabbing through your site without touching the mouse.

Make sure there's a visible focus indicator. Many CSS resets strip the default focus outline without putting an alternative back, leaving keyboard users with no idea where they are.

Use headings (h1 through h6) in a logical, descending order, not just because a bigger heading happens to look better. Screen reader users often navigate a page by its heading structure.

Give every image alt text that describes its function or content, and leave purely decorative images empty (alt="") so a screen reader skips them instead of reading them out.

Every form field has an associated label, not just a placeholder. A placeholder disappears the moment someone starts typing, and screen readers don't reliably read it as a substitute for a label.

Error messages need to be specific and linked in text to the field where the problem is, not just a red border or a message at the top of the page disconnected from the field itself.