HTML named colors

{% import “structure/components/components.njk” as macro with context %}

{% block main %} {% set colors = [ { “name”: “AliceBlue”, “class”: “blue light”, “contrastBlack”: 19.58, “contrastWhite”: 1.07, “bestContrast”: “best-black” }, { “name”: “AntiqueWhite”, “class”: “light brown”, “contrastBlack”: 17.93, “contrastWhite”: 1.17, “bestContrast”: “best-black” }, { “name”: “Aqua”, “class”: “blue bright”, “contrastBlack”: 16.75, “contrastWhite”: 1.25, “bestContrast”: “best-black” }, { “name”: “Aquamarine”, “class”: “green bright”, “contrastBlack”: 17.16, “contrastWhite”: 1.22, “bestContrast”: “best-black” }, { “name”: “Azure”, “class”: “light blue”, “contrastBlack”: 20.45, “contrastWhite”: 1.03, “bestContrast”: “best-black” }, { “name”: “Beige”, “class”: “light yellow”, “contrastBlack”: 18.98, “contrastWhite”: 1.11, “bestContrast”: “best-black” }, { “name”: “Bisque”, “class”: “light yellow brown”, “contrastBlack”: 17.15, “contrastWhite”: 1.22, “bestContrast”: “best-black” }, { “name”: “Black”, “class”: “dark neutral”, “contrastBlack”: 1.0, “contrastWhite”: 21.0, “bestContrast”: “best-white” }, { “name”: “BlanchedAlmond”, “class”: “light yellow”, “contrastBlack”: 18.02, “contrastWhite”: 1.17, “bestContrast”: “best-black” }, { “name”: “Blue”, “class”: “blue bright”, “contrastBlack”: 2.44, “contrastWhite”: 8.59, “bestContrast”: “best-white” }, { “name”: “BlueViolet”, “class”: “dark purple”, “contrastBlack”: 3.52, “contrastWhite”: 5.96, “bestContrast”: “best-white” }, { “name”: “Brown”, “class”: “brown dark”, “contrastBlack”: 2.96, “contrastWhite”: 7.08, “bestContrast”: “best-white” }, { “name”: “BurlyWood”, “class”: “brown yellow”, “contrastBlack”: 11.31, “contrastWhite”: 1.86, “bestContrast”: “best-black” }, { “name”: “CadetBlue”, “class”: “blue green”, “contrastBlack”: 6.88, “contrastWhite”: 3.05, “bestContrast”: “best-black” }, { “name”: “Chartreuse”, “class”: “bright green”, “contrastBlack”: 16.21, “contrastWhite”: 1.3, “bestContrast”: “best-black” }, { “name”: “Chocolate”, “class”: “orange brown”, “contrastBlack”: 5.78, “contrastWhite”: 3.63, “bestContrast”: “best-black” }, { “name”: “Coral”, “class”: “orange”, “contrastBlack”: 8.4, “contrastWhite”: 2.5, “bestContrast”: “best-black” }, { “name”: “CornflowerBlue”, “class”: “blue”, “contrastBlack”: 7.06, “contrastWhite”: 2.97, “bestContrast”: “best-black” }, { “name”: “Cornsilk”, “class”: “light yellow”, “contrastBlack”: 19.71, “contrastWhite”: 1.07, “bestContrast”: “best-black” }, { “name”: “Crimson”, “class”: “red”, “contrastBlack”: 4.21, “contrastWhite”: 4.99, “bestContrast”: “best-white” }, { “name”: “Cyan”, “class”: “blue bright”, “contrastBlack”: 16.75, “contrastWhite”: 1.25, “bestContrast”: “best-black” }, { “name”: “DarkBlue”, “class”: “dark blue”, “contrastBlack”: 1.37, “contrastWhite”: 15.3, “bestContrast”: “best-white” }, { “name”: “DarkCyan”, “class”: “dark blue”, “contrastBlack”: 5.07, “contrastWhite”: 4.15, “bestContrast”: “best-black” }, { “name”: “DarkGoldenRod”, “class”: “yellow brown”, “contrastBlack”: 6.45, “contrastWhite”: 3.25, “bestContrast”: “best-black” }, { “name”: “DarkGray”, “class”: “neutral”, “contrastBlack”: 8.94, “contrastWhite”: 2.35, “bestContrast”: “best-black” }, { “name”: “DarkGrey”, “class”: “neutral”, “contrastBlack”: 8.94, “contrastWhite”: 2.35, “bestContrast”: “best-black” }, { “name”: “DarkGreen”, “class”: “dark green”, “contrastBlack”: 2.82, “contrastWhite”: 7.44, “bestContrast”: “best-white” }, { “name”: “DarkKhaki”, “class”: “green”, “contrastBlack”: 10.15, “contrastWhite”: 2.07, “bestContrast”: “best-black” }, { “name”: “DarkMagenta”, “class”: “purple dark”, “contrastBlack”: 2.47, “contrastWhite”: 8.5, “bestContrast”: “best-white” }, { “name”: “DarkOliveGreen”, “class”: “dark green”, “contrastBlack”: 3.53, “contrastWhite”: 5.95, “bestContrast”: “best-white” }, { “name”: “DarkOrange”, “class”: “bright orange”, “contrastBlack”: 9.0, “contrastWhite”: 2.33, “bestContrast”: “best-black” }, { “name”: “DarkOrchid”, “class”: “purple bright”, “contrastBlack”: 3.68, “contrastWhite”: 5.7, “bestContrast”: “best-white” }, { “name”: “DarkRed”, “class”: “dark red”, “contrastBlack”: 2.1, “contrastWhite”: 10.01, “bestContrast”: “best-white” }, { “name”: “DarkSalmon”, “class”: “orange brown”, “contrastBlack”: 9.11, “contrastWhite”: 2.31, “bestContrast”: “best-black” }, { “name”: “DarkSeaGreen”, “class”: “green”, “contrastBlack”: 9.76, “contrastWhite”: 2.15, “bestContrast”: “best-black” }, { “name”: “DarkSlateBlue”, “class”: “dark blue”, “contrastBlack”: 2.32, “contrastWhite”: 9.07, “bestContrast”: “best-white” }, { “name”: “DarkSlateGray”, “class”: “dark green”, “contrastBlack”: 2.35, “contrastWhite”: 8.93, “bestContrast”: “best-white” }, { “name”: “DarkSlateGrey”, “class”: “dark green”, “contrastBlack”: 2.35, “contrastWhite”: 8.93, “bestContrast”: “best-white” }, { “name”: “DarkTurquoise”, “class”: “bright blue”, “contrastBlack”: 10.75, “contrastWhite”: 1.95, “bestContrast”: “best-black” }, { “name”: “DarkViolet”, “class”: “bright purple”, “contrastBlack”: 3.2, “contrastWhite”: 6.56, “bestContrast”: “best-white” }, { “name”: “DeepPink”, “class”: “bright pink”, “contrastBlack”: 5.77, “contrastWhite”: 3.64, “bestContrast”: “best-black” }, { “name”: “DeepSkyBlue”, “class”: “blue bright”, “contrastBlack”: 9.9, “contrastWhite”: 2.12, “bestContrast”: “best-black” }, { “name”: “DimGray”, “class”: “neutral”, “contrastBlack”: 3.83, “contrastWhite”: 5.49, “bestContrast”: “best-white” }, { “name”: “DimGrey”, “class”: “neutral”, “contrastBlack”: 3.83, “contrastWhite”: 5.49, “bestContrast”: “best-white” }, { “name”: “DodgerBlue”, “class”: “blue”, “contrastBlack”: 6.49, “contrastWhite”: 3.24, “bestContrast”: “best-black” }, { “name”: “FireBrick”, “class”: “red orange brown”, “contrastBlack”: 3.14, “contrastWhite”: 6.68, “bestContrast”: “best-white” }, { “name”: “FloralWhite”, “class”: “light”, “contrastBlack”: 20.18, “contrastWhite”: 1.04, “bestContrast”: “best-black” }, { “name”: “ForestGreen”, “class”: “green”, “contrastBlack”: 4.78, “contrastWhite”: 4.39, “bestContrast”: “best-black” }, { “name”: “Fuchsia”, “class”: “bright pink”, “contrastBlack”: 6.7, “contrastWhite”: 3.14, “bestContrast”: “best-black” }, { “name”: “Gainsboro”, “class”: “neutral light”, “contrastBlack”: 15.31, “contrastWhite”: 1.37, “bestContrast”: “best-black” }, { “name”: “GhostWhite”, “class”: “light neutral”, “contrastBlack”: 19.86, “contrastWhite”: 1.06, “bestContrast”: “best-black” }, { “name”: “Gold”, “class”: “bright yellow”, “contrastBlack”: 14.97, “contrastWhite”: 1.4, “bestContrast”: “best-black” }, { “name”: “GoldenRod”, “class”: “yellow”, “contrastBlack”: 9.38, “contrastWhite”: 2.24, “bestContrast”: “best-black” }, { “name”: “Gray”, “class”: “neutral”, “contrastBlack”: 5.32, “contrastWhite”: 3.95, “bestContrast”: “best-black” }, { “name”: “Grey”, “class”: “neutral”, “contrastBlack”: 5.32, “contrastWhite”: 3.95, “bestContrast”: “best-black” }, { “name”: “Green”, “class”: “green”, “contrastBlack”: 4.09, “contrastWhite”: 5.14, “bestContrast”: “best-white” }, { “name”: “GreenYellow”, “class”: “green bright”, “contrastBlack”: 17.12, “contrastWhite”: 1.23, “bestContrast”: “best-black” }, { “name”: “HoneyDew”, “class”: “light”, “contrastBlack”: 20.27, “contrastWhite”: 1.04, “bestContrast”: “best-black” }, { “name”: “HotPink”, “class”: “pink bright”, “contrastBlack”: 7.93, “contrastWhite”: 2.65, “bestContrast”: “best-black” }, { “name”: “IndianRed”, “class”: “red”, “contrastBlack”: 5.28, “contrastWhite”: 3.98, “bestContrast”: “best-black” }, { “name”: “Indigo”, “class”: “dark purple”, “contrastBlack”: 1.62, “contrastWhite”: 12.95, “bestContrast”: “best-white” }, { “name”: “Ivory”, “class”: “light”, “contrastBlack”: 20.81, “contrastWhite”: 1.01, “bestContrast”: “best-black” }, { “name”: “Khaki”, “class”: “yellow”, “contrastBlack”: 16.4, “contrastWhite”: 1.28, “bestContrast”: “best-black” }, { “name”: “Lavender”, “class”: “light”, “contrastBlack”: 17.06, “contrastWhite”: 1.23, “bestContrast”: “best-black” }, { “name”: “LavenderBlush”, “class”: “light pink”, “contrastBlack”: 19.03, “contrastWhite”: 1.1, “bestContrast”: “best-black” }, { “name”: “LawnGreen”, “class”: “green bright”, “contrastBlack”: 15.78, “contrastWhite”: 1.33, “bestContrast”: “best-black” }, { “name”: “LemonChiffon”, “class”: “yellow light”, “contrastBlack”: 19.81, “contrastWhite”: 1.06, “bestContrast”: “best-black” }, { “name”: “LightBlue”, “class”: “blue”, “contrastBlack”: 13.74, “contrastWhite”: 1.53, “bestContrast”: “best-black” }, { “name”: “LightCoral”, “class”: “red”, “contrastBlack”: 8.1, “contrastWhite”: 2.59, “bestContrast”: “best-black” }, { “name”: “LightCyan”, “class”: “light blue”, “contrastBlack”: 19.92, “contrastWhite”: 1.05, “bestContrast”: “best-black” }, { “name”: “LightGoldenRodYellow”, “class”: “yellow”, “contrastBlack”: 19.67, “contrastWhite”: 1.07, “bestContrast”: “best-black” }, { “name”: “LightGray”, “class”: “neutral light”, “contrastBlack”: 14.03, “contrastWhite”: 1.5, “bestContrast”: “best-black” }, { “name”: “LightGrey”, “class”: “neutral light”, “contrastBlack”: 14.03, “contrastWhite”: 1.5, “bestContrast”: “best-black” }, { “name”: “LightGreen”, “class”: “green”, “contrastBlack”: 14.82, “contrastWhite”: 1.42, “bestContrast”: “best-black” }, { “name”: “LightPink”, “class”: “pink”, “contrastBlack”: 12.71, “contrastWhite”: 1.65, “bestContrast”: “best-black” }, { “name”: “LightSalmon”, “class”: “orange”, “contrastBlack”: 10.56, “contrastWhite”: 1.99, “bestContrast”: “best-black” }, { “name”: “LightSeaGreen”, “class”: “green”, “contrastBlack”: 8.01, “contrastWhite”: 2.62, “bestContrast”: “best-black” }, { “name”: “LightSkyBlue”, “class”: “blue”, “contrastBlack”: 12.24, “contrastWhite”: 1.72, “bestContrast”: “best-black” }, { “name”: “LightSlateGray”, “class”: “neutral”, “contrastBlack”: 5.77, “contrastWhite”: 3.64, “bestContrast”: “best-black” }, { “name”: “LightSlateGrey”, “class”: “neutral”, “contrastBlack”: 5.77, “contrastWhite”: 3.64, “bestContrast”: “best-black” }, { “name”: “LightSteelBlue”, “class”: “blue”, “contrastBlack”: 11.8, “contrastWhite”: 1.78, “bestContrast”: “best-black” }, { “name”: “LightYellow”, “class”: “yellow”, “contrastBlack”: 20.63, “contrastWhite”: 1.02, “bestContrast”: “best-black” }, { “name”: “Lime”, “class”: “bright green”, “contrastBlack”: 15.3, “contrastWhite”: 1.37, “bestContrast”: “best-black” }, { “name”: “LimeGreen”, “class”: “green”, “contrastBlack”: 9.91, “contrastWhite”: 2.12, “bestContrast”: “best-black” }, { “name”: “Linen”, “class”: “light”, “contrastBlack”: 18.67, “contrastWhite”: 1.12, “bestContrast”: “best-black” }, { “name”: “Magenta”, “class”: “bright pink”, “contrastBlack”: 6.7, “contrastWhite”: 3.14, “bestContrast”: “best-black” }, { “name”: “Maroon”, “class”: “dark”, “contrastBlack”: 1.92, “contrastWhite”: 10.95, “bestContrast”: “best-white” }, { “name”: “MediumAquaMarine”, “class”: “green”, “contrastBlack”: 10.88, “contrastWhite”: 1.93, “bestContrast”: “best-black” }, { “name”: “MediumBlue”, “class”: “blue”, “contrastBlack”: 1.88, “contrastWhite”: 11.16, “bestContrast”: “best-white” }, { “name”: “MediumOrchid”, “class”: “purple”, “contrastBlack”: 5.33, “contrastWhite”: 3.94, “bestContrast”: “best-black” }, { “name”: “MediumPurple”, “class”: “purple”, “contrastBlack”: 5.58, “contrastWhite”: 3.76, “bestContrast”: “best-black” }, { “name”: “MediumSeaGreen”, “class”: “green”, “contrastBlack”: 7.88, “contrastWhite”: 2.67, “bestContrast”: “best-black” }, { “name”: “MediumSlateBlue”, “class”: “blue”, “contrastBlack”: 5.06, “contrastWhite”: 4.15, “bestContrast”: “best-black” }, { “name”: “MediumSpringGreen”, “class”: “bright”, “contrastBlack”: 15.14, “contrastWhite”: 1.39, “bestContrast”: “best-black” }, { “name”: “MediumTurquoise”, “class”: “bright”, “contrastBlack”: 11.27, “contrastWhite”: 1.86, “bestContrast”: “best-black” }, { “name”: “MediumVioletRed”, “class”: “pink”, “contrastBlack”: 3.87, “contrastWhite”: 5.42, “bestContrast”: “best-white” }, { “name”: “MidnightBlue”, “class”: “dark”, “contrastBlack”: 1.41, “contrastWhite”: 14.85, “bestContrast”: “best-white” }, { “name”: “MintCream”, “class”: “light”, “contrastBlack”: 20.57, “contrastWhite”: 1.02, “bestContrast”: “best-black” }, { “name”: “MistyRose”, “class”: “pink”, “contrastBlack”: 17.44, “contrastWhite”: 1.2, “bestContrast”: “best-black” }, { “name”: “Moccasin”, “class”: “yellow”, “contrastBlack”: 17.02, “contrastWhite”: 1.23, “bestContrast”: “best-black” }, { “name”: “NavajoWhite”, “class”: “yellow”, “contrastBlack”: 16.3, “contrastWhite”: 1.29, “bestContrast”: “best-black” }, { “name”: “Navy”, “class”: “dark blue”, “contrastBlack”: 1.31, “contrastWhite”: 16.01, “bestContrast”: “best-white” }, { “name”: “OldLace”, “class”: “light”, “contrastBlack”: 19.38, “contrastWhite”: 1.08, “bestContrast”: “best-black” }, { “name”: “Olive”, “class”: “green”, “contrastBlack”: 5.01, “contrastWhite”: 4.2, “bestContrast”: “best-black” }, { “name”: “OliveDrab”, “class”: “green”, “contrastBlack”: 5.52, “contrastWhite”: 3.81, “bestContrast”: “best-black” }, { “name”: “Orange”, “class”: “bright orange”, “contrastBlack”: 10.63, “contrastWhite”: 1.97, “bestContrast”: “best-black” }, { “name”: “OrangeRed”, “class”: “bright orange”, “contrastBlack”: 6.1, “contrastWhite”: 3.44, “bestContrast”: “best-black” }, { “name”: “Orchid”, “class”: “purple”, “contrastBlack”: 7.27, “contrastWhite”: 2.89, “bestContrast”: “best-black” }, { “name”: “PaleGoldenRod”, “class”: “yellow”, “contrastBlack”: 16.76, “contrastWhite”: 1.25, “bestContrast”: “best-black” }, { “name”: “PaleGreen”, “class”: “green”, “contrastBlack”: 16.59, “contrastWhite”: 1.27, “bestContrast”: “best-black” }, { “name”: “PaleTurquoise”, “class”: “light blue”, “contrastBlack”: 16.29, “contrastWhite”: 1.29, “bestContrast”: “best-black” }, { “name”: “PaleVioletRed”, “class”: “pink”, “contrastBlack”: 6.75, “contrastWhite”: 3.11, “bestContrast”: “best-black” }, { “name”: “PapayaWhip”, “class”: “light yellow”, “contrastBlack”: 18.56, “contrastWhite”: 1.13, “bestContrast”: “best-black” }, { “name”: “PeachPuff”, “class”: “orange”, “contrastBlack”: 15.98, “contrastWhite”: 1.31, “bestContrast”: “best-black” }, { “name”: “Peru”, “class”: “brown”, “contrastBlack”: 7.02, “contrastWhite”: 2.99, “bestContrast”: “best-black” }, { “name”: “Pink”, “class”: “pink”, “contrastBlack”: 13.65, “contrastWhite”: 1.54, “bestContrast”: “best-black” }, { “name”: “Plum”, “class”: “purple pink”, “contrastBlack”: 10.15, “contrastWhite”: 2.07, “bestContrast”: “best-black” }, { “name”: “PowderBlue”, “class”: “blue”, “contrastBlack”: 14.65, “contrastWhite”: 1.43, “bestContrast”: “best-black” }, { “name”: “Purple”, “class”: “purple”, “contrastBlack”: 2.23, “contrastWhite”: 9.42, “bestContrast”: “best-white” }, { “name”: “RebeccaPurple”, “class”: “purple”, “contrastBlack”: 2.5, “contrastWhite”: 8.41, “bestContrast”: “best-white” }, { “name”: “Red”, “class”: “bright red”, “contrastBlack”: 5.25, “contrastWhite”: 4.0, “bestContrast”: “best-black” }, { “name”: “RosyBrown”, “class”: “brown red”, “contrastBlack”: 7.46, “contrastWhite”: 2.81, “bestContrast”: “best-black” }, { “name”: “RoyalBlue”, “class”: “blue”, “contrastBlack”: 4.33, “contrastWhite”: 4.85, “bestContrast”: “best-white” }, { “name”: “SaddleBrown”, “class”: “dark brown”, “contrastBlack”: 2.96, “contrastWhite”: 7.1, “bestContrast”: “best-white” }, { “name”: “Salmon”, “class”: “red”, “contrastBlack”: 8.4, “contrastWhite”: 2.5, “bestContrast”: “best-black” }, { “name”: “SandyBrown”, “class”: “brown”, “contrastBlack”: 10.33, “contrastWhite”: 2.03, “bestContrast”: “best-black” }, { “name”: “SeaGreen”, “class”: “green”, “contrastBlack”: 4.95, “contrastWhite”: 4.25, “bestContrast”: “best-black” }, { “name”: “SeaShell”, “class”: “light yellow”, “contrastBlack”: 19.55, “contrastWhite”: 1.07, “bestContrast”: “best-black” }, { “name”: “Sienna”, “class”: “brown”, “contrastBlack”: 3.74, “contrastWhite”: 5.62, “bestContrast”: “best-white” }, { “name”: “Silver”, “class”: “neutral”, “contrastBlack”: 11.54, “contrastWhite”: 1.82, “bestContrast”: “best-black” }, { “name”: “SkyBlue”, “class”: “blue”, “contrastBlack”: 12.06, “contrastWhite”: 1.74, “bestContrast”: “best-black” }, { “name”: “SlateBlue”, “class”: “blue”, “contrastBlack”: 3.96, “contrastWhite”: 5.31, “bestContrast”: “best-white” }, { “name”: “SlateGray”, “class”: “dark”, “contrastBlack”: 5.18, “contrastWhite”: 4.05, “bestContrast”: “best-black” }, { “name”: “SlateGrey”, “class”: “dark”, “contrastBlack”: 5.18, “contrastWhite”: 4.05, “bestContrast”: “best-black” }, { “name”: “Snow”, “class”: “light”, “contrastBlack”: 20.31, “contrastWhite”: 1.03, “bestContrast”: “best-black” }, { “name”: “SpringGreen”, “class”: “green”, “contrastBlack”: 15.61, “contrastWhite”: 1.35, “bestContrast”: “best-black” }, { “name”: “SteelBlue”, “class”: “blue”, “contrastBlack”: 5.11, “contrastWhite”: 4.11, “bestContrast”: “best-black” }, { “name”: “Tan”, “class”: “light brown”, “contrastBlack”: 10.65, “contrastWhite”: 1.97, “bestContrast”: “best-black” }, { “name”: “Teal”, “class”: “green”, “contrastBlack”: 4.4, “contrastWhite”: 4.77, “bestContrast”: “best-white” }, { “name”: “Thistle”, “class”: “light purple pink”, “contrastBlack”: 12.36, “contrastWhite”: 1.7, “bestContrast”: “best-black” }, { “name”: “Tomato”, “class”: “orange”, “contrastBlack”: 7.13, “contrastWhite”: 2.95, “bestContrast”: “best-black” }, { “name”: “Turquoise”, “class”: “bright”, “contrastBlack”: 12.79, “contrastWhite”: 1.64, “bestContrast”: “best-black” }, { “name”: “Violet”, “class”: “purple”, “contrastBlack”: 9.06, “contrastWhite”: 2.32, “bestContrast”: “best-black” }, { “name”: “Wheat”, “class”: “light yellow brown”, “contrastBlack”: 15.98, “contrastWhite”: 1.31, “bestContrast”: “best-black” }, { “name”: “White”, “class”: “light”, “contrastBlack”: 21.0, “contrastWhite”: 1.0, “bestContrast”: “best-black” }, { “name”: “WhiteSmoke”, “class”: “neutral”, “contrastBlack”: 19.26, “contrastWhite”: 1.09, “bestContrast”: “best-black” }, { “name”: “Yellow”, “class”: “yellow bright”, “contrastBlack”: 19.56, “contrastWhite”: 1.07, “bestContrast”: “best-black” }, { “name”: “YellowGreen”, “class”: “green bright”, “contrastBlack”: 11.15, “contrastWhite”: 1.88, “bestContrast”: “best-black” } ] %}

