# Decorative pattern handoff worksheet

Brighter Workshop · Resource revision: 2026-09-07

Companion guide: https://brighterworkshop.com/guides/a-pattern-handoff-that-survives-forced-colors
Tool: https://brighterworkshop.com/tools/pattern-studio

AI-assisted educational example and blank worksheet. The example has not been tested in your page and does not certify contrast or accessibility. Keep results untested until checked in the finished integration. This file does not upload the completed record.

## Placement contract

- Component/page and revision:
- Destination selector:
- Decorative purpose:
- Text, action, and meaning that must remain when decoration disappears:
- Meaning currently carried by color/pattern, if any:
- Equivalent label or representation for that meaning:
- Pattern type:
- Mark color:
- Paper color:
- Repeat scale and units:
- Source: generated CSS / PNG export / other:
- Export filename and revision:
- If PNG, intrinsic image dimensions and displayed dimensions:
- Approved placement(s):
- Next integration check and owner:

## Contrast record

Add one row per text, icon, boundary, or state that needs assessment. Do not treat pattern-to-pattern contrast as a text or control result.

| Item/state | Foreground | Actual adjacent/background color | Text size/weight, if relevant | Measured ratio | Applicable target and reason | Evidence/outcome |
| --- | --- | --- | --- | --- | --- | --- |
| Main text | | | | | | untested |
| Link text | | | | | | untested |
| Action label | | | | | | untested |
| Necessary control indicator | | | | | | untested |
| Focus/selected state | | | | | | untested |

## Educational HTML starting point

Use the appropriate heading level in the surrounding document. Keep any real controls inside the solid card and retain their own accessible names and focus styling.

```html
<div class="pattern-frame">
  <section class="pattern-card" aria-labelledby="sample-card-title">
    <h2 id="sample-card-title">A small practice note</h2>
    <p>The title and explanation remain when the decorative grid is removed.</p>
  </section>
</div>
```

To try the plain version, add `data-texture="off"` to this example's outer div. This attribute is a hook for integration; it does not add a user-facing switch or preference storage.

## Educational CSS starting point

The selectors and palette are illustrative. Adapt them deliberately, then measure and test the result. Keep the fallback rules after the corresponding base rules and check the final cascade. This example uses a CSS gradient; a URL-based image may behave differently in forced colors.

```css
.pattern-frame {
  --pattern-ink: #adc6d5;
  --pattern-paper: #f3f5ee;
  --pattern-step: 2rem;
  padding: 1rem;
  background-color: var(--pattern-paper);
  background-image:
    linear-gradient(var(--pattern-ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--pattern-ink) 1px, transparent 1px);
  background-size: var(--pattern-step) var(--pattern-step);
}

.pattern-card {
  color: #172f43;
  background-color: #ffffff;
  border: 1px solid currentColor;
  padding: 1.25rem;
}

.pattern-frame[data-texture="off"] {
  background-image: none;
}

@media (forced-colors: active) {
  .pattern-frame {
    background-image: none;
    background-color: Canvas;
  }

  .pattern-card {
    color: CanvasText;
    background-color: Canvas;
    border-color: CanvasText;
  }
}

@media print {
  .pattern-frame {
    background-image: none;
    background-color: #ffffff;
    padding: 0;
  }

  .pattern-card {
    color: #000000;
    background-color: #ffffff;
    border-color: currentColor;
  }
}
```

The snippet leaves automatic forced-color adjustment enabled. It does not style every link, form control, focus state, or ancestor in a finished page. Check those parts independently.

## Integration observation matrix

Duplicate rows for additional viewports, states, or browsers.

| Mode | Browser/OS and version | Page state and action | Evidence filename | Result and remaining issue |
| --- | --- | --- | --- | --- |
| Normal display | | | | untested |
| Texture hook off | | | | untested |
| Forced-colors emulation | | | | untested |
| Actual OS contrast theme, if available | | | | untested |
| Print preview | | | | untested |

For each run record:

- Actual viewport/zoom or paper setting:
- Could the title and explanation still be read?
- Did meaning survive without the pattern?
- Could each included action still be identified and used?
- Were borders/focus/selection indicators visible where needed?
- Any clipping, overlap, or changed behavior:
- Outcome: untested / observed okay under these conditions / issue found
- Follow-up owner and condition:

## Release/retest record

- Reviewed source revision:
- Reviewed placement(s):
- Remaining untested modes:
- Unresolved issue(s):
- Change requiring retest:
- Retest result and evidence:

## Primary references

- Decorative CSS images: https://www.w3.org/WAI/WCAG22/Techniques/css/C9
- Text contrast: https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
- Background-image contrast: https://www.w3.org/WAI/WCAG22/Techniques/failures/F83
- Non-text contrast: https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html
- Forced colors: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/forced-colors
- Forced color adjustment: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/forced-color-adjust
- Print styles: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Printing
- Media-feature emulation: https://developer.chrome.com/docs/devtools/rendering/emulate-css

## Use and privacy

Reuse permissions and resource limitations: https://brighterworkshop.com/terms

How the publication handles website visits and tool inputs: https://brighterworkshop.com/privacy