#345 fix(dash): tune light-mode verdict badge colors for WCAG AA 4.5:1 contrast (#343)

[Anonymous]

Originally created by: devkamani9313-lab

Summary

Darkens light-mode verdict badge text tokens (--pass, --auth, --block, --neutral) in src/doberman/dash/app.py so badge text rendered over 12% tinted background clears the WCAG AA 4.5:1 contrast requirement (WCAG 1.4.3).

Fixes [#343]

Contrast Metrics (Composited on --surface #ffffff)

Token	Old Hex	New Hex	Tint (12%)	Old Contrast	New Contrast	WCAG AA (≥ 4.5:1)
--pass	#1a7f37	#116329	rgba(17, 99, 41, .12)	~4.4:1	4.82:1	✅ PASS
--auth	#9a6700	#7d5200	rgba(125, 82, 0, .12)	~4.1:1	4.71:1	✅ PASS
--block	#cf222e	#a40e26	rgba(164, 14, 38, .12)	~3.9:1	4.85:1	✅ PASS
--neutral	#57606a	#424a53	rgba(66, 74, 83, .12)	~4.3:1	4.75:1	✅ PASS

Changes

• src/doberman/dash/app.py: Retuned 4 light-mode CSS custom properties in _HTML_SHELL light media query.
• tests/unit/test_dash_serve.py: Added test_shell_light_mode_verdict_colors_pass_wcag_aa_contrast to assert tuned hex tokens.

Checklist

• [x] Tested against WCAG AA 4.5:1 threshold
• [x] Retained 12% tint background structure
• [x] Dark-mode styling untouched
• [x] Unit test added

[Anonymous]

Originally posted by: devkamani9313-lab

Hi @fu351 👋

Addressed [#343] by tuning light-mode verdict badge tokens to clear WCAG AA 4.5:1 contrast against 12% tint:

• --pass: #116329 (4.82:1 contrast)
• --auth: #7d5200 (4.71:1 contrast)
• --block: #a40e26 (4.85:1 contrast)
• --neutral: #424a53 (4.75:1 contrast)

Added unit test test_shell_light_mode_verdict_colors_pass_wcag_aa_contrast in tests/unit/test_dash_serve.py.

Ready for review & merge! 🚀

[Anonymous]

Originally posted by: fu351

@devkamani9313-lab, welcome to Doberman, and thank you for closing the last light-mode contrast gap. You changed each verdict foreground together with its matching 12% tint and locked all four tokens in a mutation-sensitive test. I independently recomputed the composited colors, and every badge clears the 4.5:1 requirement.

This is your first merged contribution here. If Doberman feels worth following, a star helps more people find it. You are also very welcome in the Discord: https://discord.gg/Sfy5XGNqty

A good follow-up is [#272] (level-2), the guided UX tour. Your eye for the actual rendered surface is exactly what that issue needs, especially its light-mode dashboard checks. Thank you for jumping in.

[Anonymous]

Ticket changed by: fu351

• status: open --> closed

[Anonymous]

Originally posted by: fu351

@devkamani9313-lab The WCAG-AA badge colors made the dash meaningfully easier to read. Thanks again.

Quick community roll-call: are you in the Doberman Discord? If yes, drop your handle here (or DM me there) so I can match the GitHub side of your work to your Discord name. If not, you're warmly invited: https://discord.gg/Sfy5XGNqty