The Science of Accessibility: Designing for Colorblind and Visually Impaired Users

The Science of Accessibility: Designing for Colorblind and Visually Impaired Users

Graphic design is more than just aesthetics. Designers work to tell stories, guide users, and deliver messages in ways that are both engaging and clear. But for millions of people worldwide with visual impairments, many designs fall short of being truly accessible. From colorblind users struggling to distinguish between chart segments to readers with low vision unable to interpret small or thin fonts, inaccessible visuals can unintentionally exclude audiences. That’s why it’s important for designers to understand the limits of design and how they can make work more inclusive.

Understanding Visual Accessibility

Visual accessibility in graphic design isn’t just a legal requirement, it’s also an ethical and creative opportunity. By designing inclusively, graphic designers can reach wider audiences, improve user experiences, and demonstrate social responsibility within their designs.

Why Accessibility Matters in Graphic Design

Accessibility ensures that designs can be understood and used by the widest range of people. In graphic design, this means creating visuals that do not exclude those with disabilities. According to the World Health Organization, at least 2.2 billion people globally have some form of vision impairment. This is not a niche audience, this is a significant portion of the world.

For designers, prioritizing accessibility has multiple benefits. Accessible visuals are able to reach a much wider audience and therefore ensure that no one is excluded. It also allows for a better user experience since clarity in design helps each and every user. It ensures compliance with standards set by the Americans with Disabilities Act (ADA), Web Content Accessibility Guidelines (WCAG), and print accessibility guidelines. Additionally, it inadvertently impacts brand reputation, as companies that lead in accessibility are often seen as more ethical and user-centered.

Types of Visual Impairments Designers Should Consider

Visual impairments can look very different from person to person, and will not always appear in a stereotypical manner. Visual impairments are often thought of as complete blindness, but this is typically not the case. There is a very wide spectrum of visual impairments, and the more designers understand them the better they can cater to the needs of those who are affected by them. 

Some of the more common visual deficiencies include colorblindness, low vision, complete blindness, and age-related vision changes. According to the non-profit organization Colour Blind Awareness, color vision deficiencies, or color blindness, affects about 1 in 12 men and 1 in 200 women, with the most common form appearing as red/green color blindness. Low vision impairments include those whose vision cannot be completely corrected by glasses, contact lenses, or surgery. Complete blindness affects approximately 15% of people with eye disorders, and is documented as having a complete lack of light perception.

The leading causes of blindness worldwide include cataracts, age-related macular degeneration, glaucoma, and diabetic retinopathy. These causes depend heavily on the availability of eye care within countries, their affordability, and the education within a population. The more designers can understand these impairments and learn about their causes the better they will be able to understand their target audience and mitigate barriers through their accessible design work. 

Design Principles for Colorblind Accessibility

Designers should not approach accessible design with the mindset of stifling creativity, but instead use it as an opportunity to explore new possibilities and innovations within projects such as accessible website design. Designing for accessibility allows for new and imaginative ideas to break through conventional strategies. 

Using Color Combinations Wisely

Color is a powerful design tool, but relying solely on it can exclude colorblind users. Important color accessibility guidelines for designers to remember include avoiding problematic pairings like red and green, green and brown, or blue and purple, using colorblind-safe palettes (tools like ColorBrewer or Adobe Color offer options), testing designs with simulators (e.g., Coblis) to see how they appear to people with different types of colorblindness, and combining colors with additional cues such as labels, icons, or shapes.

For example, a traffic light-inspired infographic should not rely on red and green alone. Adding distinct and easy to recognize labels or shapes makes the message more accessible.

Incorporating Patterns and Textures

Patterns and textures offer additional clarity. For instance, bar charts can use stripes, dots, or crosshatching to differentiate sections instead of color alone. Maps can combine color with texture to represent regions clearly. This approach ensures meaning isn’t lost for those who can’t distinguish certain hues.

Designing for Low Vision and Visual Impairments

Designing for low vision and other visual impairments is about ensuring clarity, readability, and usability. By making thoughtful choices in typography, contrast, and layout, designers can create visuals that remain accessible and effective for everyone, regardless of their impairments.

Font Choice and Readability

Typography is critical in a design accessibility checklist. Designers should aim to use sans-serif fonts like Arial or Times New Roman for clarity or avoid decorative or overly condensed typefaces for accessible typography. Additionally, ensuring adequate line spacing (1.5x the font size is often recommended) and maintaining a minimum font size of 12pt (16px) for digital designs helps immensely in making accessible design. Legibility also depends on background choices – placing dark text on clear and lighter backgrounds is typically recommended.  

High-Contrast Layouts

Strong contrast doesn’t just benefit those with low vision – it also helps users in poor lighting conditions, such as viewing a phone in bright sunlight. High contrast graphic design helps users with low vision distinguish text and shapes. Aim for at least a 4.5:1 contrast ratio for body text (WCAG standard). Use dark text on light backgrounds or vice versa, and avoid low-contrast combinations such as gray text on light gray backgrounds, and ensure important elements (buttons, calls-to-action) are highly visible.

