Accent contrast + dark-mode white-on-red halation fixes#52
Merged
Conversation
Dark-mode filled-red controls used pure #ffffff on a saturated red, which passes WCAG contrast but causes painful edge halation against the near-black page. Soften the text to a warm rose-white (#ffe1e7) on a slightly calmer red (#9e3346) for the verb-tower active chip / mode toggle / Analyse button and the pennsic-planner active pill and accent-fill buttons (still 5.7:1, AA+). Light mode is unchanged (white on red on light paper has no halation). verb-tower also: deepen the light-mode gold crown #d99a1f -> #a8730a (2.4:1 -> 3.5:1, clears the 3:1 graphics floor it was failing); deepen the connective rose spine in both modes so it actually reads; and replace leftover off-brand slate-blue input/result borders (#4a6280/#3d5270) with an on-brand rose-brown (#7a5862). function-plotter and image-comparison-table needed no changes. Co-Authored-By: Claude Opus 4.8 <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
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.
Accent colour usability pass
Audited the accent system across all four widgets for contrast and readability (light + dark), then fixed what the audit — and one thing the audit couldn't see — turned up.
Dark-mode white-on-red halation (the perceptual one)
Filled-red controls used pure
#ffffffon a saturated red. That passes WCAG contrast (6.5:1), but pure white on saturated red against a near-black page produces painful edge halation/shimmer — a known blind spot in the luminance-ratio math. Softened the text to a warm rose-white#ffe1e7on a slightly calmer red#9e3346(still 5.7:1, AA+). Light mode is untouched (white-on-red on light paper has no halation).--accent-fillbuttons (Export / Create / lightbox primary), tokenised from a hardcoded#fffso dark mode can soften while light stays identicalverb-tower contrast cleanup
#d99a1f→#a8730a— the top-tier "finished form" marker was only 2.1–2.4:1 against the warm paper, failing the 3:1 graphics floor; now 3.5:1 and still clearly gold.#e59aa6→#d2677alight,#8a3a48→#a85a68dark) so it actually reads as a link between tiers.#4a6280/#3d5270input/result borders (survivors from a pre-brand era) replaced with an on-brand rose-brown#7a5862at matching visibility.No changes needed
All values verified with WCAG 2.1 contrast computation; the two perceptual changes (dark buttons, light gold crown) were confirmed against rendered before/after screenshots.
🤖 Generated with Claude Code