top of page

Insights

Writer's picturePhilena Bremner
3 days ago6 min read

6 common accessibility mistakes in design—and how to fix them


6 common accessibility mistakes in design—and how to fix them by Philena Bremner
6 common accessibility mistakes in design—and how to fix them by Philena Bremner

In this article, Philena discusses the importance of designing accessible experiences that cater to a diverse range of users, as well as for temporary or situational challenges. She touches on why accessibility is not just a technical requirement but a design principle that benefits everyone. Philena highlights six common design mistakes that hinder accessibility and provides practical solutions to create more inclusive, user-friendly designs.


Why accessibility in design matters

Design isn’t just about making things look good—it’s about making sure everyone can use your product or service. Think about it: you’ve probably struggled with low contrast on your phone in bright sunlight or found it hard to navigate a cluttered website when you’re in a rush. Accessible design makes things easier for everyone. 


But accessibility isn’t just about following guidelines - it’s also about understanding real user needs. That’s why user research and feedback on design decisions are essential to ensure designs truly meet the needs of diverse users. By listening to feedback and testing with people who have a range of abilities and experiences, designers can identify barriers and create solutions that work for everyone.


So, let’s look at some common design mistakes and how you can avoid them to create a better experience for all users.


Mistake 1: Low contrast text

Let’s start with one of the most obvious issues - low contrast. Sure, it might look stylish to have light grey text on a white background, but can anyone actually read it? Now, imagine someone with a visual impairment trying to make sense of that.


But here’s the thing: low contrast isn’t just an issue for those with impaired vision. Think of someone trying to read on their phone outside in the sun, with the screen reflecting glare—contrast matters in that scenario too.


Don’t example of low contrast text with light grey text on a light grey background, making it hard to read.
Don’t example of low contrast text with light grey text on a light grey background, making it hard to read.
Do example of high contrast text with dark grey text on a lighter grey background, making it clear and easy to read.
Do example of high contrast text with dark grey text on a lighter grey background, making it clear and easy to read.

How to get it right:

  • Aim for a contrast ratio of at least 4.5:1 for normal text.

  • Use tools like the WebAIM Color Contrast Checker to test your designs.

  • Think of contrast as a universal design principle—if it’s easier for someone with a visual impairment, it’s easier for everyone.


Mistake 2: Relying only on colour to convey information

Think about a form where the only indication of an error is a red outline. For someone who’s colourblind, that red outline might not even register. The same problem happens when colour alone is used to convey important information, like in charts or buttons.


Accessibility isn’t just about catering to specific disabilities, it’s also about ensuring clarity for everyone. Whether it’s a person with colour blindness or someone trying to interact with your design in less than ideal lighting, relying solely on colour can be a problem.


Don’t example of two forms side by side showing an error relying solely on colour to convey information. On the left, the perspective of a user without colour blindness shows a red border around the email field to indicate an error. On the right, the perspective of a user with colour blindness (Deuteranopia) shows the same form where the red border is not distinguishable, making the error unclear.
Don’t example of two forms side by side showing an error relying solely on colour to convey information. On the left, the perspective of a user without colour blindness shows a red border around the email field to indicate an error. On the right, the perspective of a user with colour blindness (Deuteranopia) shows the same form where the red border is not distinguishable, making the error unclear.
Do example of two forms side by side showing an improved design where errors are supplemented with icons and text. On the left, the perspective of a user without colour blindness shows an email field with a red border, an error icon, and the text 'Enter your email.' On the right, the perspective of a user with colour blindness (Deuteranopia) shows the same form where the error icon and text are clearly visible, ensuring the error is understandable without relying on colour alone.
Do example of two forms side by side showing an improved design where errors are supplemented with icons and text. On the left, the perspective of a user without colour blindness shows an email field with a red border, an error icon, and the text 'Enter your email.' On the right, the perspective of a user with colour blindness (Deuteranopia) shows the same form where the error icon and text are clearly visible, ensuring the error is understandable without relying on colour alone.

