Innova-AI/dictia-public
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix(marketing): contraste/lisibilité 'Comment ça marche' — feature card + grid buttons WCAG AA

Browse Source 
Audit complet : 2 incohérences fond/texte critiques sur fond CLAIR `bg-brand-bg`
(#f7f9fc) où des conteneurs `bg-white` à faible opacité rendaient le texte
quasi-invisible.

Fixes :

1. Bottom feature info card (sous le phone) — INVISIBLE
   `bg-white/[0.06] border-white/[0.10]` sur section claire = blanc 6%/10%
   sur near-white = card et bordure invisibles. Texte intérieur `text-white`
   et `text-white/65` aussi invisibles.
   → `bg-brand-navy` SOLIDE + `border-white/10` (extension visuelle naturelle
   du phone shell). Texte blanc maintenant lisible avec contraste WCAG AA.

2. Right panel feature grid 6 boutons — État ACTIF invisible
   Quand actif, fond `${color}14` (8% opacité du color sur section claire)
   = très light tint. Label `rgba(255,255,255,0.95)` sur fond clair tinté
   = quasi-invisible. Idem pour inactif text à 0.65 — bordure subtile.
   → Fond TOUJOURS dark `rgba(8,12,24,0.85-0.95)` (actif/inactif), avec
   différenciation via border + glow + scale + drop-shadow du color brand.
   Label porté à 0.98/0.70 pour AA garanti.

Test adapté : assertion `bg-white/[0.06]` remplacée par
`dictia-feature-card rounded-xl px-4 py-3 relative bg-brand-navy`.

29/29 tests pertinents passent ; 5 échecs pré-existants sur /conformite et
/landing sans rapport avec /fonctionnalites.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Allison
2026-04-29 11:03:37 -04:00
parent 7d3348c3fd
commit 323f0c81c4
3 changed files with 8 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
static/css/marketing.css
View File

@@ -2893,21 +2893,12 @@
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
}
.text-\[6\.5px\] {
font-size: 6.5px;
}
.text-\[6px\] {
font-size: 6px;
}
.text-\[7\.5px\] {
font-size: 7.5px;
}
.text-\[7px\] {
font-size: 7px;
}
.text-\[8\.5px\] {
font-size: 8.5px;
}
.text-\[8px\] {
font-size: 8px;
}