Beautiful Accessible Web Design

Beautiful, accessible design

You have to sacrifice aesthetics in order to make your digital product accessible, right? That’s one of the main concerns we hear about accessible design, and it couldn’t be further from the truth. Accessible design does not equal ugly. In fact, in many cases, incorporating accessibility into your design makes it more beautiful. Although it’s not easy to find entirely accessible websites, you can find visually accessible modules and concepts on almost every website you visit. To prove our point that accessible web designs can be beautiful, we’ve gathered a few examples to inspire you.

Colour

When thinking about accessible design, most people first consider use of colour. There’s often a concern that in order to meet adequate colour contrast, you have to sacrifice vibrant colours for dull ones. Use the Web AIM Color Contrast checker to make sure you have adequate contrast.

Joined and Jointed screenshot

Joined and Jointed, a furniture design ecommerce website, uses bright green and yellow throughout their site. These colours paired with black text meets WCAG 2.0 colour contrast guidelines, resulting in content being easier to read while still maintaining a modern and vibrant design.

Azrieli Foundation Memoirs website screenshot

The Holocaust Survivor Memoirs Program website, a website that we designed for the Azrieli Foundation, uses a muted colour palette of blues and gold, showing that accessible “dull” colour combinations can still be beautiful and have as much impact.

Aldo retail website screenshot

For ecommerce websites that sell products available in multiple colours, it’s important to list colour options in text for people who are colour blind, rather than relying on a colour swatch alone. ALDO Shoes uses both colour swatches and names, along with clear selected states, to create an accessible experience for colour blind users. This design would be even better if colour names were in plain language, for example “Beige” instead of “Bone”.

Typography

The typography you use throughout your digital product has a great effect on accessibility. Many designers tend to steer towards small text that is difficult to read for people with vision impairments.

Van Gogh Museum Screenshot

Large, easy to read text is used throughout The Van Gogh Museum website. Along with overall large font sizes, a clear hierarchy is created with the use of headings to provide structure that makes scanning the page easier for everyone.

Links and Buttons

Users who are colour blind may have difficulty knowing what’s clickable on your digital product if links and buttons aren’t distinguishable from other content.

Azrieli Memoirs website screenshot links detail

While designing The Holocaust Survivors Memoir Program website, we underlined links so they stood out amongst other text on the page and didn’t rely on colour as the sole distinguisher. We also ensured that there was adequate colour contrast between buttons and the page background.

Imagery with Text

One of the most common issues around accessibility we continue to run into is the use of images with text. Typically this appears as promotional content, where text is embedded into the image itself making it difficult to read for users who are zooming in, and impossible to read for screen reader users if proper alt tags aren’t included. More often than not, text that’s placed on top of an image (whether it’s an image of text or it’s actual text) doesn’t meet adequate colour contrast either.

Harry's screenshot

The shaving company, Harry’s, places actual text on a light section of the background image so that content is readable by all users (including screen reader users). They even make sure the text stays within the light section of the image on smaller screen sizes; ensuring content is legible on all devices.

Munchery website screenshot

Munchery, a food delivery service, incorporates large beautiful images with centered solid white blocks on top that contain actual text rather than an image of text.

Munchery website screenshot

When the image has a central focus, Munchery moves the block with actual text over to the side. In some cases, they add a slight transparency to the block so that the image can be seen beneath. If you’re using this approach, make sure the transparent block over the image and text still meets colour contrast.

Munchery gifts screenshot

On their Gifts page, Munchery uses illustrations along with blocks of actual text that match the style of the illustration. This design meets the need for visually appealing stylized content, while still maintaining accessibility.

Although there’s a lot to creating an accessible digital product that goes beyond the visuals, visual design is the easiest place to start and has the most impact. An accessible design is better for everyone, and creates a more consistent and enjoyable experience across users, devices and situations.

Why