Everyone benefits from designs that are easier to see. People with different visual abilities see your designs in varying ways—the diverse nature of impairments creates a wide variation in how your designs are perceived. A clean and clear visual presentation helps everyone make sense of a website’s information and functionality.

Color and Contrast

1. Provide good contrast. Make sure the contrast between the text and background is greater than or equal to 4.5:1 for small text and 3:1 for large text.
   • Test your color palette for accessible combinations with Accessible Color Palette Builder or Contrast Grid.
   • Measure the contrast between text and background colors with tools like WebAIM’s Color Contrast Checker or a Sketch plugin.
2. Exceptions:
   • Color contrast ratio requirements apply to text and graphics that are essential for understanding the content or functionality. You don’t need to meet color contrast requirements for logos or incidental graphic elements.
   • Text that is part of a disabled control’s state or disabled buttons does not need to meet the minimum contrast ratio.
   • Text that is part of a logo has no minimum contrast requirement.
3. Slightly temper the contrast between your text and background color. For example: don’t use pure black text on a pure white background. Stark contrast can result in blurred or moving text for people with Irlen syndrome.
4. To use text over images, add a solid background behind the text or a dark overlay to the image.

Layout and Hierarchy

1. Make sure key information is discernable at a glance. Design minimally and intentionally so that the user can get as much info as quickly as possible.
2. Create a clear hierarchy of importance by placing items on the screen according to their relative level of importance. For example, place important actions at the top or bottom of the screen (reachable with shortcuts).
3. Plan heading structure early. Ensure all content and design fits into a logical heading structure.
4. Consider reading order. The reading order should be the same as the visual order.
5. Group related items in proximity to one another to help those who have low vision or trouble focusing on the screen.

Typography

1. Use a large enough font size for body text so that people can comfortably read. Use at least an effective size of 16px, but this can vary depending on the design of the font.
2. Maintain a line length that promotes comfortable reading. Don’t make lines too long or too short: 45-75 characters per line is acceptable and approximately 66 characters per line is comfortable. Shorter pieces of text are fine for captions, marginal text, and forms.
3. Choose a typeface that emphasizes clarity and legibility.
   • Factors to consider:
     1. It performs well when it’s small or large.
     2. It has a large x-height.
     3. The character is large for its point size.
     4. The metrics (such as x-height) are consistent between letterforms.
     5. Individual letterforms are distinct in shape and can’t they be confused with others. For example: I, l, and 1 are distinct. 0 and O are distinct.
     6. The typeface supports all of the characters and font styles that are needed.
   • Some designers recommend sans-serif faces for UIs and serif faces for longform reading, but these are not hard-and-fast rules.
   • For an easy place to get started, the U.S. Web Design Standards (USWDS) Typography page includes a set of open source typeface recommendations that emphasize legibility.
4. Use headings to communicate hierarchy. Ensure heading styles differ from paragraph text by some combination of size, weight, face, or color. This ensures they’re distinct from paragraph text but are related to each other with some consistency, which helps with scanning.
5. Use your type size and line width to determine a line height that people can comfortably read. The larger the type size and line width, the larger the line height should be. For running/body text, that’s usually around 1.4-1.65, headings at around 1-1.3, and captions or short lines at around 1.3. Lines that are leaded too tightly or loosely can diminish readability by making it harder for the eye to know where to return to when the line breaks.

Graphics and Images

1. Make sure all graphics have descriptive captions written in plain language.
2. Avoid using graphics when written content could communicate the same thing.
3. Use icons as helpful visual cues to connect to concepts. Only use icons purposefully and not for decoration. Use familiar icons that people are accustomed to associating with common actions, like a trash can to represent deleting something.
4. To use text over images, add a solid background behind the text or a dark overlay to the image.

Data Visualizations

1. Follow data visualization best practices: allow the data and your communication goals for the visualization to dictate the format and visual style, instead of the latest aesthetic trend.
2. Support the visuals with a brief description of the overall trend that’s generated by the chart to give context.
3. Ensure the data and variables are clearly labeled.
4. Make sure there’s sufficient contrast between graph colors so people with color blindness can distinguish the colors.
5. Consider complementing the graph with a table of information so that it can be read more easily by screen reader users and when compressed to mobile.

Forms

1. Present fields in a single-column layout. This keeps visual momentum moving down the page so users don’t have to reorient themselves with multiple columns. (Exceptions to this rule are short, logical fields that may be presented on the same row like City, State, and Zip code.)
2. Ensure form fields are visibly labeled.
3. Make sure form fields have clearly defined boundaries or outlines so that people with cognitive disabilities know the size and location of the click target.
4. Do not use placeholder text in form fields. Placeholder text causes usability issues because it disappears when content is entered into the form field. Hints and instructions should be persistent and placed outside of the field.
5. Provide highly visible and specific error states. Use multiple cues like color, icons, bold font weight, heavy border or outline, and helpful text to make sure users don’t overlook this critical information.

Mobile

1. Make sure you can reach primary actions easily with either right or left thumbs.
2. Make touch targets at least 48px. This will allow the target to be tapped by the average adult finger pad, which measures 10mm. The icons may be smaller and you can work with your developer to extend padding past the icon.
3. In most cases, touch targets are separated by 8px of space or more to ensure users don’t select the wrong action.

Keyboard Access

1. Using only your keyboard, navigate through the page using the tab key.
2. Make sure you can reach all interactive elements and trigger them with the spacebar, enter key, or arrow keys, and ensure that you have designed intentional styles for these states: focus, hover, active, and visited.
3. Check to see that focus is always visible and that interactive items on the page appear in logical order. Make sure that no content gets focused offscreen or is hidden from view.
4. Check to see that the page includes a skip navigation link (if navigation is present before the main content). This will allow users to skip past navigation to reach the page’s main content.

Screen Reader

1. Use a screen reader to make sure you can land on controls and that they’re announcing content in the appropriate order and context (i.e. labels before form fields, headers before content, etc.).
2. If forms are present, make sure the screen reader reads labels and instructions.
3. Make sure that all links are properly descriptive. For example, the link text “Read More” provides no context about where the user will go if they click it, while “Read more about dinosaurs” describes what’s on the other side of the link.

You can also view our other digital accessibility checklists:

• WCAG – Web Accessibility Checklist
• iOS Accessibility Testing Checklist
• Android Accessibility Testing Checklist
• Accessibility Checklist for Content Designers
• Accessibility Checklist for Product Managers
• Accessibility Checklist for UX Designers
• Accessibility Checklist for Front-End Developers

Reference: Accesibility.digital.gov