Search and filter placeholders fail contrast in 20 of 25 palettes #302

New Issue

rays · 2026-10-19T12:39:48-07:00

rays commented

2026-10-19 12:39:48 -07:00

No theme styles ::placeholder, so the search box and the feed filter show the browser's grey, rgb(117,117,117), whatever the theme. Those placeholders are also the fields' only label ("Search Test Show…", "Filter feeds…"; web/index.html:31, :39).

Measured in Playwright, placeholder against the field's fill, every theme and mode (AA text needs 4.5:1):

	dark	light
Modern	3.92	4.19
Dracula	3.09	4.44
Material	4.04	4.38
Adwaita	3.65	4.61
Flat Remix	3.11	4.41
Paper		3.96
Nordic	2.71	4.00
Catppuccin	3.56	4.07
Gruvbox	3.20	4.06
Solarized	3.26	4.27
High contrast	4.56	4.61
Classic		4.61
Glass	4.21	4.07

Glass is approximate: its bars are translucent.

Found in an interface review (2026-10-19). WCAG 1.4.3, 3.3.2.

Fix: ::placeholder{color:var(--faint)} in web/app.css (--faint is already held to 4.5:1 on bg, panel and panel2 by tests/contrast.js), and an aria-label on each field so its name does not depend on the placeholder.

No theme styles `::placeholder`, so the search box and the feed filter show the browser's grey, rgb(117,117,117), whatever the theme. Those placeholders are also the fields' only label ("Search Test Show…", "Filter feeds…"; `web/index.html:31`, `:39`). Measured in Playwright, placeholder against the field's fill, every theme and mode (AA text needs 4.5:1): | | dark | light | |---|---|---| | Modern | 3.92 | 4.19 | | Dracula | 3.09 | 4.44 | | Material | 4.04 | 4.38 | | Adwaita | 3.65 | 4.61 | | Flat Remix | 3.11 | 4.41 | | Paper | | 3.96 | | Nordic | 2.71 | 4.00 | | Catppuccin | 3.56 | 4.07 | | Gruvbox | 3.20 | 4.06 | | Solarized | 3.26 | 4.27 | | High contrast | 4.56 | 4.61 | | Classic | | 4.61 | | Glass | 4.21 | 4.07 | Glass is approximate: its bars are translucent. Found in an interface review (2026-10-19). WCAG 1.4.3, 3.3.2. Fix: `::placeholder{color:var(--faint)}` in `web/app.css` (`--faint` is already held to 4.5:1 on `bg`, `panel` and `panel2` by `tests/contrast.js`), and an `aria-label` on each field so its name does not depend on the placeholder.

rays added the bug label 2026-10-19 12:39:48 -07:00

rays commented

2026-10-19 12:49:14 -07:00

The dialogs' placeholders are the same browser grey and fail in the same 20 of 25 palettes: Add a feed's URL (#nurl), a feed's Settings word boxes (#skwin, #sblockin), New signal's name and description (#sgname, #sgdesc) and its word box (#sgkwin), and Settings' API token name (#tokname). The ::placeholder rule covers them all. Add a feed's URL is also named only by its placeholder: #307.

The dialogs' placeholders are the same browser grey and fail in the same 20 of 25 palettes: Add a feed's URL (`#nurl`), a feed's Settings word boxes (`#skwin`, `#sblockin`), New signal's name and description (`#sgname`, `#sgdesc`) and its word box (`#sgkwin`), and Settings' API token name (`#tokname`). The `::placeholder` rule covers them all. Add a feed's URL is also named only by its placeholder: #307.

rays referenced this issue from a commit

2026-10-19 13:12:37 -07:00

Keyboard, screen reader and contrast fixes from the interface review (#298 #299 #300 #301 #302 #303 #304 #305 #306 #307 #308 #309)

rays commented

2026-10-19 13:13:43 -07:00

Fixed in 6ec2c35: ::placeholder takes each theme's --faint, which tests/contrast.js already holds to 4.5:1, and the search and filter boxes have names (Search, Filter feeds) that do not depend on the placeholder. Deployed in ipx-web (1.2.1-dev).

Fixed in 6ec2c35: `::placeholder` takes each theme's `--faint`, which tests/contrast.js already holds to 4.5:1, and the search and filter boxes have names (Search, Filter feeds) that do not depend on the placeholder. Deployed in ipx-web (1.2.1-dev).

rays closed this issue

2026-10-19 13:13:43 -07:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: rays/ipx#302