Accessibility for Graphic Designers

Color and Contrast

Maintaining high color contrast ratios is important for several reasons — it makes reading easier for people who have vision differences, such as color blindness, and it ensures your content remains visible on a range of devices regardless of variations in screen displays.

Contrast also can be an issue in different lighting scenarios, such as when viewing a page on a phone outdoors in bright sunlight.

The general rule to follow for color is that the contrast ratio between text and background colors should be at least 4.5 to 1. For large text and graphics, the minimum ratio is 3 to 1. (“Large” text is 18pt+ or 14pt+ and bold.) There are several tools available online for checking contrast, such as WebAIM’s Contrast Checker.

Stick to the styles and colors that have been provided as part of your site’s design, if using a University-supported theme.

Don’t rely on color alone to convey meaning. A great example of this is links that are made obvious by using a different font color and adding an underline.

Avoid Using Images of Text

Images of text are inherently inaccessible. Images of text aren’t readable by assistive technology. They don’t allow for text resizing, which is helpful for people viewing web content on small screens. Also, text in images isn’t available to search engines.

If an image of text is used, a text alternative must by provided. Refer to Text Alternatives for Images. Color contrast standards apply.

Make Actionable Elements Obvious and Easy To Use

Elements that allow a user to take some action — such as form inputs, buttons, accordion controls — should be visually obvious and easy to interact with.

• Ensure target size (i.e., clickable area) is large and far enough away from other elements so users won’t inadvertently activate the wrong item. The recommended target size is at least 44 by 44 CSS pixels (WCAG 2.1 SC 2.5.5).
• Actionable items should have an obvious visible focus indicator. This is built-in if you’re using a University-supported theme.
• An element’s purpose and action should be visually obvious and consistent with what users expect. Following industry norms and design best practices helps with this.

Layout

Reserve use of tables for tabular data, not for content layout. Check out WebAIM: Creating Accessible Tables.

Webpages should adapt to display content in ways that are consistent and sensible on devices of all sizes. Content order should be consistent between a large-screen PC and a table.

Users should be able to zoom in or resize text to 200%.

Don’t prevent users from using their own style sheets and color schemes (such as dark mode and high contrast).

Animations

Autoplay of animations or video is not recommended.

Moving content (such as animation or video) should allow users to pause or stop said content. Refer to WCAG 2.1 AA SC 2.2.2 for more information.

Respect user preference for reduced motion. Check out CSS-Tricks’ article on reduced motion to learn more.

Data Visualizations

Visualizations can help users understand data, but the information they present must be available to all users.

• Don’t rely on color alone to convey information. When color is used, choose combinations with high contrast.
• Present data or a data summary in an accessible format (in addition to the visualization). This might be in the form of a table, alt text or a summary of takeaways in the text of the page.
• Make sure tooltips or other interactive elements are keyboard operable.

Read A11y Collective’s checklist for accessible data visualizations to learn more.