<div class="namedColoursContainer">
  <span class="namedColoursPreview"></span>
  <ul class="namedcolours">
    <li class="namedcolours__none" id="namedColourNone">
      <p>No colours for the selected filter</p>
    </li>

    {% for color in colors %}
      <li
    class="namedcolours__item {{ color.bestContrast }} {{ color.class }}"
    style="background-color: {{ color.name }};">
        <h2>{{ color.name }}</h2>
        <div class="namedcolours__actions-wrap">
          <button
          type="button"
          class="namedColourAction noscriptHide"
          data-try="{{ color.name }}">
            Try <span class="visually-hidden">{{ color.name }}</span>
          </button>
          <button
          type="button"
          class="namedColourAction noscriptHide"
          data-copy="{{ color.name }}">
            Copy <span class="visually-hidden">{{ color.name }}</span>
          </button>
        </div>
        <h3>Colour contrast</h3>
        <dl class="namedcolours__cc-wrap">
          <div class="namedcolours__cc" >
            <dt class="blob blob__black">Colour contrast on black</dt>
            <dd>
              {% if color.bestContrast == "best-black" %}
                <span class="visually-hidden">(Best)</span>
              {% endif %}
              {{ color.contrastBlack }}
            </dd>
          </div>
          <div class="namedcolours__cc">
            <dt class="blob blob__white">Colour contrast on white</dt>
            <dd>
              {% if color.bestContrast == "best-white" %}
                <span class="visually-hidden">(Best)</span>
              {% endif %}
              {{ color.contrastWhite }}
            </dd>
          </div>
        </dl>
      </li>
    {% endfor %}
  </ul>
</div>