From 35cb488b6d0b0a81e843f5311acd31d1ba917a3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= Date: Thu, 14 May 2026 22:28:19 +0200 Subject: [PATCH] fix(design): lift personal-record badge to WCAG AA contrast MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The PR pill painted `text-dracula-green` (#50fa7b) on a `bg-dracula-green/10` chip background. In dark mode that measured around 2.6:1 — well under the 4.5:1 minimum WCAG 2.1 AA requires for small text. Switch to the semantic `--success` token, which resolves to a darker forest green on the light card (#14720a) and to Dracula's neon green on the dark card, and lift the chip tint from /10 to /15 for a sturdier edge. Both modes now clear AA. --- src/components/insights/personal-record-badge.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/insights/personal-record-badge.tsx b/src/components/insights/personal-record-badge.tsx index 9b0c526c3..0e7b5842f 100644 --- a/src/components/insights/personal-record-badge.tsx +++ b/src/components/insights/personal-record-badge.tsx @@ -110,7 +110,12 @@ export function PersonalRecordBadge({ data-slot="insights-pr-badge" data-metric-type={metricType} className={cn( - "border-dracula-green/40 bg-dracula-green/10 text-dracula-green inline-flex shrink-0 items-center rounded-full border px-1.5 py-0.5 text-[10px] leading-none font-semibold tracking-wide tabular-nums uppercase", + // `--success` resolves to the AA-tuned green per theme: a deep + // forest green on the light card (#14720a) and Dracula's neon + // green on the dark card (#50fa7b). Both clear 4.5:1 against + // their card background — the previous `text-dracula-green` on + // `bg-dracula-green/10` measured ~2.6:1 in dark mode. + "border-success/40 bg-success/15 text-success inline-flex shrink-0 items-center rounded-full border px-1.5 py-0.5 text-[10px] leading-none font-semibold tracking-wide tabular-nums uppercase", className, )} aria-label={t("insights.personalRecord.badge")}