CSS forced-color-adjust Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Base layout */
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: #f3f4f6;
  color: #111827;
  padding: 40px;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

h1 {
  grid-column: 1 / 3;
  margin: 0 0 8px;
  font-size: 1.25rem;
}

/* Card common */
.card {
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.05);
  background: #1e90ff;
  color: #fff;
}

/* Preserve  -  keep author colors even in forced-color mode */
.card.preserve {
  forced-color-adjust: none;
}
.card.preserve .btn {
  background: #fff;
  color: #1e90ff;
  border: 0;
}

/* Adapt  -  allow system forced colors to override */
.card.adapt {
  forced-color-adjust: auto;
  /* Use system color tokens that adapt to forced colors */
  background: Highlight;
  color: HighlightText;
  border: 2px solid ButtonText;
}
.card.adapt .btn {
  background: ButtonFace;
  color: ButtonText;
  border: 1px solid ButtonText;
}

/* Button common */
.btn {
  padding: 10px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}

/* Note */
.note {
  grid-column: 1 / 3;
  color: #6b7280;
  margin: 12px 0 0;
}
</style></head><body><main class="container">
    <h1>CSS forced-color-adjust demo</h1>

    <section class="card preserve">
      <h2>Preserve colors</h2>
      <p>This card uses <code>forced-color-adjust: none;</code> to keep the author's colors in forced-color modes.</p>
      <button class="btn">Primary action</button>
    </section>

    <section class="card adapt">
      <h2>Adapt to forced colors</h2>
      <p>This card uses <code>forced-color-adjust: auto;</code> so user/system colors are applied.</p>
      <button class="btn">Primary action</button>
    </section>

    <p class="note">Try enabling a high-contrast/forced-color mode to see the difference.</p>
  </main></body></html>