uttrflow / uttrflow/uttrflow-swift
The page header's kicker and the selected sidebar icon use the fixed brand teal: 2.26:1 and 1.87:1 in light mode
- Dominant language
- Swift
- Stars
- 4
- Forks
- 17
- Avg merge
- 3h 32m
- Merged PRs (30d)
- 277
Description
## What happens
Two pieces of the main window's chrome draw in `Color.dockActive`, which is the fixed brand teal `BrandPalette.Teal.primary` `0x29C0B4` with no light-mode variant (`Sources/Uttrflow/Dock/DockView.swift:568`):
1. **The page header's kicker**, the small capitalised page name above every page title (`Sources/Uttrflow/Main/MainWindowView.swift:185-188`), 10 pt on `Color.mainCard`. In the light appearance that is **2.26:1** on white. WCAG AA asks 4.5:1.
2. **The selected sidebar icon** (`Sources/Uttrflow/Sidebar/SidebarView.swift:123-125`, `tint(_:)`), on `Color.railGround` `0xEAE9F0` in light mode, is **1.87:1**. That is below the 3:1 asked of a UI component, and the icon colour is most of what says which page is selected (the selection wash is 7% alpha, `OrbitPalette.swift:19`).
In dark mode both pass (8.41:1 and 8.81:1).
The palette already has the right colour: `BrandPalette.Teal.ink` (`BrandTone(dark: 0x5FE0D3, light: 0x0E6B64)`), exposed as `Color.settingsAccentInk` (`Sources/Uttrflow/Settings/SettingsControlStyles.swift:164`) and `Color.onboardingAccentInk`. It gives 6.35:1 on the light card, 5.27:1 on the light rail, and 11.85:1 / 12.41:1 in dark.
## Why it matters
In the light appearance, a low-vision user can't tell which sidebar page is selected from the icon, and the page name above the title is close to invisible.
## How to reproduce
System Settings, Appearance, Light. Open the main window and pick any page other than Home. The teal kicker above the title and the selected icon in the collapsed sidebar are both very faint. Ratios computed from the hex values with the WCAG 2.x formula.
## Acceptance criteria
- The kicker and the selected sidebar icon (and the collapsed sidebar's badge dot, `SidebarView.swift:131`, if you like) use `Teal.ink` rather than the fixed `Teal.primary`.
- Dark mode looks the same as before, apart from the slightly brighter `Teal.bright`.
## Where to start
- `Sources/Uttrflow/Main/MainWindowView.swift:188` and `Sources/Uttrflow/Sidebar/SidebarView.swift:124`. A shared `Color` for "accent as foreground" in `OrbitPalette.swift` would be tidier than borrowing the Settings name.
- Tests: `Tests/UttrflowTests/OrbitPaletteTests.swift`.
- Run `make verify` before opening the PR, and see `CONTRIBUTING.md`.
Size: small, two or three lines plus a test.
Contributor guide
Research direction
Start at Sources/Uttrflow/Main/MainWindowView.swift:188 and Sources/Uttrflow/Sidebar/SidebarView.swift:124 to trace the kicker and selected-icon colors. Read the existing palette definitions and Tests/UttrflowTests/OrbitPaletteTests.swift, then run the relevant tests and make verify. Done means the light-mode elements meet the stated contrast targets while dark mode remains visually consistent.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- swift
- Domain
- accessibility, desktop
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 88/100