style: apply the EchoAssist brand palette - #9
Merged
Conversation
Swap the dark theme's color values for the brand palette, hoisted into :root tokens. Structure, layout, and spacing are untouched. Deep Navy #243B53 page background Soft Echo Blue #6F9FD8 buttons, active states Signal Cream #F4E9B8 category badges Mist Blue #DCEAF6 card surfaces (8% over navy), light text White primary text Three places where a literal swap would have hurt readability, measured against WCAG AA on the rendered pixels rather than on the token values: - Button text is deep navy, not white. White on Soft Echo Blue is 2.75:1; navy on it is 5.5:1. The accent fill is the one surface white cannot sit on. - Links use a lightened Echo Blue (#8fb8e6). The brand blue on navy is 4.18:1, just under AA for 13px nav text; the tint holds the hue at 5.6:1. - Added an ::placeholder rule. The UA default was 2.97:1, and the locked question's "Locked - time expired." message is a placeholder, so it was real UI text failing contrast. Also raises .question.locked from 0.65 to 0.9. The dim is what cost that card its contrast, and no color value can reach it since opacity scales text and background together. At 0.9 everything in the locked card passes except the "time up" label at 4.34. Audited every text node in the quiz flow in a headless browser, compositing the translucent card and inherited opacity. Old theme: 7 AA failures. New theme: 1. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PQgFu8aJXDBmpetgSpsGut
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
1 participant
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.
Swaps the dark theme's color values for the EchoAssist brand palette, hoisted into
:roottokens. Structure, layout, and spacing are untouched — every selector and rule order is identical.#243B53#6F9FD8#F4E9B8#DCEAF6#ffffffWhere a literal swap would have hurt readability
Measured against WCAG AA on the rendered pixels, not on the token values:
#8fb8e6). The brand blue on navy is 4.18:1, just under AA for 13px nav text. The tint holds the hue at 5.6:1.--accentstays exactly#6F9FD8for fills.::placeholderrule. The UA default was 2.97:1, and the locked question's "Locked — time expired." message is a placeholder — real UI text failing contrast. Now 5.9:1.Locked-card opacity
.question.lockedgoes from0.65to0.9. The dim is what cost that card its contrast, and no color value can reach it, since opacity scales text and background together. Measured sweep:Settled on
0.9— still visibly recessed, and the one remaining miss is the "time up" label at 4.34, whose meaning is already carried by the disabled textarea and its placeholder.0.95is fully clean but dims so little the locked affordance disappears.Verification
Rendered the real quiz components against the real stylesheet in headless Chrome and computed contrast ratios for every text node, compositing the translucent card background and inherited opacity. Ran the same audit against the old stylesheet as a baseline.
Old theme: 7 AA failures. New theme: 1.
Score and feedback cards specifically, since they carry the most text: headline 11.5:1, question text 7.6:1, score-and-note lines 5.1:1, complexity label 6.3:1, reasoning line 4.9:1 — all pass.
🤖 Generated with Claude Code
https://claude.ai/code/session_01PQgFu8aJXDBmpetgSpsGut