Text reads on every surface, and accordions are outlines
Explore this workspace.
Technical background
An audit of every settings surface found 94 runs of text below WCAG AA in a light scheme and 98 in a dark one. None remain. Secondary text is a measured colour instead of half opacity, badges and buttons take text measured against their own fill, alerts are tints with measured text, and a dark scheme no longer shows a white stripe beside the vertical tab bar. Accordions are outlined cards rather than grey slabs, and profile selector rows show a pointer.
The problem
On a light scheme, settings descriptions sat in pale grey on grey panels, the profile selector's ENTER hint was white on light grey, an SSH badge was white on near-white and a Telnet one black on bright blue. Accordions were stacked grey slabs, and on a dark scheme a full-height white stripe ran between the vertical tab bar and the tab.
How it works
The causes were few and global. Secondary text was the foreground at half opacity, which is a different colour on every surface; ThemesService now derives --theme-muted-fg to reach 4.5:1 on the page, both raised panels and both hover fills. Bootstrap compiles each .text-bg-* text colour at build time against its own palette while the fill is the scheme's runtime colour, so badges and buttons now read a colour measured against their own fill, at rest, hovered and pressed. Derived colour pairs whose foreground is text floor at 4.5 rather than 4.
Contrast audit, colour-scheme previews excluded
before after AtomOneLight 94 0 Afterglow 98 0
Details
- A badge fill too close to the page gets a one-pixel inset edge at 3:1, and an alert is a 14% tint of its colour with text and border measured against that tint.
- Each accordion group is an outlined card on the page: the header carries the weight and a keyboard focus ring, the body has no fill, and the chevron follows the text colour instead of a compiled blue that measured 1.14:1 on a dark scheme.
- The white stripe was the vertical tab bar's resize splitter, transparent over a body that is transparent on purpose, showing the window's white backing. It now paints the tab bar's own colour.
- Rows in the profile selector are anchors with no link, so they showed a text caret; they show a pointer now.
What this does not claim
- Measured on AtomOneLight and Afterglow, plus the two default schemes for alerts. Another scheme is floored by the same rules, not individually measured.
- Not yet audited: the Claude side panel and hover card, the link hover card and preview pane, the SFTP panel, menus and toasts.
- Plain links outside alerts still use Bootstrap's blue, which falls below AA; no audited page shows one.
- The theme's primary and info colours are the same, so their badges and alerts cannot be told apart.