Accessible Graphic Design: 5 Things You Should Know | Compliant

When most people think of graphic design, they think of the eye-catching features, bright colors, and all the visual elements of appeal. Part of good design is the ability to draw people in, right?

Well, that is certainly one aspect of design. But design is also about user experience. Producing accessible websites should be at the forefront of the design process. Graphic designers have a vital role to play in creating an accessible web design.

Ensuring inclusivity and access to content should be the most important aspect of any graphic design project. It provides equal access to communications and information technology for all users.

What Is the ADA?

The Americans with Disabilities Act (ADA) of 1990 helped open the door of equal opportunity and access for those with disabilities. This piece of civil rights legislation effectively stopped discrimination in the public square against disabled individuals and employees.

Of course, discrimination still occurs, but the regulations outlined in the ADA hold certain entities responsible if it does take place. For example, the ADA applies to state and local agencies and entities that receive federal funding, such as schools, telecommunications, and public transportation.

But, the ADA also applies to areas of public accommodation, which includes both private and public businesses, e.g., restaurants, retail merchants, hotels, etc. Title III of the ADA encompasses accessibility as it relates to websites.

Although the ADA does not include language nor provisions for website accessibility, recent court rulings have found that informational websites do fall under Title III. Of course, this would include the utilization of accessibility features in web design.

What Is Accessible Graphic Design?

Graphic design involves creating visual content to communicate messages. The visual elements of graphic design can include color, form, shape, texture, size, and use of space. In many ways, graphic design involves emotional design — it seeks to elevate the user experience through visual content.

In terms of the medium for graphic design, it is most often employed in digital media. The design element could include the layout of a webpage, graphics, logos, and more.

Types of graphic design could be web design, such as the creative elements discussed above, or user experience (UX) design, which focuses on the usability of websites or applications.  

Accessible graphic design simply refers to creating and designing elements with user accessibility in mind to ensure all web content can be understood and enjoyed by all, especially those with disabilities.

What Is an Accessibility Designer?

An accessibility designer can be anyone who is tasked with creating the elements of a web page. This includes the graphic designer who creates and designs the layouts, the content creator who curates or writes web content, and anyone responsible for the usable elements on a website.

Anyone involved in creating or presenting content on the website should be involved in accessible design.

How Do You Make Graphic Design Accessible?

As mentioned above, the ADA lacks actual guidelines for accessible design. However, best practices for making your graphic design accessible can be found in the accessibility standards provided by the World Wide Web Consortium (W3C).

These are known as the Web Content Accessibility Guidelines (WCAG). These international guidelines provide a set of rules for maintaining website accessibility, which includes graphic design.

The elements of a website must be designed with individuals with disabilities in mind. This could include visual impairments (e.g., low vision or blind), hearing impairments (e.g., deaf), physical impairments, and cognitive disabilities.

The WCAG is built on four design principles to make design accessible: Web design and content must be perceivable, operable, understandable, and robust.

• Perceivable – The design and the content must be perceivable, meaning all information and design elements must be made to accommodate a range of diverse abilities (e.g., providing transcripts, captions, or subtitles for audio content).
• Operable – The website must be operable and have an accessible design in mind, which includes navigation features. The visual elements and user interface should be easy to operate and optimized for all individuals.
• Understandable – The design elements and content should be understandable for most users; it should be clearly and consistently presented and free of unnecessary barriers.
• Robust – Design features should be robust, meaning the website should maximize compatibility with all users and be optimized to accommodate assistive technologies and devices (e.g., screen readers, screen magnifiers, etc.).

Contrast and Color

Visual accessibility will be paramount for a graphic designer. One element to this is the use of color on a website. Color has a way of evoking emotion, for better or worse. In fact, according to a research study by Google, the average user takes around 0.05 seconds to decide whether or not they want to stay on a webpage — color is an important element to this.

But, for the designer, color should not be the only visual means of conveying meaning and information. Accessible websites must be designed with individuals with visual impairments in mind. This means using sufficient contrast and accessible color palettes.

WCAG does provide standards for a minimum contrast ratio for texts, foreground elements, and background colors. According to WCAG, a good contrast ratio between a text background and a text is at least 4.5:1 for normal texts (12pt to 14pt font).

Larger texts require a minimum contrast ratio of 3 to 1 (18pt or larger). A dark-colored text with a light/white background works best.

WebAim’s Color Contrast Checker is a great online tool you could use when checking for appropriate contrast ratios.  

An accessible color palette should be chosen to accommodate those with visual impairments, such as color blindness. Avoid color combinations such as red/green and blue/yellow. You can also use a color blindness simulator to take the guesswork out of designing if you are unaware.

Keyboard Commands

One principal component of accessibility is ensuring the web elements are operable. Visitors and viewers must be able to navigate the website. Most use a mouse; however, many users with disabilities use keyboards to navigate. All functionality that can be done with a mouse must also be able to be done with a keyboard.

Also, keyboard focus should not be trapped in the content. This means optimizing keyboard commands and shortcuts (e.g., tab key).

The buttons, descriptive labels, and headings must have clear focus indicators (visual indicators). Much of this is done on the backend through CSS coding of the layouts and the styling.

Fonts

The readability of the text is important for accessibility, whether it’s in a header or captions.  Choosing the right typography is key. The most accessible fonts tend to be sans-serif typefaces.

The most accessible are 12 to 14-point fonts. Display headings text size should be 24-point or more, while captions should be no less than 8-point font.

Forms

Forms fields are typically used for user interaction on web pages (e.g., registering, commenting, purchasing, etc.). Users prefer short and simple forms. Forms fields must be labeled well on the website and with label controls in the HTML.

Again, this is to ensure easy navigation for assistive technologies or keyboards.

Universality and Usability

An accessible design means a usable design. This means all web elements are effective, efficient, and satisfying for as many users as possible. This speaks to the universality of the design and content.

As mentioned, this is usually the job of UX designers. But, a usable and universal design can sometimes overlook the need for an accessible design.

Remember, accessibility focuses on technical aspects of usability rather than the design visuals.

Why Is Accessibility Important for My Website?

Designing with accessibility in mind ensures your website and content provide equal access to all users, including those with varying disabilities.

For example, a typical design might look at the image as a visual source to draw people in, while an accessible design ensures those images have alt texts, too, so users don’t miss out on content.

Accessibility is important for websites because it promotes inclusivity. It ensures the information is getting to all people in a manner that suits them best.

Conclusion

Designing with accessibility is vital to ensure everyone has equal access to information and content on your page. Graphic design plays a big role in this.

Accessible graphic design involves creating web elements that can be perceived, understood, and enjoyed by users with disabilities.

Thankfully, the WCAG provides standards and best practices to ensure you present content in an inclusive way, one that provides equal access for all users.