Text fields' borders fail 3:1 in every theme but High contrast #305
Reference in New Issue
Block a user
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?
Text fields and selects draw their edge with
border:1px solid var(--line)on avar(--bg)fill (web/app.css:565-567).--lineis a separator colour and sits about 1.2-2:1 against what surrounds the field, and the fill is about 1.0-1.25:1, so in most themes a field is hard to tell from the panel it is on (in Glass the fill matches the bar exactly). Its focus state is a 1px change of that border to the accent, with the outline removed (:569), where every other control gets the 2px ring (:482).Measured in Playwright on the search box, border against the bar around it (non-text needs 3:1):
tests/contrast.jshas no rule for a field's edge, so nothing caught it. The sign-in page has the same problem with its own copy of the palette.Found in an interface review (2026-10-19). WCAG 1.4.11.
Fix: a field-border role of its own, not
--line, which separators also use and which need not be 3:1. One way that covers every theme at once:--fieldderived from each theme's own colours (color-mix(in oklab, var(--fg) N%, var(--bg))), with the pair added totests/contrast.js. Deleteoutline:0on:569so fields get the same focus ring as everything else.The dialogs have the same failure, in the same 24 of 25 palettes and at the same values, measured in Playwright: Add a feed's Keywords (
#nkw), Download latest's count (#dcount), a feed's Settings Address (#surl), New signal's description (#sgdesc), OPML's paste box (#opmlText), and Settings' Hide items mentioning (#sblock) and API token name (#tokname). They use the same rule, so one fix toweb/app.css:565-569covers them. The off switch is #308.Fixed in
6ec2c35: a new--field, each theme's--fgmixed into its--bgin OKLab (--fieldmix, 60%, 65-80% for Adwaita light, Nordic, Catppuccin, Gruvbox light and Solarized light), edges text boxes, selects, chips and the OPML box, phones included. tests/contrast.js holds it to 3:1 on bg, panel, panel2 and raise in every palette, and fails if it drops. Fields lostoutline:0and take the same focus ring as every other control.--lineis unchanged. Deployed in ipx-web (1.2.1-dev).