Fix white-on-accent text contrast across the app (apply --on-accent)

Open
  • Is something wrong?
#373 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
50/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
css
Domain
accessibility

Research direction

First check #326, which this issue depends on, for the --on-accent token and Save-button changes. Then inspect the listed sites in index.css, journal.css, projects.css and tasks.css, and measure their computed contrast across all 16 theme and mode combinations. Done means every failing site uses the token, passing sites remain unchanged, and the specified contrast, visual checks and project checks pass.

Written by the indexing model from the issue text.

Description

bug

Split from #326 (audit half).

Blocked by #326 (it adds the per-theme text-on-accent token --on-accent and fixes the Save button). This story applies the token to the other white-on-accent sites that fail contrast. It changes how highly visible shared controls look (nav link, primary buttons) in the failing theme and mode combinations, so it is reviewed on its own.

Problem

Other places set color: #fff or white on the theme's accent colour. White on --accent fails 4.5:1 in the same 11 of 16 theme and mode combinations as the Save button (#326): dark mode in all themes except Default, and light mode in Rosé Pine, Tokyo Night, Nord and Kanagawa. The figures below are hand-computed and must be re-measured with computed colours.

User Story

As a TaskFlow user, I want text and glyphs on accent-coloured controls to be readable in every theme and in both light and dark mode, so that I can read the active nav link, primary buttons and other accent controls.

Audit sites (corrected locations, at main 5405774)

Site Element Notes
index.css:496 .app-nav-link.is-active White on accent.
index.css:702 .settings-seg-btn.is-active White on accent. In dark mode the accent background is currently overridden by a specificity bug (see Out of Scope), so the contrast check applies only where the accent background is actually applied.
journal.css:97 Listed in the original description White on accent.
journal.css:334 .todo.is-done .todo-check The check glyph is non-text (3:1 threshold). Seven dark combinations fail even 3:1.
journal.css:711 .log-add-btn Touch only.
journal.css:808 .note-action-save
projects.css:139 Listed in the original description White on accent. The comment at projects.css:138 ("No on-accent token exists in index.css; white is intentional.") must be updated.
tasks.css:501 .t-btn-primary
journal.css:667 .task-typeahead-option.active White on var(--color-accent, #6b4fbb); --color-accent is undefined, so the fallback gives about 6.1:1 and it passes. No change needed.

Acceptance Criteria

  1. Given each audit site above, when it is measured with computed colours in all 16 combinations (8 themes × light/dark), then every failing site adopts the --on-accent token from #326 and every passing site is left alone. Text must reach 4.5:1 and non-text glyphs (the check) 3:1.
  2. Given the default theme, then every site that passes today still passes.
  3. Given a changed site, then its layout, size, states (hover, active, focus, disabled) and any touch-only scope are unchanged.
  4. Given the CSS source, then a source-contract test per changed file asserts the site no longer pairs color: #fff (or white) with var(--accent).
  5. Given the finished change, then a search of the CSS for other color: #fff / white rules on accent backgrounds finds no site missing from this list that fails contrast.
  6. Given each shared control (nav link, settings segment button, tasks primary button), when the change is made, then it is checked visually on every page that uses it, in the 11 failing combinations.
  7. Given the existing tokens, then the values of --accent, --accent-soft, --accent-ink and --on-accent are unchanged by this story.
  8. Given the finished change, then npm run type-check, npm run test -- --run --coverage (80% line threshold) and npm run lint pass.

Edge Cases

  • Hover, active and focus states of each changed site keep contrast.
  • The specificity of changed journal.css buttons must still beat the .journal-page button reset (0-1-1): scoped as .journal-page .classname (0-2-0).
  • Where a dark text colour is needed on pastel accents, check that the check glyph and the done-state border still look coherent.
  • #349, #367 and #369 add journal styles and a disabled checkbox state. If any of those uses an accent background, it uses --on-accent.
  • Any other site on --accent missing from this list would fail the same way (criterion 5).

Out of Scope

  • The --muted token (separate app-wide decision).
  • Changing the existing values of --accent, --accent-soft or --accent-ink.
  • Sites that already pass (for example journal.css:667).
  • The dark-mode specificity bug on .settings-seg-btn (#374).
  • The swatch data in lib/themes.ts drifting from the CSS.
  • Any redesign of the controls beyond what is needed to meet contrast.
Dominant language
C#
Stars
1
Forks
0
Avg merge
2h 2m
Merged PRs (30d)
98

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from nevridge/TaskFlow

All issues in nevridge/TaskFlow

Similar issues

More C# issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.