# Spotlight Emphasizes a section on a page through a distinctive background colour. ## Guidelines - Display the Spotlight at the entire width of the [Screen](/docs/components-layout-screen--docs); 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. - Use the default text colour (black) on an azure, lime, orange or yellow background. Use the inverse text colour (white) on a green, magenta or purple background. ## 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)