Skip to content

fix(a11y): meet 4.5:1 contrast for text-subtle and text-warning (WCAG 1.4.3)#3437

Merged
bilal-karim merged 1 commit into
mainfrom
a11y/1.4.3-contrast-tokens
May 22, 2026
Merged

fix(a11y): meet 4.5:1 contrast for text-subtle and text-warning (WCAG 1.4.3)#3437
bilal-karim merged 1 commit into
mainfrom
a11y/1.4.3-contrast-tokens

Conversation

@bilal-karim
Copy link
Copy Markdown
Member

@bilal-karim bilal-karim commented May 22, 2026

Summary

Two token-value adjustments for SC 1.4.3 Contrast (Minimum) at the theme-variables layer. Both consumers pick up the fix automatically — no per-call-site changes.

  • text-subtle dark mode: slate.700slate.400. Previous ratio ~3.4:1 on black (FAIL); new ~9.4:1. Affects user-menu small text and CodeMirror comment syntax.
  • text-warning light mode: yellow.600yellow.700. Previous ratio ~3.2:1 on white (FAIL); new ~4.7:1. Affects character-count warning state on Input, Textarea, ChipInput.

Audit context

  • WCAG 2.2 SC 1.4.3 Contrast (Minimum) (Level AA) — Serious severity each.
  • Issue files: `audit-output/issues/1.4.3-{text-subtle-token,text-warning-token}.md`.
  • Both are conditional-on-verification per audit — please measure with DevTools eyedropper to confirm the math.

Test plan

  • Light mode: focus a maxLength field (Schedule form description, etc.); type until "X / Y" counter shows ≤5 remaining → text turns yellow. Inspect color in DevTools, confirm ≥ 4.5:1 against white.
  • Dark mode: open user menu (top-right) and observe subtle/secondary text. Inspect color, confirm ≥ 4.5:1 against black. Also check CodeMirror comment syntax in any JSON viewer.
  • axe-core color-contrast rule should no longer flag these surfaces.

🤖 Generated with Claude Code

… 1.4.3)

Two token-value adjustments for SC 1.4.3 Contrast (Minimum). Token
math against Tailwind v3 defaults predicts hard failures:

- text-subtle on black (dark mode): slate.700 -> slate.400.
  Previous ~3.4:1; new ~9.4:1. Affects user-menu small text and
  CodeMirror comment syntax.
- text-warning on white (light mode): yellow.600 -> yellow.700.
  Previous ~3.2:1; new ~4.7:1. Affects character-count warning
  state on Input, Textarea, and ChipInput primitives.

Both changes are token-level so every consumer picks them up
automatically; no consumer migration needed.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@bilal-karim bilal-karim requested a review from a team as a code owner May 22, 2026 13:28
@vercel
Copy link
Copy Markdown

vercel Bot commented May 22, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
holocene Ready Ready Preview, Comment May 22, 2026 1:29pm

Request Review

@temporal-cicd
Copy link
Copy Markdown
Contributor

temporal-cicd Bot commented May 22, 2026

Warnings
⚠️

📊 Strict Mode: 3 errors in 1 file (0.3% of 914 total)

src/lib/theme/variables.ts (3)
  • L223:16: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ readonly '--color-text-black': { readonly light: "space-black"; readonly dark: "space-black"; }; readonly '--color-text-white': { readonly light: "off-white"; readonly dark: "off-white"; }; ... 49 more ...; readonly '--color-border-focus-danger': { ...; }; }'.
  • L224:2: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Record<--${string}, ${number} ${number} ${number}>'.
  • L225:2: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Record<--${string}, ${number} ${number} ${number}>'.

Generated by 🚫 dangerJS against 0e247c0

@bilal-karim bilal-karim merged commit ce928ed into main May 22, 2026
18 checks passed
@bilal-karim bilal-karim deleted the a11y/1.4.3-contrast-tokens branch May 22, 2026 13:54
rossedfort added a commit that referenced this pull request Jun 4, 2026
Auto-generated version bump from 2.50.0 to 2.51.0

Bump type: minor

