Finding A Balance Between Accessibility & Aesthetics

Posted on February 25, 2020 • Written by Ben Smith
finding a balance between accessibility and aesthetics

With so much content on the web, many business owners are trying to make eye-catching designs that set themselves apart from the competition. While the majority of users have normal vision and can view highly-aesthetic designs, there’s a minority of users that have some form of visual impairment and require more accessible interfaces. To please both the majority and minority groups of users, you’ll need to consider both accessibility and aesthetics. Read on to learn why balancing these design principles is important and our top tips for achieving it.   

The Case For Accessibility 

There’s a distinct difference between what normal-visioned users see on-screen compared to what low-vision or color blind users see. Users with some form of visual impairment usually experience blurry or fuzzy text and struggle to see faint visual elements when text sizes are too small or the color contrast is too low. Accessibility strives to create a digital product that meets the needs of the minority user group and makes it easier for them to navigate through your site. However, improving accessibility doesn’t mean you should throw aesthetically-pleasing designs out the window.   

The Case For Aesthetics 

Since normal-visioned users and vision-impaired users experience your site differently, you need to design for both audiences. In practice, this becomes more difficult than it sounds because accessibility and aesthetics work on a spectrum. The more accessible something is, the less aesthetically-pleasing it is, and the more aesthetically-pleasing it is, the less accessible it becomes. This also means highly-accessible designs are actually harsher on the eyes of the normal-visioned, so focusing solely on accessibility could drive the majority of users away from your site.  

Let’s take a look at this example. The image on the left is AAA compliant and accessible to all visually impaired users due to the high color contrast. The image on the right, while not accessible in the least, is aesthetically pleasing to normal-visioned users.  

aaa accessible and not accessible

Tips For Creating A Balanced Design 

Given that accessibility and aesthetics work on a spectrum, User Experience designers face the challenge of meeting the needs of both the majority and minority user groups. Designing for just one group ignores the needs of the other, and could ultimately impact your reach, conversion, and brand perception. 

In the example below, the designer balanced accessibility with an aesthetic design to create an image that suits both user groups’ needs. 

ada compliance spectrum

To create your own designs that fall into the middle of the design spectrum, follow these tips: 

  • Choose color hues, contrasts, font sizes, and font weights that meet AA compliance
  • Avoid using color hues on the ends of the spectrum. Shoot for a happy medium between dark and light.  
  • Make sure background colors aren’t too faint.  

By following these guidelines, you’ll create an interface that’s easy on the eyes for both normal-visioned and vision-impaired users. 

Do you need a site design that balances accessibility and aesthetics?

Contact the experts today!
Ben Smith

Written by Ben Smith

Ben Smith is a Researcher at Fruition, specializing in Google's Algorithm changes. Ben is a graduate of the University of Denver’s Mathematics program, and he enjoys learning about Google’s search algorithm updates. He's a vital asset of the Fruition team, and he one day hopes to publish a book. In his free time, you can find Ben enjoying the outdoors of Colorado.

Related Articles:

View All Blog Articles

From our team & partners