bug(a11y): section labels and helper text ("optional", "FILE", "MORE DETAILS") fail contrast #93

New Issue

marcel · 2026-03-27T12:19:52+01:00

marcel commented

2026-03-27 12:19:52 +01:00

Severity: High — accessibility failure (WCAG SC 1.4.3)

Card section labels and form helper text use a very light gray that fails contrast requirements on white and near-white backgrounds.

Affected elements:

Element	Location	Issue
`(optional)` subtext	Upload zone, new/edit document	~2.5:1 on white card
`FILE` section heading	Upload card	uppercase gray, ~2.5:1
`MORE DETAILS` accordion label	New/edit document	uppercase gray, ~2.5:1
`WHO & WHEN`, `DESCRIPTION`, `TRANSCRIPTION` section labels	Edit document	uppercase gray, same issue

Note: WCAG allows large text (≥18pt or ≥14pt bold) a lower threshold of 3:1. However these labels are small (≈11–12px uppercase tracking), so the 4.5:1 standard applies.

Fix

Replace the current light gray on these labels with #615B66 (Granite Gray, 5.9:1 on white).

In Tailwind: change text-gray-400 → text-gray-500 (#6B7280, 4.6:1) as the minimum, or add a text-granite token for #615B66.

For (optional) specifically, consider whether the label is even needed — if the entire form is optional-by-default (fields are all optional), a single note at the top of the form ("All fields are optional") is cleaner than repeating (optional) on each section.

Dark mode fix: On dark backgrounds the current gray is adequate (~4.6:1). Apply the fix only in light mode via light:text-gray-500 dark:text-gray-400 or a semantic token.

## Severity: High — accessibility failure (WCAG SC 1.4.3) Card section labels and form helper text use a very light gray that fails contrast requirements on white and near-white backgrounds. **Affected elements:** | Element | Location | Issue | |---|---|---| | `(optional)` subtext | Upload zone, new/edit document | ~2.5:1 on white card | | `FILE` section heading | Upload card | uppercase gray, ~2.5:1 | | `MORE DETAILS` accordion label | New/edit document | uppercase gray, ~2.5:1 | | `WHO & WHEN`, `DESCRIPTION`, `TRANSCRIPTION` section labels | Edit document | uppercase gray, same issue | Note: WCAG allows large text (≥18pt or ≥14pt bold) a lower threshold of 3:1. However these labels are small (≈11–12px uppercase tracking), so the 4.5:1 standard applies. --- ## Fix Replace the current light gray on these labels with `#615B66` (Granite Gray, 5.9:1 on white). In Tailwind: change `text-gray-400` → `text-gray-500` (`#6B7280`, 4.6:1) as the minimum, or add a `text-granite` token for `#615B66`. For `(optional)` specifically, consider whether the label is even needed — if the entire form is optional-by-default (fields are all optional), a single note at the top of the form ("All fields are optional") is cleaner than repeating `(optional)` on each section. **Dark mode fix:** On dark backgrounds the current gray is adequate (~4.6:1). Apply the fix only in light mode via `light:text-gray-500 dark:text-gray-400` or a semantic token.

marcel added the ui label 2026-03-27 12:28:16 +01:00

marcel referenced a pull request that will close this issue

2026-03-27 15:54:47 +01:00

fix(#92): fix ink-2 and ink-3 contrast to meet WCAG AA across all modes #107

marcel referenced this issue from a commit

2026-03-27 15:55:09 +01:00

fix(#93): migrate hardcoded text-gray-400/500 to semantic ink tokens

marcel referenced a pull request that will close this issue

2026-03-27 15:55:56 +01:00

fix(#93): migrate hardcoded text-gray-400/500 to semantic ink tokens in enrich pages #108

marcel closed this issue

2026-03-27 16:05:07 +01:00