Changes included:
- [`495e27f7`](495e27f) Use pageSize instead of maximumPageSize (#3422)
- [`42c58c45`](42c58c4) fix: use rem-based width for expanded side-nav (#3426)
- [`ce928ed5`](ce928ed) fix(a11y): meet 4.5:1 contrast for text-subtle and text-warning (WCAG 1.4.3) (#3437)
- [`e8ed8a49`](e8ed8a4) fix(a11y): consistent high-contrast focus rings across all Button variants (WCAG 1.4.11) (#3438)
- [`03918fb5`](03918fb) fix(a11y): prevent horizontal scroll on login page at 320px (WCAG 1.4.10) (#3440)
- [`a11555fb`](a11555f) fix(a11y): use rem-based font-size and unitless line-height in markdown reset (#3430)
- [`057ff323`](057ff32) fix: use empty alt on decorative SDK logo image (#3424)
- [`e435ffd7`](e435ffd) Standalone Activity details page UI updates (#3427)
- [`e09028f3`](e09028f) Make bottom-nav accept linksSnippet instead of sections (#3445)
- [`a22a1e21`](a22a1e2) Add tooltip for SDK version (#3462)
- [`c3b7820e`](c3b7820) [DT-4039] Workflow query builder doesn't work with numeric search attributes (#3435)
- [`5e53881f`](5e53881) Make Common Errors dismissable (#3471)
- [`2665e2f1`](2665e2f) [DT-4048] Add accessibility PR triage and notification helpers (#3465)
- [`8083cf4e`](8083cf4) feat(DT-4017): Schedules List UI Update (#3467)
- [`b5de30e3`](b5de30e) fix(markdown): allow nested lists to render as block (DT-4047) (#3463)
- [`8a6fd2de`](8a6fd2d) Add a prop to hide select/deselect controls (#3474)
- [`33ec1b3e`](33ec1b3) DT-4051: pre-populate input when starting standalone activity like this one (#3469)
- [`0d64fc20`](0d64fc2) fix(a11y): reveal Copyable's CopyButton on focus-within (WCAG 2.1.1) (#3452)
- [`321651c0`](321651c) fix: accept autocomplete prop on NumberInput, ChipInput, and Combobox (#3425)
- [`6567c222`](6567c22) fix: cap ZoomSvg container height to viewport (#3428)
- [`afd3a8ed`](afd3a8e) fix(a11y): accommodate text-spacing overrides on Badge and Chip (WCAG 1.4.12) (#3433)
- [`d264b876`](d264b87) fix(a11y): non-color signal for Label required indicator (WCAG 1.4.1) (#3439)
- [`73c61ea3`](73c61ea) fix(a11y): tabindex on <main> so the skip link moves focus reliably (WCAG 2.4.1) (#3451)
- [`34e582a8`](34e582a) fix(a11y): info-and-relationships compliance (WCAG 1.3.1) (#3432)
- [`f7be7b6c`](f7be7b6) fix(query): quote ExecutionDuration Go duration strings in visibility SQL (#3482)
- [`9f0c2631`](9f0c263) Passthrough goto params to link component (#3483)
- [`2f8c037b`](2f8c037) feat: add centerButton, menuButton, and linksContent snippets to BottomNavigation (#3485)
- [`7f258bac`](7f258ba) fix: add "for" to validate connection modal title (#3488)
- [`350397ab`](350397a) feat(DT-4069): Update modal backdrop to 50% opaque (#3486)
- [`f01baa49`](f01baa4) refactor: Input & DatePicker - Svelte 5 & afterLabel snippet (#3479)
- [`587c892f`](587c892) Fix decoded object payload summaries (#3491)
- [`2b85ef06`](2b85ef0) fix(DT-4044): only use browser codec endpoint when override option is selected (#3490)
- [`468893ba`](468893b) fix(a11y): improve 1.1.1 non-text content compliance (#3431)
- [`3e8c996d`](3e8c996) fix(a11y): make Tooltip keyboard-accessible, dismissible, and hoverable (#3429)
- [`47552538`](4755253) fix(a11y): name-role-value compliance, partial (WCAG 4.1.2) (#3434)
- [`e2c95d54`](e2c95d5) fix(a11y): align DOM order with visual order in mobile bottom-nav (WCAG 1.3.2) (#3441)
- [`634b08e1`](634b08e) a11y(1.4.11): focus rings — lighten dark-mode --color-border-focus-info to indigo.400 so ring-primary/70 meets 3:1 against surface-primary (#3478)
- [`039a555a`](039a555) a11y(1.4.11): Checkbox — add ring-offset so the checked-state focus ring contrasts against the indigo checked background (#3477)
- [`01161e2e`](01161e2) a11y(1.4.10): activity-options drawer — make width responsive so it reflows at 320 px (#3476)
- [`99f0a0a4`](99f0a0a) fix(a11y): filter hidden nav items in mobile bottom-nav (WCAG 4.1.2) (#3494)
- [`d12ebacc`](d12ebac) fix(a11y): add focusin/focusout to saved-query nav hover tooltip (WCAG 2.1.1) (#3453)
- [`c7206af9`](c7206af) fix(a11y): render a warning icon for Chip warning intent (WCAG 1.4.1) (#3450)
- [`b64ed713`](b64ed71) fix(a11y): pair Toast variant background with a severity icon (WCAG 1.4.1) (#3449)
- [`8e2ef708`](8e2ef70) upgrade temporal api version to latest (v1.62.13) (#3502)

Co-authored-by: rossedfort <11775628+rossedfort@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants