eho/atomic-design-poc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(a11y): letter-canvas "added" diff badge contrast (WP-27)

Browse Source 
The green "nieuw" badge used dark text on groen-500 (#39870c) = 3.41:1,
failing WCAG AA 4.5:1 (axe, WithDiff story). Dark text passes on the orange
"changed" badge (4.79:1) but no green passes it. Give the added badge white
text on groen-700 (#176e1b) = 6.4:1; the changed badge is unchanged. The
prior comment's blanket "dark text, not white" was correct for orange but
wrong for green. Full storybook axe gate now green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
eho
2026-07-21 13:55:24 +02:00
co-authored by Claude Opus 4.8
parent 5968ef9030
commit e5edae4970
2 changed files with 734 additions and 732 deletions
Download Patch File Download Diff File Expand all files Collapse all files
documentation.json
+730 -730
View File
File diff suppressed because one or more lines are too long
src/app/brief/ui/letter-canvas/letter-canvas.component.ts
+4 -2
View File
@@ -92,12 +92,14 @@ const A4_HEIGHT_PX = (297 * 96) / 25.4;
padding: 0 1.5mm; padding: 0 1.5mm;
border-radius: var(--rhc-border-radius-sm); border-radius: var(--rhc-border-radius-sm);
font-size: 7.5pt; font-size: 7.5pt;
/* dark text, not white: oranje-500/groen-500 fail 4.5:1 contrast with white (WP-27 axe). */ /* changed = dark text on oranje-500 (4.79:1); white on oranje-500 fails (3.23:1). */
color: var(--rhc-color-foreground-default); color: var(--rhc-color-foreground-default);
background: var(--rhc-color-oranje-500); background: var(--rhc-color-oranje-500);
} }
.diff-badge.added { .diff-badge.added {
background: var(--rhc-color-groen-500); /* added = white on groen-700 (6.4:1); dark text on any green fails 4.5:1 (WP-29 axe). */
color: var(--rhc-color-wit);
background: var(--rhc-color-groen-700);
} }
/* Portal-side chrome around the letter surface (not part of the contract file). */ /* Portal-side chrome around the letter surface (not part of the contract file). */
.surface { .surface {