New Brutalism is a trend that has been growing in popularity over the past several years. A rejection of the sleek and modernist style of buildings that came out of the post-war era, Brutalism is more raw and unrefined. In its rejection of glamor, Brutalism creates an almost industrial aesthetic, often with exposed concrete and other materials reminiscent of factories or warehouses.
There are a lot of reasons why it’s so popular with designers. It defies the trends of web design ubiquity. New Brutalism gives designers permission to have uninhibited creativity. This creativity is often expressed with characteristics like “asymmetry, broken hierarchy, broken grids, big bold typography…overlapping elements, geometric shapes, solid [and] bright colors” as described in “BRUTALIST WEB DESIGNS — The UGLIEST Design Trend of 2020”
With the rise of web accessibility as a key concern for usability professionals, it’s no surprise that Brutalist design style has caught the attention of designers. Many of its principles directly align with accessible design while others are totally at odds with them.
Here’s what you need to know about this trend and how to avoid creative pitfalls which break accessible design rules.
A brief history of New Brutalism
Brutalism is a specific architectural style, but it also has broader implications in design. The term “New Brutalism” can be traced to the 1950s and 1960s, although the architectural movement began in the years following World War II. It shares its name with the earlier Brutalism movement, but there are key differences between the two. The original Brutalism was more extreme, characterized by edifices of raw concrete with little regard for aesthetics. New Brutalism, by contrast, is more refined. Some of the guiding principles of New Brutalism include use of bold, simple shapes that serve as reminders of its industrial origins.
New Brutalism and Accessibility
A meaningful aspect of New Brutalism is its “iconic simplicity of its designs, and for its egalitarian emphasis on mass production and utility.” A key part of creating a usable experience is to make sure that the information on your site and how it’s presented is accessible to your visitors.
Typography
Perhaps the most dominant visual marker of a New Brutalist website is large bold and often outlined or highly stylized typography.
How are these sites inaccessible? For typography to meet WCAG standards it needs to be easily readable and comprehensible. It should also have clear headings and aria declarations.
Do these New Brutalist sites have clear, legible, readable typography? Are there contrast issues? Is vertical text accessible? Elements overlapping text and buttons?
There’s even a bit of irony on the screenshot (Example B) of the design studio which reads “is a kind of creative studio that puts people at the center of our practice” while seemingly ignoring the people who cannot read or access services from their own website.
Color
Of all the aspects of accessibility, color and contrast are especially within designers’ control. While a majority of accessible work is often done within the code of products themselves, color is arguably the easiest hurdle to clear in accessible design.
I enjoyed the nostalgia of this site. A kind of throwback to the geocities pages of yesteryear.
I chose this example because of its use of red and green. These two colors are the most common colors which cause visual confusion for people with various degrees and types of color blindness. We have some serious contrast problems here. Fun and playful, but problematic nonetheless.
Navigation
Navigation, like all accessible design, has both visual and invisible components to it. Under the hood, there are clear navigational declarations for assistive devices and there’s the visual arrangement. Using conventional navigation placement and clear headings for menus.
This is a gorgeously designed site — a Basquiat-esque style of mixed media merged with New Brutalism. Layered parallax with playful discoverability. But unclear navigation, excessive motion and legibility issues challenge several accessibility rules.
Another example of creative, yet jarring hover states. Unclear navigable direction with without much context. Hyper creative, but breaking accessible rules.