From 364ac8fa0ed6708aa80ba0b71f2fafc88d30b804 Mon Sep 17 00:00:00 2001 From: Jamey Greenwood Date: Sun, 25 Jan 2026 00:33:52 +0000 Subject: [PATCH] fix: improve accent color contrast for WCAG AA compliance Add WCAG AA compliant accent color variants and update default accent to meet 4.5:1 contrast ratio requirements. - Add --t-accent-text (darker for text on light backgrounds) - Add --t-accent-button (darker for button backgrounds with white text) - Change default accent from #3b82f6 to #2563eb (better contrast) - Update presets and tests for new default These changes ensure accent colors meet accessibility standards while maintaining visual consistency with the brand palette. Co-Authored-By: Claude Opus 4.5 --- assets/css/theme-semantic.css | 6 ++++++ lib/simpleshop_theme/theme/presets.ex | 2 +- test/simpleshop_theme/settings_test.exs | 2 +- test/simpleshop_theme/theme/presets_test.exs | 2 +- 4 files changed, 9 insertions(+), 3 deletions(-) diff --git a/assets/css/theme-semantic.css b/assets/css/theme-semantic.css index 69f0e1b..2082165 100644 --- a/assets/css/theme-semantic.css +++ b/assets/css/theme-semantic.css @@ -23,6 +23,12 @@ --t-accent-subtle: hsl(var(--t-accent-h) 40% 95%); --t-accent-ring: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l) / 0.4); + /* WCAG AA compliant accent variants for better contrast */ + /* Darker accent for text on light backgrounds (4.5:1 with white) */ + --t-accent-text: hsl(var(--t-accent-h) var(--t-accent-s) 38%); + /* Darker accent for button backgrounds to ensure 4.5:1 with white text */ + --t-accent-button: hsl(var(--t-accent-h) var(--t-accent-s) 42%); + /* Secondary colors */ --t-secondary-accent: #ea580c; --t-sale-color: #dc2626; diff --git a/lib/simpleshop_theme/theme/presets.ex b/lib/simpleshop_theme/theme/presets.ex index e8e77bf..ede3a02 100644 --- a/lib/simpleshop_theme/theme/presets.ex +++ b/lib/simpleshop_theme/theme/presets.ex @@ -23,7 +23,7 @@ defmodule SimpleshopTheme.Theme.Presets do density: "balanced", grid_columns: "4", header_layout: "standard", - accent_color: "#3b82f6", + accent_color: "#2563eb", layout_width: "wide", card_shadow: "sm", announcement_bar: true diff --git a/test/simpleshop_theme/settings_test.exs b/test/simpleshop_theme/settings_test.exs index 98a8efe..9dc562c 100644 --- a/test/simpleshop_theme/settings_test.exs +++ b/test/simpleshop_theme/settings_test.exs @@ -124,7 +124,7 @@ defmodule SimpleshopTheme.SettingsTest do {:ok, settings} = Settings.apply_preset(:studio) assert settings.mood == "neutral" assert settings.typography == "clean" - assert settings.accent_color == "#3b82f6" + assert settings.accent_color == "#2563eb" end test "returns error for invalid preset" do diff --git a/test/simpleshop_theme/theme/presets_test.exs b/test/simpleshop_theme/theme/presets_test.exs index 369d19c..c52eabe 100644 --- a/test/simpleshop_theme/theme/presets_test.exs +++ b/test/simpleshop_theme/theme/presets_test.exs @@ -42,7 +42,7 @@ defmodule SimpleshopTheme.Theme.PresetsTest do assert preset.density == "balanced" assert preset.grid_columns == "4" assert preset.header_layout == "standard" - assert preset.accent_color == "#3b82f6" + assert preset.accent_color == "#2563eb" end test "returns boutique preset" do