How to get it right:

  • Always supplement colour with icons, text, or patterns.

  • For example, instead of just using a red outline for errors, add a symbol and text that clearly explains the issue and how to fix it.

  • Use a colour-blindness simulator during the design process to ensure your work is still clear without colour. 

  • Be aware that blindness simulators will never replace real user feedback. Ensure you test your designs with diverse users. 


Mistake 3: Complex layouts that confuse users

We’ve all been there—landing on a website that’s so cluttered and chaotic that we have no idea where to look. For someone with cognitive disabilities or attention issues, this kind of layout can make navigation nearly impossible.


But even without a disability, a complex layout can be frustrating. Picture yourself trying to book a flight on a crowded train, with limited time and attention—simplicity and clarity become lifesavers.


Don’t example of three pages showing a complex and inconsistent layout. The panels have inconsistent button placements, varied spacing, and misaligned elements, making navigation and readability difficult.
Don’t example of three pages showing a complex and inconsistent layout. The panels have inconsistent button placements, varied spacing, and misaligned elements, making navigation and readability difficult.
Do example of three panels showing a simple and consistent layout. The panels have aligned elements, consistent button placements labeled 'Continue,' and uniform spacing, making navigation clear and easy to follow
Do example of three panels showing a simple and consistent layout. The panels have aligned elements, consistent button placements labeled 'Continue,' and uniform spacing, making navigation clear and easy to follow

How to get it right:

  • Use a clear visual hierarchy with headings and subheadings that guide users.

  • Make important information easy to find with a clean layout, such as grouping related elements together to create an intuitive flow.

  • Use consistent spacing, fonts, and alignment to reduce cognitive load.

  • Keep consistency across pages, so users don’t have to relearn how to navigate every time.

  • For example, place the primary action button, like "Continue" or "Submit," in the same location across all pages and use consistent labelling to avoid confusion.


Mistake 4: Text that’s too small or difficult to read

Tiny text is a big problem. Whether someone has low vision or is trying to read on a small screen in a bumpy car ride, small, illegible text makes for a frustrating experience.


Readable text benefits everyone. Imagine you’re trying to skim an article on your phone during your commute—clear, bold text that’s easy to read helps you grasp the key points.


Don’t example showing text that is tiny and hard to read, with a decorative font that reduces readability
Don’t example showing text that is tiny and hard to read, with a decorative font that reduces readability
Do example showing text with a larger font size and a clear, easy-to-read typeface for better accessibility.
Do example showing text with a larger font size and a clear, easy-to-read typeface for better accessibility.

How to get it right:

  • Use a minimum font size of 16px for body text.

  • Keep line length between 45 to 75 characters for better readability.

  • Choose fonts that are easy to read, with good spacing between letters and lines.

  • Some fonts that are considered accessible include: Arial, Calibri, Century Gothic, Helvetica, Tahoma, Verdana, Tiresias, and OpenDyslexic. Again, it is important to get real user feedback to see what works for your users.


Mistake 5: Missing image descriptions

For someone using a screen reader, images without descriptions are a black hole of information. They can’t see what the image is trying to convey, so they miss out on key content. Alternative text or alt text can provide that context for users by describing images for users who can’t see them.


But alt text isn’t just for screen reader users. What about someone with a slow internet connection? While they’re waiting for the images to load, they can still understand what’s there if you’ve provided alt text.


Don’t example showing an unclear alt text description for an image with a purpose. The image of mountains and a sun is labeled with the file name '12344545767.jpg,' which does not provide meaningful context.
Don’t example showing an unclear alt text description for an image with a purpose. The image of mountains and a sun is labeled with the file name '12344545767.jpg,' which does not provide meaningful context.
Do example showing a clear alt text description for an image with a purpose. The image of mountains and a sun is described as 'Simple illustration of mountains and the sun,' providing meaningful context.
Do example showing a clear alt text description for an image with a purpose. The image of mountains and a sun is described as 'Simple illustration of mountains and the sun,' providing meaningful context.

