rays/ipx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

An off switch is nearly invisible in every light theme #308

New Issue
Closed
opened 2026-10-19 12:49:03 -07:00 by rays · 1 comment
rays commented 2026-10-19 12:49:03 -07:00
Owner
Copy Link

A switch (.sw, the feed's Settings dialog, the Settings dialog) is a track in var(--raise) with a var(--line) border and a white knob (web/app.css:1141, :1143). Off, in a light theme, the track sits on a light card and the knob is white on a light track, so neither the switch nor its state reaches 3:1.

Measured in Playwright with the off switch in a feed's Settings:

track edge on the card knob on the track
Modern light 1.45 1.28
Dracula light 1.37 1.54
Material light 1.55 1.30
Adwaita light 1.18 1.37
Flat Remix light 1.41 1.26
Paper 1.34 1.47
Nordic light 1.30 1.49
Catppuccin light 1.49 1.54
Gruvbox light 1.37 1.72
Solarized light 1.33 1.47
Glass light 1.17 1.23
High contrast light 7.46 1.45

In the dark palettes the white knob carries it (7-13:1), and an on switch is the accent fill. Classic uses native checkboxes and is not affected.

Found in an interface review (2026-10-19). WCAG 1.4.11. Related: #305, the same --line border on text fields.

Fix: give the off track an edge that reaches 3:1, the same field-edge colour #305 adds, and give the knob a border or a darker shadow in light themes, with the pair added to tests/contrast.js.

A switch (`.sw`, the feed's Settings dialog, the Settings dialog) is a track in `var(--raise)` with a `var(--line)` border and a white knob (`web/app.css:1141`, `:1143`). Off, in a light theme, the track sits on a light card and the knob is white on a light track, so neither the switch nor its state reaches 3:1. Measured in Playwright with the off switch in a feed's Settings: | | track edge on the card | knob on the track | |---|---|---| | Modern light | 1.45 | 1.28 | | Dracula light | 1.37 | 1.54 | | Material light | 1.55 | 1.30 | | Adwaita light | 1.18 | 1.37 | | Flat Remix light | 1.41 | 1.26 | | Paper | 1.34 | 1.47 | | Nordic light | 1.30 | 1.49 | | Catppuccin light | 1.49 | 1.54 | | Gruvbox light | 1.37 | 1.72 | | Solarized light | 1.33 | 1.47 | | Glass light | 1.17 | 1.23 | | High contrast light | 7.46 | 1.45 | In the dark palettes the white knob carries it (7-13:1), and an on switch is the accent fill. Classic uses native checkboxes and is not affected. Found in an interface review (2026-10-19). WCAG 1.4.11. Related: #305, the same `--line` border on text fields. Fix: give the off track an edge that reaches 3:1, the same field-edge colour #305 adds, and give the knob a border or a darker shadow in light themes, with the pair added to `tests/contrast.js`.
rays added the bug label 2026-10-19 12:49:03 -07:00
rays commented 2026-10-19 13:13:50 -07:00
Author
Owner
Copy Link

Fixed in 6ec2c35: the switch track's edge is the new --field (#305), 3:1 or more on every surface, and in light themes the white knob has a --field ring. Deployed in ipx-web (1.2.1-dev).

Fixed in 6ec2c35: the switch track's edge is the new `--field` (#305), 3:1 or more on every surface, and in light themes the white knob has a `--field` ring. Deployed in ipx-web (1.2.1-dev).
rays closed this issue 2026-10-19 13:13:50 -07:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
bug
Something is not working
 duplicate
This issue or pull request already exists
 enhancement
New feature
 help wanted
Need some help
 invalid
Something is wrong
 question
More information is needed
 wontfix
This won't be fixed
No Label bug
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
rays
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: rays/ipx#308
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?