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.
You could also use transparent colors in other ways. For example you could cover the entire background image with a color overlay.
In the same way you could apply a linear gradient and still make it accessible.
You can apply various themes, such as dark theme or yellow 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.
- Visit the following Codepen Overlay color testing tool
- Use Color Contrast Analyzer or something similar
- Set your font color as the foreground color
- Sample the overlay color against white and black backgrounds
// White background example with #212529 body color
background-color: hsla(0, 0%, 100%, 0.55);
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.