You don’t need to sacrifice aesthetics for accessibility. Here’s why.

In the modern landscape of web design, accessibility comes before aesthetics. Always, with no exceptions. But it doesn’t mean that aesthetics have to suffer in this situation - quite the contrary!

Read on to learn how to properly approach this struggle and grow as a designer.

What are aesthetics, anyway?

There’s obviously no such thing as an objectively “good” aesthetic, pleasing to everyone. That said, web design is not too far removed from fashion. Trends come and go, and there are always some common elements that are generally liked and pursued. It used to be Skeuomorphism, then flat design was all the rage for a couple of years. Now we gravitate towards Neumorphism and Glassmorphism - and interfaces built with those styles are generally considered aesthetically pleasing. That’s what I mean with the generalized “aesthetics” in this article.

Aesthetics are also important, in the sense that pure ornamentation, paradoxically, has a function.** A good-looking and “good-feeling” website establishes credibility, adds value to the company/product.** Aesthetics make visitors want to interact with the website, explore it, and in the end, hopefully, make a conversion. That’s why we haven’t all simply thrown aesthetics out, focused 100% on accessibility, and drowned in an ocean of copy-pasted Material Design websites. Even though it would be way easier from the design perspective, it would also be a disaster to business.

High-contrast switch is a really bad idea

When accessibility started to become a major topic in web design discussion, a few websites tried to approach the issue in a kind of lazy way. They experimented with a high-contrast switch, which took the user to a stripped down, more accessible copy of the website. The trend died quickly - and for a good reason! Not only did it imply that people with disabilities are second-class users of sorts, it was also incredibly wasteful and impractical. After all, it’s essentially a whole different website to design, develop, and maintain.

That’s why a single website, adjusted for a healthy balance of aesthetics and accessibility, is the only realistically acceptable solution.

Is there really a conflict?

But before I go any further and give you my solution to finding this balance, I want to pose the key question for this article. Is “balance” really the right way of looking at this issue? In other words,** is there really a conflict between aesthetics and accessibility in modern web design? **

Many designers seem to take a very black-and-white stance on the issue. According to those voices, the more accessible an interface is, the uglier it becomes. In order to achieve the desired high contrast and other conveniences, you have to sacrifice the subtle shadows, gradients etc. In short, the general “softness” and subtlety of design that characterizes the modern styles and makes them appealing.

I strongly disagree with this position. In my view, it’s quite the opposite. Accessibility is not an obstacle to aesthetics. It’s a feature that drives them forward, challenges the designers’ creativity and problem-solving abilities. In other words, designing with accessibility in mind is not sacrificing aesthetics. It also doesn't mean that the minority (read: those with some sort of vision impairments) outweigh the majority, as some designers also claim. It’s simply building a product for the widest possible audience - just as it has always been done.

The simple solution to a complex problem

How to preserve aesthetics and ensure accessibility, then? The “secret” is no secret at all - in fact, it’s pretty straightforward! You start with making the distinction between the functional elements of your UI (such as forms, buttons, headlines and copy), and those that are purely decorative. The functional elements are those that need to be fully accessible, no exceptions; alienating certain users from properly interacting with the website means lost conversions.

In case of decorative elements, you have much more leeway. Here you can experiment with fancy styles like Neumorphism and Glassmorphism that may not always be entirely WCAG-approved. You figure out a way to seamlessly integrate aesthetics with functionality, make the relationship between them symbiotic rather than antagonistic. Of course, it’s not ideal if some of the users can’t get the full experience that you intended for them with your beautiful design. But they’ll choose being able to use the website over impressive decoration every single time, and that should always be the top priority.

This is how accessibility drives aesthetics, not limits it. If you make accessibility your starting point and then build your design around it, nothing is “lost”. You don’t have to sacrifice any part of your original vision to make it accessible, as it’s almost always the case with “accessibility as an afterthought” mindest. Designing a beautiful product is fairly straightforward (just look at all the unrealistic concept website shots on Dribbble). Making it functional, on the other hand, is much more difficult, and ultimately that’s what makes truly great designers stand out from the rest.

Further reading:

• If you’re feeling ambitious, there’s a great study by Grace Mbipom and Simon Harper which explores this very issue from a more scientific standpoint: https://moodle-arquivo.ciencias.ulisboa.pt/1516/pluginfile.php/118217/mod_page/content/35/p640.pdf

• H Locke has a very interesting article on the accessibility vs. aesthetics issue within a very specific context of greying out dsabled buttons: https://uxdesign.cc/is-it-ok-to-grey-out-disabled-buttons-8afa74a0fae

• Here’s a cool list of products (including many non-digital) that derive their aesthetic from being accessible, compiled by Alex Chen: https://uxdesign.cc/accessibility-drives-aesthetics-5aef77b5d2aa