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

Open Beginner friendly
#520 0 comments 0 reactions 0 assignees View on GitHub
accessibility area:general bug good first issue P2
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.