From a9dbecea43f2ae035cd60f1d8d8a67fcf62627de Mon Sep 17 00:00:00 2001 From: Ciucur Erol Date: Wed, 27 May 2026 16:27:19 +0300 Subject: [PATCH] fix(a11y): meet WCAG contrast on default button variant MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Lighthouse flagged the Login button in the app bar — white text (#ffffff) on the brand orange (#ff6900, bg-orange-50) yields a contrast ratio of ~2.89:1, failing WCAG AA for both normal text (4.5:1) and large text (3:1). Override the inherited text-white with text-gray-100 (#191919) on the default variant. New contrast: ~6.09:1 on the base bg and ~7.34:1 on the orange-150 hover gradient — comfortably AA, near AAA. The default variant is only used in two places in the codebase (AppBar Login when signed out, AppBar Logout when signed in), so this is a visible but scoped design tweak: brand orange preserved, foreground darkens to keep the CTA legible. Note: the outline and danger variants also fail contrast in their hover states (white text on solid orange-50 / red-50), but Lighthouse does not test hover so those weren't flagged. Worth a follow-up PR. Co-authored-by: Cursor --- app/src/components/ui/button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/src/components/ui/button.tsx b/app/src/components/ui/button.tsx index 4dad338b..eb38ac7d 100644 --- a/app/src/components/ui/button.tsx +++ b/app/src/components/ui/button.tsx @@ -18,7 +18,7 @@ const buttonVariants = cva( variants: { variant: { default: [ - "bg-orange-50", + "bg-orange-50 text-gray-100", "hover:bg-linear-to-br hover:to-orange-150", "active:ridge-t active:scale-98 active:to-orange-50", "disabled:bg-orange-50/20 disabled:text-gray-450",