Finding A Balance Between Accessibility & Aesthetics

Posted on February 25, 2020 • Written by Nathan Winter
finding a balance between ada compliante

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!
Nathan Winter

Written by Nathan Winter

Nathan Winter is Fruition's Senior UX designer. After a brief stint at a small digital agency in Wisconsin, Nathan was catapulted into the world of publishing, where he spent over a decade designing and art directing for national shelter enthusiast magazines — such as Log Home Living, Traditional Building and many more. His increasing love for user interface design eventually motivated Nathan to pursue a career in User Experience design. Nathan enjoys sampling Colorado's abundance of hip breweries and restaurants while taking in the occasional concert.

Related Articles:

View All Blog Articles

From our team & partners