# Spotlight Emphasizes a section on a page through a distinctive background colour. ## Guidelines - Display the Spotlight at the entire width of the [Page](/docs/components-containers-page--docs) container; do not position it on the [Grid](/docs/components-layout-grid--docs). - Add a Grid with medium vertical padding inside the Spotlight to add whitespace around the content, even for a single element. - Use any of the [highlight colours](/docs/brand-design-tokens-colour--docs) for the background. The design system does not prescribe a meaning to any of these colours. The default is purple. - Select [the correct colour](?path=/docs/brand-design-tokens-colour--docs#pairing-foreground-with-background-colours) for text and links against the background you choose. ## Relevant WCAG requirements - [WCAG 1.4.3](https://www.w3.org/TR/WCAG21/#contrast-minimum): Large-scale text and images of large-scale text have a contrast ratio of at least 3:1; ## References - [Color and contrast accessibility](https://web.dev/articles/color-and-contrast-accessibility)