How to get it right:

  • Always include meaningful alt text for images that convey information.

  • Avoid purely decorative images, or if they are not needed make sure they’re marked as such by using empty alt text (alt="").

  • Alt text should reflect the image’s purpose and context in relation to the surrounding content, for example if you use ‘simple illustration of mountains and a sun’:

    • On a page about travel destinations it could be: “Illustration of a mountain range at sunrise, representing a peaceful travel location.”

    • On a page about design inspiration it could be: “Minimalist mountain and sun illustration showcasing simple design concepts.”

  • Think of alt text as part of the story you’re telling—don’t leave users in the dark.

  • How to write good alt text for screen readers


Mistake 6: Incomprehensible data graphs

Complex data visualisations can be a headache for users, especially those with assistive technology or those who are colourblind. Labels that are too small or graphs that rely solely on colour can make it difficult to understand what’s being presented.


But this isn’t just a challenge for users with disabilities. Anyone trying to read a graph on a small screen or in a distracting environment will appreciate clear, easy to understand visuals.


One simple way to make graphs more accessible is to incorporate patterns or textures in addition to colour. For example, instead of only using red and green in a pie chart, you can add stripes or dots to differentiate between sections for users who struggle with colour perception.


Don’t example of two pie charts relying solely on colour to convey information. On the left, the perspective of a user without colour blindness shows sections in orange, purple, and pink labeled 'Pass,' 'Fail,' and 'Not applicable.' On the right, the perspective of a user with colour blindness (Achromatopsia) shows the same chart in grayscale, making it impossible to distinguish between sections.
Don’t example of two pie charts relying solely on colour to convey information. On the left, the perspective of a user without colour blindness shows sections in orange, purple, and pink labeled 'Pass,' 'Fail,' and 'Not applicable.' On the right, the perspective of a user with colour blindness (Achromatopsia) shows the same chart in grayscale, making it impossible to distinguish between sections.
Do example of two pie charts with additional patterns and labels to supplement colour. On the left, the perspective of a user without colour blindness shows the chart with colours, patterns, and text labels indicating '24% not applicable,' '45% pass,' and '31% fail.' On the right, the perspective of a user with colour blindness (Achromatopsia) shows the same chart with patterns and text labels, ensuring the data is still understandable without relying on colour.
Do example of two pie charts with additional patterns and labels to supplement colour. On the left, the perspective of a user without colour blindness shows the chart with colours, patterns, and text labels indicating '24% not applicable,' '45% pass,' and '31% fail.' On the right, the perspective of a user with colour blindness (Achromatopsia) shows the same chart with patterns and text labels, ensuring the data is still understandable without relying on colour.

How to get it right:

  • Provide clear, concise summaries of data trends.

  • Label graphs and charts clearly, with text and visual cues like patterns.

  • Use high contrast colours and provide alternative formats, like tables, for users who prefer text-based information.

  • For image-based graphs, provide clear alt text or captions that describe the data and key insights, ensuring the information is accessible to screen reader users.


Designing for everyone

At the end of the day, accessibility is about making sure everyone has equal access to services and products. By avoiding these common design mistakes, you’re not just helping people with disabilities—you’re creating a better experience for anyone who might be in a permanent, temporary or environmental situation where good design means accessible design.


Take action

When designing services or products, ask yourself: is this accessible for everyone? Start making these changes today, and be sure to conduct user accessibility testing along the way - you may be surprised by small changes that improve the overall user experience for everyone.


Additional resources

To further enhance your accessibility design skills, explore these valuable resources:


Contact information

If you have any questions about our accessibility services or you want to find out more about other services we provide at Solirius, please get in touch.

25 views

Comments

bottom of page