Colours: white on the dark theme's primary buttons is 2.5:1, and field borders and the 'captured before' tag fall short #23

New issue

Closed

opened 2026-10-01 10:47:18 +00:00 by tiagoagueda · 0 comments

tiagoagueda commented

2026-10-01 10:47:18 +00:00

Owner

Found on 2026-09-29 in a read-only review of postulo-chromium at 7998de372, computing the contrast of every colour pair in src/style.css with the WCAG relative-luminance formula.

The extension follows the system's colour scheme, and in the dark scheme --brand becomes #60a5fa while the primary buttons and the unsent count keep white text: 2.54:1, against the 4.5:1 that SC 1.4.3 asks for 14 px text. These are the main actions of every page. Separately, text fields, selects and the description box are outlined only by --line, at 1.24:1 in light and 1.72:1 in dark against the 3:1 of SC 1.4.11, and the 11 px "captured before" tag is below 4.5:1 in both themes. Postulo promises WCAG 2.2 AA in both themes; the core fixed its own field border in postulo/postulo#274.

Where:
- src/style.css:13-24: the dark scheme sets --brand: #60a5fa, --brand-dark: #3b82f6, --line: #374151, --paper: #111827.
- src/style.css:140-150, button.primary, .button.primary: background: var(--brand), color: #fff; on hover var(--brand-dark). Used by Capture this posting and both Send for review buttons (src/popup.html:22,33,49), Review in Postulo (:57), Send everything not sent (src/captures.html:23) and Save (src/options.html:24).
- src/style.css:352-362, .count (the unsent count beside "Captures in this browser"): background: var(--brand), color: #fff, 11 px.
- src/style.css:99-109, input, select, textarea: border: 1px solid var(--line) with --line #e5e7eb (light) or #374151 (dark), on --paper.
- src/style.css:336-345, .tag (drawn by src/popup.js:274): background: var(--line), color: var(--muted), 11 px.
What happens: measured ratios: white on #60a5fa 2.54:1, on #3b82f6 (hover) 3.68:1; #e5e7eb border on white 1.24:1; #374151 border on #111827 1.72:1; tag text #6b7280 on #e5e7eb 3.90:1 (light) and #9ca3af on #374151 4.06:1 (dark). The light theme's primary buttons (white on #2563eb, 5.17:1) pass.
Why it matters: a person with low vision using a dark system theme reads the label of every main action at 2.5:1, and in either theme the form's fields barely show where to type.
Fix: in the dark scheme give button.primary, .button.primary and .count a dark foreground, for example var(--paper) (#111827 on #60a5fa is 6.98:1), or keep white text on a darker fill of at least 4.5:1 for both the resting and hover states. Give input, select and textarea a border token of its own of at least 3:1 against --paper in both themes; #6b7280 is 4.83:1 on white and 3.67:1 on #111827. Draw the tag's text in --ink, or lighten its background, so it reaches 4.5:1.

Done when

A test in test/ reads the custom properties of both schemes from src/style.css and checks each foreground/background pair used above against 4.5:1 for text and 3:1 for field borders; it fails on today's values.

Found on 2026-09-29 in a read-only review of postulo-chromium at 7998de372, computing the contrast of every colour pair in `src/style.css` with the WCAG relative-luminance formula. The extension follows the system's colour scheme, and in the dark scheme `--brand` becomes `#60a5fa` while the primary buttons and the unsent count keep white text: 2.54:1, against the 4.5:1 that SC 1.4.3 asks for 14 px text. These are the main actions of every page. Separately, text fields, selects and the description box are outlined only by `--line`, at 1.24:1 in light and 1.72:1 in dark against the 3:1 of SC 1.4.11, and the 11 px "captured before" tag is below 4.5:1 in both themes. Postulo promises WCAG 2.2 AA in both themes; the core fixed its own field border in postulo/postulo#274. - **Where:** - `src/style.css:13-24`: the dark scheme sets `--brand: #60a5fa`, `--brand-dark: #3b82f6`, `--line: #374151`, `--paper: #111827`. - `src/style.css:140-150`, `button.primary, .button.primary`: `background: var(--brand)`, `color: #fff`; on hover `var(--brand-dark)`. Used by Capture this posting and both Send for review buttons (`src/popup.html:22,33,49`), Review in Postulo (`:57`), Send everything not sent (`src/captures.html:23`) and Save (`src/options.html:24`). - `src/style.css:352-362`, `.count` (the unsent count beside "Captures in this browser"): `background: var(--brand)`, `color: #fff`, 11 px. - `src/style.css:99-109`, `input, select, textarea`: `border: 1px solid var(--line)` with `--line` `#e5e7eb` (light) or `#374151` (dark), on `--paper`. - `src/style.css:336-345`, `.tag` (drawn by `src/popup.js:274`): `background: var(--line)`, `color: var(--muted)`, 11 px. - **What happens:** measured ratios: white on `#60a5fa` 2.54:1, on `#3b82f6` (hover) 3.68:1; `#e5e7eb` border on white 1.24:1; `#374151` border on `#111827` 1.72:1; tag text `#6b7280` on `#e5e7eb` 3.90:1 (light) and `#9ca3af` on `#374151` 4.06:1 (dark). The light theme's primary buttons (white on `#2563eb`, 5.17:1) pass. - **Why it matters:** a person with low vision using a dark system theme reads the label of every main action at 2.5:1, and in either theme the form's fields barely show where to type. - **Fix:** in the dark scheme give `button.primary`, `.button.primary` and `.count` a dark foreground, for example `var(--paper)` (`#111827` on `#60a5fa` is 6.98:1), or keep white text on a darker fill of at least 4.5:1 for both the resting and hover states. Give `input`, `select` and `textarea` a border token of its own of at least 3:1 against `--paper` in both themes; `#6b7280` is 4.83:1 on white and 3.67:1 on `#111827`. Draw the tag's text in `--ink`, or lighten its background, so it reaches 4.5:1. ## Done when - A test in `test/` reads the custom properties of both schemes from `src/style.css` and checks each foreground/background pair used above against 4.5:1 for text and 3:1 for field borders; it fails on today's values.

tiagoagueda added this to the 0.5.0 milestone

2026-10-01 10:47:18 +00:00

tiagoagueda added the

bug

label

2026-10-01 10:47:18 +00:00

tiagoagueda referenced this issue from a commit

2026-10-04 15:20:38 +00:00

Raise the contrast of primary buttons, field borders and the captured tag

tiagoagueda closed this issue

2026-10-04 15:20:38 +00:00