Designing for accessibility
Readability
Use appropriate color contrast
Make sure the color of text contrasts with background colors.
So that text will appear visible and readable, light text should always be set against on a dark background, and dark text should always be set against a light background.
Test color contrast using with the WebAIM contrast checker.
For more information about using color in your design, visit Colors.
Use appropriate font sizes
Size text to meet the needs for your digital product. When setting font sizes for body copy, aim for 16-18 pixels for better readability. Avoid using sizes below 16 pixels. This it may cause readability issues.
It’s recommended for resident facing body copy in content heavy pages that we use 18 pixels. This size strikes a balance between legibility and comfort for most users. Size 18 pixels supports accessibility. By making sure content is easy to read, including those with visual impairments.
When developing for responsive web design use relative units like em and rem. Em and rem are both scalable units of font size, relative to pixel size.
For more information about fonts, visit Fonts and typography.
Use appropriate line length
To make text comfortable to read, use a line length of roughly 50 to 80 characters. This helps users follow text from line to line without losing their place.
Designing for color blindness
Don’t use color alone to convey information.
If color alone is used to convey information, colorblind users may not be able to understand it.
In addition to color, use a second indicator element such as text labels, shapes, or icons.
For more information about using color in your design, visit Colors.
Designing for understanding
Chunk up information with descriptive headings and sub-headings.
Instead of large blocks of text, use headings and subheadings to chunk up content information into sections.
Headings and subheadings help users of all cognition levels. They can quickly scan through a page and find the content they need.
Avoid large blocks of text. They increase cognitive load and makes the text harder to read.
For full detail about headings and subheadings, visit Hennepin County brand typography.
Write using plain language principles
Simplify content by writing in plain language. This helps people of all reading levels understand the information.
Avoid using large words or jargon. This especially helps non-native English speakers and people with low reading levels.
For more information, visit the plain language section of the Writing guide.
Neurodivergence
Keep interfaces simple
To keep from overwhelming users, limit the number of options displayed on any screen.
This may mean splitting user actions across multiple screens. This pattern can be more usable than having one screen where users do everything.
Moving elements
Don’t allow things to move between screens. Keep location of UI elements consistent across pages. When UI elements move from screen to screen, users can feel confused about what they need to do or where they can find a piece of information.
Within a flow, having things placed consistently helps simplify the design and reduce stress for users.
Provide ways for users to get help
Users may be unable to complete a flow task for many reasons, such as:
- A user runs into technical issues that prevent them from completing a digital application.
- Someone is missing documents they need to complete an application.
- A user may not understand a question and worry about answering it wrong.
- Someone may run into an accessibility issue with no way to report it.
Provide ways for a user to get help digitally, over the phone, or in person, whenever possible.
Avoid animations or transitions with flashing or blinking elements
Minimize the amount of animated transitions or flashing or blinking lights whenever possible, to accommodate users with neurodivergence who often find such design choices overwhelming.
To prevent causing photosensitivity seizure, generally avoid flashing or blinking elements. If necessary, minimize any flashing or blinking to fewer than 3 times per second.
Motor disabilities
Make tap targets large enough
A tap target is an element on a screen that the user selects to take an action. A tap target must be large enough so the user can select it. A person may use their finger or a device to select the element.
Provide large enough tap targets for links and buttons. For mobile devices, make the tap targets at least 44px by 44px.
This helps make sure that nothing on the screen is too small to accurately tap or touch.
All actions in the interface can be performed with a keyboard
Some users, such as people who have vision or motor disabilities, cannot use a mouse. Instead, they navigate the web using keyboards.
To make sure your interface is accessible for these types of users, all interactions in your interface need to support keyboard interactions.
Use on-click instead of on-hover for menus that expand
For things like megamenus or other components which expand, use on-click instead of on-hover.
Because some users may have difficulty with motor controls, things that can only be expanded by hovering may be impossible to access for users who do not have precise control of a mouse.