For too long, digital accessibility has been treated as a final “QA task” or a checklist dumped onto front-end web developers right before launch. In reality, building a truly inclusive web experience starts at the very beginning of the product lifecycle: in the design file. When a user interface lacks proper contrast, font sizes, structural hierarchy, or target sizes, no amount of clean code can rescue the experience without forcing costly, frustrating redesign cycles.
Accessibility is a natural extension of UX and fixing accessibility issues improves the experience for everyone. By introducing a few foundational best practices directly into your design system and handoff workflows, you can build beautiful, intuitive experiences that are inherently compliant—and highly seamless for developers to execute.
1. Consider Your Use of Color
Sufficient color contrast makes your design is usable by people who are color blind, have low vision or who are viewing your content in an environment with very bright light.
Use of Color Checklist
- Color is not the only indicator that something is interactive. Links within paragraphs should be distinguishable from standard text by more than just color.
- Don’t use color alone to indicate meaning (ex. the red text is bad, the green text is good) or instruction (ex. click the blue button).
- All text must have sufficient contrast with the background. This includes text overtop of images and videos. Regular text (typically under 18pt regular or 14pt bold) must maintain a contrast ratio of at least 4.5:1 against its background color. Large text (18pt / 24px regular and above, or 14pt / 18.5px bold and above) requires at least 3:1.
- Interactive elements must have a contrast of 3:1 with the surrounding color. This includes buttons and form fields.
- Make sure to include hover and focus states in your design. All hover and focus states must meet color contrast requirements.
2. Pay Attention to Typography, Structure and Layout
Fonts where certain letters look alike (ie. o and 0, p and q) can be hard to read for users with Dyslexia. HTML headings that are not used in a logical, hierarchical structure can make it harder for screen reader users and keyboard-only users. Interactive elements without sufficient spacing can increase the likelihood of accidentally tapping the wrong element for users who have tremors, trouble using their hands, and people who interacting with your site on a mobile device while riding in a bouncy car, train or airplane.
Typography, Structure and Layout Checklist
- Body text should start no lower than 16px (12pt). Text inside micro-copy UI elements (like input tooltips, captions, or button tags) must never drop below 12px (9pt).
- Avoid overly ornamental fonts and excessive use of serif fonts.
- Avoid justified text.
- Avoid excessive use of ALL CAPS.
- Use HTML headings to break up text and provide structure to your page.
- Only one Heading 1 per page.
- Use headings in a hierarchical manner and don’t skip levels – heading 2 for main subsections, heading 3 for subsections under heading 2, etc.
- Do not use headings to apply a specific visual style.
- Consider whether a short line of bolded text should really be a heading (is it introducing a set of content or is it just bold for emphasis).
- Don’t add manual line breaks inside of headings.
- Don’t include images in headings.
- All interactive elements must have a target area of at least 24px X 24px.
- Designs must scale up to 200% without causing horizontal scrolling, text overlap or text cutoff. When designing containers, avoid using fixed, rigid pixel heights for text cards or banners.
3. Include Clear, Unambiguous Labels
Clearly labeled interactive elements (links, buttons, form fields, etc.) makes your content easier for users who are stressed out, have cognitive disabilities or who are using voice commands to interact with your content. Best of all, these practices provide an improved user experience for everyone, with a clearer path to conversions and whatever actions you want users to take on your site – it’s a win for everyone.
Clear Labels Checklist
- Avoid “Learn More”, “Read More”, “click here”, etc. as linked/button text.
- Avoid links/buttons that have the same text but go to different URLs.
- Avoid using the URL as link text.
- Data table rows and columns must include appropriate headings.
- All form fields have persistent visible labels (not just placeholder text).
- Required fields are marked visually with something other than color.
- If an asterisk is used to visually indicate required fields, an explanation that (*) indicates a required field must be present before the form.
4. Present Content in Multiple Modalities
Designs that present content through multiple modalities (ex. including transcripts for videos) help users who cannot perceive the primary modality, users who are in a noisy environment and can improve SEO and AI visibility.
Multiple Modalities Checklist
- Include a place for transcripts for meaningful videos and audio. Background videos that are purely decorative do not require transcripts.
5. Be mindful of motion
Moving, flashing and blinking content can cause significant issues for people with seizures, migraines, autism and ADHD. This type of content should be kept to a minimum.
Motion checklist
- Avoid auto-playing videos, sounds, image carousels, and parallax scrolling.
- For any content that remains in motion for more than 5 seconds (i.e a background video), there must be an easy way to pause/stop the motion.
- For any CSS-based animation, include CSS to block animation for users that have prefers-reduced-motion settings on their computer.
An accessible design is only as good as its final code deployment. To bridge the gap between Figma/Adobe canvas prototypes and front-end reality, make sure your designs include clear instructions for developers.
It can be overwhelming when you decide to incorporate accessibility best practices into your design workflow. If you need an accessibility partner to help with your next design project, we are here to help!