Assistive Technologies and Design Compatibility 

Pre-existing technologies exist within mobile devices and computers that act as a helpful assistance to the visually impaired, such as screen readers, magnification tools, and Braille keyboards. Designers should take these technologies into consideration when designing for accessibility. 

Screen Readers and Alt Text

For blind and low-vision users, screen readers provide spoken descriptions of on-screen content. Designers can support this technology by providing accurate and detailed alt text for images, describing both content and context. Designers should avoid text embedded in images unless necessary and provide descriptions when used. Always structure designs logically with clear reading order, ensuring screen readers can  interpret them correctly.

For example, a promotional poster for an art exhibition should include alt text that describes the event name, the artist’s name and other accreditations, and also describing elements that convey mood and theme of the exhibition. 

Magnification Tools and Responsive Design

Many users rely on digital magnifiers to enlarge content. Designers should ensure layouts remain clear when zoomed in up to 200%, use responsive design so text and elements adjust smoothly across devices, and avoid fixed font sizes that prevent scaling. Responsive design isn’t only for accessibility, it’s also a standard for modern, user-friendly design.

Testing Your Designs for Accessibility

Testing is a crucial step in making sure accessibility isn’t just a design intention but that it’s truly applicable to their users. By using specialized tools and gathering feedback from diverse users, designers can identify barriers, refine their work, and ensure their visuals are truly inclusive. 

Accessibility Testing Tools

A range of online tools are available to assist with accessibility testing. A few popular examples include: 

  • WAVE (Web Accessibility Evaluation Tool): A widely used tool that provides a browser extension and web-based version that offers an overview of errors and features.

  • Google Lighthouse: Already integrated into the Google Chrome browser, this tool assesses various parts of a webpage’s performance, including accessibility.

  • Axe DevTools: This browser extension quickly identifies accessibility issues by running checks when inspecting a web page’s code.

  • Accessibility Insight for Web: A web extension for Google Chrome or Microsoft Edge that helps developers find and fix accessibility issues.

 

These tools are typically available as free web browser extensions that can operate seamlessly in the background and point out possible accessibility issues or errors to developers. Their effortless nature allows for seamless and immediate integration into a developers workflow. 

User Feedback and Inclusive Testing

No test can compare to real user feedback. Involving people with disabilities in testing allows designers to get accurate, applicable feedback on their work. Conducting usability sessions specifically with individuals who use assistive technology will help designers be sure that their work is accessible to their intended audience. Testing with individuals who are visually impaired will allow designers to work off of lived experiences – not bias assumptions. Inclusive testing ensures designs work not just in theory but in practice.

Accessible Design Done Right

Seeing accessibility principles in action helps bring theory to life. Leading organizations, such as Google, The New York Times, and National Geographic have successfully integrated inclusive design into their visuals – showing that accessibility and great design can go hand in hand.

Brands with Inclusive Visuals

Google works to integrate accessibility across all of their products. Not only does the search engine offer high contrast and easily scalable text, but they offer many resources that are already built into their Google Chrome search engine, such as magnifying capabilities, text-to-speech readers, braille display, and voice controls.

The New York Times gets straight to the point with their plain white background and clear Cheltenham black font. Their website remains simple and easy to navigate, allowing for easy text scalability and clear large headlines and images. This allows the news outlet to stay true to their own brand while also accommodating visual impairments. The National Geographic website takes the opposite approach, with a dark black background contrasting thick, white Geograph font. Taking their own refreshing perspective to simple and clear news reporting, they stay true to their brand while allowing for interactive visual impairment inclusivity. 

Designing with Everyone in Mind

Designing for accessibility is not  an afterthought, it should always be central to effective communication. By considering the needs of people with visual impairments, designers can create work that is inclusive, ethical, and impactful.

From choosing the right color palettes to supporting assistive technologies, every design decision influences accessibility. Testing, learning from user feedback, and studying successful case studies help provide a roadmap for improvement. Ultimately, accessibility is creativity with empathy. When designers prioritize inclusivity, they don’t limit their work, they elevate it. 

Where Creativity Meets Accessibility

Interested in learning to design with inclusivity in mind? At Rocky Mountain College of Art + Design, we offer both an on-campus Bachelor of Fine Arts in Graphic Design degree and online Bachelor of Fine Arts in Graphic Design degree that teaches students to design for any audience. The creative, skills-based curriculum for these programs allows aspiring graphic designers to develop foundational skills while prioritizing accessibility for all in the graphic design industry. Request information for this program or apply  today

Categories
Archives

We're accepting applications!  No fee, Apply Today!

Classes Starting Soon!

Rocky Mountain College of Art + Design Campus

No Application fee