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 <noreply@anthropic.com>
This commit is contained in:
Jamey Greenwood 2026-01-25 00:33:52 +00:00
parent 2c3d8f5647
commit 364ac8fa0e
4 changed files with 9 additions and 3 deletions

View File

@ -23,6 +23,12 @@
--t-accent-subtle: hsl(var(--t-accent-h) 40% 95%); --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); --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 */ /* Secondary colors */
--t-secondary-accent: #ea580c; --t-secondary-accent: #ea580c;
--t-sale-color: #dc2626; --t-sale-color: #dc2626;

View File

@ -23,7 +23,7 @@ defmodule SimpleshopTheme.Theme.Presets do
density: "balanced", density: "balanced",
grid_columns: "4", grid_columns: "4",
header_layout: "standard", header_layout: "standard",
accent_color: "#3b82f6", accent_color: "#2563eb",
layout_width: "wide", layout_width: "wide",
card_shadow: "sm", card_shadow: "sm",
announcement_bar: true announcement_bar: true

View File

@ -124,7 +124,7 @@ defmodule SimpleshopTheme.SettingsTest do
{:ok, settings} = Settings.apply_preset(:studio) {:ok, settings} = Settings.apply_preset(:studio)
assert settings.mood == "neutral" assert settings.mood == "neutral"
assert settings.typography == "clean" assert settings.typography == "clean"
assert settings.accent_color == "#3b82f6" assert settings.accent_color == "#2563eb"
end end
test "returns error for invalid preset" do test "returns error for invalid preset" do

View File

@ -42,7 +42,7 @@ defmodule SimpleshopTheme.Theme.PresetsTest do
assert preset.density == "balanced" assert preset.density == "balanced"
assert preset.grid_columns == "4" assert preset.grid_columns == "4"
assert preset.header_layout == "standard" assert preset.header_layout == "standard"
assert preset.accent_color == "#3b82f6" assert preset.accent_color == "#2563eb"
end end
test "returns boutique preset" do test "returns boutique preset" do