Tip: If you get this right, your site will be better designed than most of the competition.
Before we get fancy and go through the specifics of web3 design, let’s start with tips on good design in general.
Accessibility is for everyone
When people talk about making designs “accessible”, they’re usually referring to users with disabilities. This is an important topic and a laudable aim, but it also drastically undersells the concept. Really, “accessible design” is about making it accessible for all. It’s just that when you cater for user populations at the edges, you generally end up with a product that’s better for everyone.
The extremes inform the mean, not vice versa
In other words, look at the users who are really going to struggle. If you cover the extremes, you will also handle the mean. Or to be really specific, if we choose a font size and color that a user with low vision can see, then we know it will be easy for everyone else to read too.
Fortunately, other people have already done the research and there are some good standards we can follow.
Easy wins - follow these rules
- Font size: Use a minimum font size of 16px for body text. While this is considered the minimum, I’d actually try 18 or 20.
- Contrast: Ensure there is a sufficient contrast between the text and the background color. The contrast ratio should be at least 4.5:1 for normal text and 3:1 for larger text. This is considered “AA”. There is also a “AAA” standard, which is even better. Larger text is considered to be 1.5 times the size of your body text. Use https://colourcontrast.cc/ or a browser extension to check contrast.
- Legibility: Use a simple, easy-to-read font such as Roboto, Inter, or Open Sans. Avoid using decorative fonts that are difficult to read. Pro-tip: Inter is a superb font and many designers agree with me.
- Colors: Use a color scheme that is easy on the eyes and provides sufficient contrast. Avoid using red and green together as some people have difficulty distinguishing between these colors. Use a minimal number of colors and ensure combinations have a high contrast and are easy to distinguish from one another. Again, use the contrast checker above.
- Headings: Use appropriate heading levels (h1, h2, h3, etc.) to structure content and make it easier to navigate with assistive technology. This will also ensure good hierarchy of information.
- Labels: Provide clear and concise labels and instructions for all form fields and interactive elements.
- Use icons and other cues appropriately: Avoid using color alone to convey information or indicate an action. Use additional cues such as icons, text or patterns. This helps users with color blindness or low vision to understand the content. Examples include using various “!” icons to indicate danger, or lightbulbs to indicate tips. That sort of thing.
- Provide clear instructions: Provide clear and concise instructions for completing tasks. This helps users with cognitive and learning disabilities to understand how to use the interface. But remember, this also helps everyone.
Memorise these rules and you’ll be ahead of the game. Obviously, this is aimed at helping users with disabilities, but I still think this a good base for all.
You can find a usability check list here, that you can use for your next project.