Color Swatch - Everyday Interface Patterns

A static color swatch selected readback shows Canvas Tote, Forest Green color, selected swatch, and Color preview status.

Program

A selected color swatch should pair the visual chip with a clear text readback.

color_swatch_selected.html

Visuals: captured from real browser rendering

<section class="swatch-selected" aria-labelledby="swatch-selected-title"><h2 id="swatch-selected-title">Color swatch selected</h2><div class="swatches" aria-label="Static color swatch preview"><span class="swatch green">Forest Green selected</span><span class="swatch blue">Navy</span><span class="swatch gray">Stone</span></div><dl>
  <div><dt>Product</dt><dd>Canvas Tote</dd></div>
  <div><dt>Color</dt><dd>Forest Green</dd></div><div><dt>Swatch</dt><dd>Selected</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Color preview</span></dd></div></dl>
  <p class="check">Learner check: the selected color has both a visual swatch and text readback.</p>
  <p class="note">Static color swatch preview only; no framework, product API, cart mutation, gallery engine, variant engine, click handler, keyboard handler, route change, storage, cookie, API, network, script, event listener, form submit, input, textarea, contenteditable, timer, analytics, object URL, download, service worker, account/session behavior, live product gallery, live variant change, live cart update, or live submission runs.</p></section>
<style>
  .swatch-selected { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #15803d; padding: 12px; background: #f0fdf4; }
  .swatches { display: flex; flex-wrap: wrap; gap: 8px; max-width: 32rem; }
  .swatch { border-radius: 999px; border: 1px solid #166534; padding: 8px 10px; }
  .green { background: #bbf7d0; outline: 2px solid #15803d; font-weight: 700; }
  .blue { background: #dbeafe; }
  .gray { background: #e5e7eb; }
  .swatch-selected dl { display: grid; gap: 8px; margin: 0; }
  .swatch-selected dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .swatch-selected dt { color: #475569; }
  .swatch-selected dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #bbf7d0; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the color swatch source.
The section is labelled by its visible heading.
Show the color swatch affordance.
The static swatches show visible color options.
Show the pinned product row.
The product row gives the readback context without a product API.
Show the pinned color state.
The color row and swatch text show the selected state.
Render color-preview status.
The status badge is the rendered consequence of the pinned swatch state.
Check swatch readback.
Static markup, visual swatch, readback, state update, rendered status, and no live variant change.

step flow step(1) labels the static source, step(2) shows the visual swatch affordance, step(3) shows the user readback, step(4) shows the pinned color state update, step(5) shows the rendered consequence, and step(6) checks learner readback with honesty.

swatch readback The section heading names the color swatch selected surface.

swatch rows Product, Color, Swatch, and Status values are exact pinned data.

no live variant engine The lesson should not imply frameworks, product APIs, cart mutations, gallery engines, variant engines, click handlers, keyboard handlers, route changes, storage, cookies, APIs, networks, scripts, event listeners, form submits, inputs, textareas, contenteditable surfaces, timers, analytics, object URLs, downloads, service workers, account/session behavior, live product galleries, live variant changes, live cart updates, or live submissions.