Colour Blindness Preview

<div class="nuda-cpk2-cvd-preview">
  <svg width="0" height="0" aria-hidden="true" focusable="false">
    <defs>
      <filter id="cpk2-cvd-protan">
        <feColorMatrix type="matrix"
          values="0.567 0.433 0 0 0  0.558 0.442 0 0 0  0 0.242 0.758 0 0  0 0 0 1 0" />
      </filter>
      <filter id="cpk2-cvd-deutan">
        <feColorMatrix type="matrix"
          values="0.625 0.375 0 0 0  0.7 0.3 0 0 0  0 0.3 0.7 0 0  0 0 0 1 0" />
      </filter>
      <filter id="cpk2-cvd-tritan">
        <feColorMatrix type="matrix"
          values="0.95 0.05 0 0 0  0 0.433 0.567 0 0  0 0.475 0.525 0 0  0 0 0 1 0" />
      </filter>
    </defs>
  </svg>
  <div class="nuda-cpk2-cvd-preview__row">
    <div class="nuda-cpk2-cvd-preview__cell">
      <span class="nuda-cpk2-cvd-preview__swatch"
            style="background:linear-gradient(135deg,#ff5e7a,#62b6ff,#e4ff54)"></span>
      <span class="nuda-cpk2-cvd-preview__label">Normal</span>
    </div>
    <div class="nuda-cpk2-cvd-preview__cell">
      <span class="nuda-cpk2-cvd-preview__swatch"
            style="background:linear-gradient(135deg,#ff5e7a,#62b6ff,#e4ff54);filter:url(#cpk2-cvd-protan)"></span>
      <span class="nuda-cpk2-cvd-preview__label">Protan</span>
    </div>
    <!-- Deutan and Tritan cells follow the same pattern -->
  </div>
</div>

.nuda-cpk2-cvd-preview {
  padding: 10px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  width: 100%;
  max-width: 260px;
}

.nuda-cpk2-cvd-preview__row {
  display: flex;
  gap: 8px;
}

.nuda-cpk2-cvd-preview__cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.nuda-cpk2-cvd-preview__swatch {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
  transition: transform .2s;
}

.nuda-cpk2-cvd-preview__cell:hover .nuda-cpk2-cvd-preview__swatch {
  transform: scale(1.06);
}

.nuda-cpk2-cvd-preview__label {
  font-size: 9px;
  color: #a0a0a8;
  font-weight: 600;
  letter-spacing: .02em;
}

@media (prefers-reduced-motion:reduce) {
  .nuda-cpk2-cvd-preview__swatch {
    transition: none;
  }
}