uttrflow / uttrflow/uttrflow-swift

Unselected Settings tab names are white at 56% on the rail, 4.15:1

Open Beginner friendly
#521 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
4h 27m
Merged PRs (30d)
286

Description

## What happens

In the Settings window's rail, a tab that isn't selected draws its name in white at 56% opacity (`Sources/Uttrflow/Settings/SettingsRootView.swift:97`, `.foregroundStyle(.white.opacity(isSelected ? 1 : 0.56))`), 12.5 pt medium.

The tabs sit at the top of the rail, where the gradient is `BrandPalette.Teal.railTop` `0x0E4F49`. White at 56% over that colour is `0x93AFAC`, and its contrast is **4.15:1**, under the 4.5:1 WCAG AA asks of text at this size. It's the same in both appearances, because the rail doesn't change with them.

| Opacity | Contrast on `railTop` |
|---|---|
| 0.56 (now) | 4.15 |
| 0.60 | 4.52 |
| 0.62 | 4.68 |
| 0.66 | 5.08 |

## Why it matters

Four of the five tab names are always the unselected ones, so most of the Settings navigation is below AA for low-vision users.

## How to reproduce

Open Settings (⌘,). Compute the ratio from the values above with the WCAG 2.x formula, or measure an unselected tab name against the rail with Digital Color Meter.

## Acceptance criteria

- Unselected tab names reach at least 4.5:1 against `railTop`. 0.62 gives 4.68:1 and still reads clearly as unselected next to the selected tab's full white and semibold weight.
- Nothing else about the rail changes.

## Where to start

- `Sources/Uttrflow/Settings/SettingsRootView.swift:97`. Consider naming the opacity in `SettingsMetrics` with a comment giving the ratio.
- Palette tests live in `Tests/UttrflowTests/OrbitPaletteTests.swift` if you want to pin the ratio.
- Run `make verify`, and see `CONTRIBUTING.md`.

Size: one line.

Contributor guide

Open the contributing guide

Research direction

Start at Sources/Uttrflow/Settings/SettingsRootView.swift:97 and inspect the unselected tab foreground opacity. Adjust only that opacity so the tab names reach at least 4.5:1 contrast against BrandPalette.Teal.railTop, then run make verify. Review Tests/UttrflowTests/OrbitPaletteTests.swift if adding a contrast check; done means the rail is otherwise unchanged and the acceptance ratio is met.

Written by the indexing model from the issue text.

Assessment

Tech stack
macos, swift
Domain
accessibility, desktop
Issue type
Bug
Difficulty
1/5
Estimated time
Under an hour
Activity status
Active
Clarity
Clearly specified
Newbie friendliness
94/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.