Fix low-contrast dashed targets & elements in game themes (BL-16323)#7985
Open
hatton wants to merge 3 commits into
Open
Fix low-contrast dashed targets & elements in game themes (BL-16323)#7985hatton wants to merge 3 commits into
hatton wants to merge 3 commits into
Conversation
…(BL-16323) Several game themes used colors for the dashed drop-target rectangle (and other elements) that were the same as, or too low-contrast against, the page background, making them hard or impossible to see. Audited every element of every theme against WCAG 2.1 Level AA (4.5:1 for text, 3:1 for non-text UI / large text) and gave the failing themes their own contrasting, palette-aware overrides: - garden-path: olive draggable + white text, dark-green target outline, control button, button outline, and selected checkbox (gold was invisible on cream). - coral-reef: pale coral draggables / Check button / selected checkbox and target outline (bold coral was invisible on teal). - white-and-orange-on-blue: brighter orange chips + target outline, white checkbox outline (orange was just under AA on blue; gray was off-palette). - cherry-blossom: deepened the primary cherry so white text clears AA on the magenta chips, plus a cherry border on the white button. - pollinator: deepened the terracotta correct/selected color and the semi-transparent target outline. - blue-on-white / red-on-white: target outline overrides where needed. All eight themes now pass AA on every measured element. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…6323) A reusable skill that audits WCAG contrast across all Bloom game themes and drives an AI-curated, human-approved fix loop: - contrast.py: WCAG contrast library (named/hex/alpha colors, alpha compositing). CLI: py contrast.py <fg> <bg>. - generate_preview.py: parses gamesThemes.less, resolves the full --game-* cascade per theme, measures contrast for every element pair, and writes a self-contained HTML preview. Failing cards are outlined orange/red and offer validated fix options (each checked against ALL of an element's contrast relationships, so a fix can't break a sibling); shows before->after ratios; optionally folds in AI-curated "Recommended" picks from a JSON file, with a copy-to-clipboard approval flow. - SKILL.md: documents the canonical loop (measure -> agent curates palette-aware colors -> validate/visualize -> human approves -> apply -> re-verify) and WCAG AA thresholds. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Updates Bloom’s game theme styling to ensure dashed drop targets and other UI elements meet WCAG 2.1 AA contrast requirements, and adds a reusable “game-theme-preview” skill to audit/preview theme contrast and generate validated fix suggestions.
Changes:
- Adjusted per-theme
--game-*CSS variable overrides ingamesThemes.lessto improve contrast for draggables, targets, buttons, and checkboxes. - Added a new
game-theme-previewskill (docs + scripts) to generate an HTML preview that flags low-contrast element pairs and proposes validated fixes. - Added a small WCAG contrast utility library (
contrast.py) used by the preview generator.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
src/content/templates/template books/Games/gamesThemes.less |
Theme-specific CSS variable overrides to improve visibility/contrast of key game UI elements. |
.github/skills/game-theme-preview/SKILL.md |
Documents the workflow for generating a preview, curating fixes, and re-verifying across themes. |
.github/skills/game-theme-preview/generate_preview.py |
Implements LESS parsing, contrast checks, fix-candidate generation, and HTML preview output. |
.github/skills/game-theme-preview/contrast.py |
Provides WCAG contrast computation utilities including alpha compositing support. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
|
| Filename | Overview |
|---|---|
| src/content/templates/template books/Games/gamesThemes.less | Color contrast fixes across six game themes via targeted CSS variable overrides; every new value is inline-documented with before/after ratios and the BL-16323 issue id. |
| .github/skills/game-theme-preview/generate_preview.py | New LESS parser and HTML preview generator; resolves the full CSS variable cascade per theme, measures contrast for every element pair, and produces an interactive approval UI with curated and mechanically-generated fix options. |
| .github/skills/game-theme-preview/contrast.py | New WCAG contrast utility: handles named colors, 3/6/8-digit hex, alpha compositing, luminance, and contrast ratio; CLI entry point for one-shot checks. |
| .github/skills/game-theme-preview/SKILL.md | Documents the canonical measure→curate→validate→approve→apply loop, WCAG thresholds, and known limitations. |
Reviews (2): Last reviewed commit: "Address PR review feedback on game-theme..." | Re-trigger Greptile
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
- resolve(): support var(--x, fallback) syntax so an undefined variable falls
back instead of returning None and erroring later.
- _search_one(): preserve the alpha channel of an 8-digit hex color so a
"darken/lighten" suggestion for a semi-transparent value (e.g. a translucent
target outline) is never silently made opaque; contrast is judged on the
composited result.
- parse_themes(): fail fast with a clear message if the mixin, base block, or
any theme blocks are missing, and match blocks with [^{}]* so the parser
isn't fragile to a missing newline before the closing brace.
- Document the optional curated.json third argument in the module docstring.
- Copy-output header now reminds the user to keep an issue id in each comment.
- Remove an unused local variable.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
[Claude Opus 4.8]
What & why (BL-16323)
The game themes were generated without checking the color used for the dashed
drop-target rectangles (and several other themed elements) against each theme's
background. In several themes that color was the same as, or too low-contrast
against, the page background, so the dashed targets were hard or impossible to see.
I audited every element of every game theme against WCAG 2.1 Level AA
(4.5:1 for text, 3:1 for non-text UI / large text) and applied palette-aware,
on-theme color overrides. All eight themes now pass AA on every measured element.
Theme fixes (
gamesThemes.less)(blue-on-white, red-on-white, and arctic-dawn already passed AA on every element and were left unchanged.)
Each override has an inline comment explaining the before/after contrast and the issue id.
New tooling:
game-theme-previewskill.github/skills/game-theme-preview/— a reusable way to audit and fix theme contrast:gamesThemes.less, resolves the full--game-*cascade per theme, measures contrast for every element pair, and writes a
self-contained HTML preview. Failing cards are outlined orange/red and offer
validated fix options — each candidate is checked against all of an element's
contrast relationships, so a fix can't pass one while breaking another — with
before→after ratios and an approval/copy flow. It can fold in AI-curated
"Recommended" picks.
colors → validate/visualize → human approves → apply → re-verify.
Notes
one-line variable overrides per theme — no image/SVG assets changed.
output/.../gamesThemes.csswill regenerate from this source.🤖 Generated with Claude Code
This change is