During my time at DigiPro Media and Adot Labs, I learned so much about web accessibility, from optimal coding practices, to visual design guidelines. Here’s a quick guide to designing mockups with visual accessibility in mind.
There must be sufficient contrast between a section’s background color and its text color. Icons that are informative (vs decorative), icon fonts (vs an image of an icon), and company logos must also have sufficient contrast. You can use any color combination (you’re not limited to black text on a white background), as long as it conforms to the following standards:
- 4:5:1 for normal text
- 3:1 for large text
- 7:1 for normal text
- 4:5:1 for large text
- 14pt (typically 18.66px) and bold, or
- 18pt (typically 24px) or larger (any font weight is OK)
Note: While we want to aim for AAA color contrast, it is OK to fall back to AA standards if AAA would adversely affect a site’s visual design or branding. Strict AAA adherence is only for clients who specifically request the highest standard for accessibility.
Color Contrast Tester: https://webaim.org/resources/contrastchecker/
Color combinations to avoid for background + text (in general):
Note: you can still use these color combinations in your designs, just not as a background + text combination.
For DIY templates and other multi-use sites, we use Google Fonts. Please ensure your chosen fonts are readable (currently, there is no test/scanner for font readability).
The minimum font size should be 18px (you can go as low as 16px for elements such as labels).
Ensure that heading text (H1, H2, H3, etc.) is visually distinct from the body font (to indicate page structure & hierarchy) using a combination of the following:
- Font weight (bold, normal, light, extra bold, etc.)
- Font size
- Font family (serif vs sans-serif, narrow vs wide fonts)
- Color (different color from body text)
- Text decoration (underline, overline, italicized)
Links must be easy to see without color (you can still use color, as long as it adheres to the color contrast guidelines). If you have specific styles for hover & active states, please include those in your mockups.
Different ways to distinguish links:
- Use bolding, underline, or italics
- Add a descriptive icon next to the link (example: a list of social media links in the footer, with an icon next to each one)
Form Input Labels
Every form input field must have a label. Labels can be placed above or to the left of the field, and can be styled however you like (as long as it conforms to color contrast guidelines). Placeholder text can still be used, but it doesn’t take the place of a label.
Required Fields and Error Alerts
You can use red to indicate required fields or to style an error alert (or green for success, yellow for warning, etc.), but make sure to add at least one additional visual indicator.
Here are some examples:
- Mark required fields with an asterisk
- Mark required fields with the word “required”
- For alerts (error or success), add an icon (such as a warning symbol or a check mark)
- For alerts (error or success), use labels or headings such as “Error” or “Success” (it can be anything as long as it’s descriptive and informative)
From w3.org: the different parts of a web page must be easy to locate and identify. This includes navigation menus, links, and text sections. These should be at predictable locations and consistently identified. Form labels and instructions must also be clearly associated with their controls (inputs).