- Use crisp, high-resolution images for the hero images in a masthead.
- Ensure text and CTAs overlaying a masthead are legible and have at the right contrast ratios per the AA guidelines.
- 4.5:1 for small text
- 3:1 for large text (18px and above)
- Use resources such as this Colour Contrast Checker to verify the contrast ratios.
- Consider using an image overlay filter to enhance legibility.
- Ensure the hero image fits within the viewport on page load.
- Keep text and CTA positions constant across slides in a masthead carousel.
As you use and customize this element, ensure it continues to follow the Accessibility 101 guidelines.