Design System Tips: Creating An Accessible Hero

Large enterprise Design Systems require lots of considerations such as flexibility, theme-ability, and accessibility. Components in the wild tend to be pushed to its limits when you add either too much content or use them in the wrong way. When considering the permutations and having to adhere to WCAG 2.0 AA success criterion, it gets complicated rather quickly.

The following is a demonstration of how to make an accessible full-width image accessible Hero Component.

Making a hero accessible

Let’s start with a common Hero design with text displayed on top of a large background image or video.

While this looks great and you may have no issues reading above text, folks with cognitive or visual disabilities might not be able to read or see it at all. We could try adjusting the text color to pass the AA ratio, but having so many lights and darks in the background would make it impossible. Also take into consideration different images and shifting at different viewport widths.

What’s the solution?

Placing a transparent color overlay between copy and background image could guarantee color contrast no matter what’s behind it. This approach makes it look nice and adds interest to the design.

Hero Component with transparent box

You could also use transparent colors in other ways. For example you could cover the entire background image with a color overlay.

Hero Component with transparent background

In the same way you could apply a linear gradient and still make it accessible.

Hero Component with transparent gradient

You can apply various themes, such as dark theme or yellow theme.

Hero Component dark theme
Hero Component Yello theme

Checkout this codepen with live examples I put together. (Best viewed full screen)

How do you find the right transparency?

This requires a manual process but it doesn’t take much time to find the right transparency.

// White background example with #212529 body color
.bg-light-t {
background-color: hsla(0, 0%, 100%, 0.55);
}
Above example showing body copy color set to #212529

That about wraps it up. Keep adjusting the transparency until your body copy passes contrast ratio and you’ll have a full-proof accessible Hero. Please keep in mind this might not work for all color combinations, but will probably work for most.