
<p>Always use the ASP Digital colour palette.</p>


<h2 class="wp-block-heading" id="colour-contrast">Colour contrast</h2>


<p>You must make sure that the contrast ratio of text and interactive elements in your service meets <a href="https://www.w3.org/TR/WCAG21/#contrast-minimum">level AA of the Web Content Accessibility Guidelines (WCAG 2.1)</a>.</p>


<h2 class="wp-block-heading" id="main-colours">Main colours</h2>


<p>If you are using ASP Frontend, use the Sass variables provided rather than copying the hexadecimal (hex) colour values.</p>


 {{ aspSummaryList({ rows: [{key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #005496&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#005496&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #40c057&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#40c057&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #0c2d4a&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#0c2d4a&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #9f9f9f&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#9f9f9f&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #4a1a1a&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#4a1a1a&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #dfdfdf&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#dfdfdf&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #195024&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#195024&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #fff&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#ffffff&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #c92a2a&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#c92a2a&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #37b24d&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#37b24d&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #ebfbee&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#ebfbee&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #c7dbed&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#c7dbed&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #d3f9d8&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#d3f9d8&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #ffd43b&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#ffd43b&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #404040&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#404040&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #804200&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#804200&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #212529&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#212529&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #536c80&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#536c80&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #f8f9fa&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#f8f9fa&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #000&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#000000&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #228be6&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#228be6&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #f9bca9&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#f9bca9&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #b42626&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#b42626&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #797979&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#797979&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #ffe3e3&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#ffe3e3&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #fcc419&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#fcc419&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #666&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#666666&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #b35d00&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#b35d00&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #8a1d1d&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#8a1d1d&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #e7f5ff&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#e7f5ff&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #4dabf7&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#4dabf7&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #bfbfbf&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#bfbfbf&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #868e96&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#868e96&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #dee2e6&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#dee2e6&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #e0bff8&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#e0bff8&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #6c757d&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#6c757d&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #343a40&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#343a40&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #1971c2&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#1971c2&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #a5d8ff&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#a5d8ff&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #d0ebff&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#d0ebff&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #f03e3e&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#f03e3e&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #f59f00&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#f59f00&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #fd9300&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#fd9300&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #b1bbc4&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#b1bbc4&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #2c2a29&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#2c2a29&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #ffdeeb&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#ffdeeb&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #ffec99&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#ffec99&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #495057&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#495057&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #009fdf&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#009fdf&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #fff3bf&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#fff3bf&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #f1f3f5&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#f1f3f5&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #ced4da&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#ced4da&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #ffef9f&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#ffef9f&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #edb5b5&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#edb5b5&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #2b8a3e&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#2b8a3e&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #694900&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#694900&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #155795&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#155795&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #0f3d68&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#0f3d68&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #1864ab&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#1864ab&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #adb5bd&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#adb5bd&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #aad0f3&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#aad0f3&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #257735&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#257735&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #ffe8cc&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#ffe8cc&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #1a4a1e&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#1a4a1e&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #13bbff&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#13bbff&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #e9ecef&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#e9ecef&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #8ccdff&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#8ccdff&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #752888&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#752888&#039;} }, {key: { html: &#039;&lt;span class=&quot;asp-swatch&quot; style=&quot;background-color: #b6edb5&quot;&gt;&lt;/span&gt;&#039;}, value: { html: &#039;#b6edb5&#039;} } ] }) }}