Fix WCAG AA color contrast violations across all pages
Replace incorrect perceived-brightness formula in Stats progress bars with proper WCAG relative luminance calculation, and convert type bar colors to hex values for reliable contrast detection. Add light: variant classes to status badges, yellow/purple text, and admin nav links across 17 files. Darken light-mode status-active token and text-tertiary/muted tokens. Add aria-labels to admin filter selects and flex-wrap for mobile overflow on AdminEvolutions. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -21,7 +21,9 @@ export function AdminLayout() {
|
||||
to={item.to}
|
||||
className={({ isActive }) =>
|
||||
`block px-3 py-2 rounded-md text-sm font-medium whitespace-nowrap ${
|
||||
isActive ? 'bg-accent-900/40 text-accent-300' : 'hover:bg-surface-2'
|
||||
isActive
|
||||
? 'bg-accent-900/40 text-accent-300 light:bg-accent-100 light:text-accent-700'
|
||||
: 'hover:bg-surface-2'
|
||||
}`
|
||||
}
|
||||
>
|
||||
|
||||
@@ -77,7 +77,7 @@ export function BulkImportModal({
|
||||
)}
|
||||
|
||||
{result && (
|
||||
<div className="p-3 bg-green-900/30 text-green-300 rounded-md text-sm">
|
||||
<div className="p-3 bg-green-900/30 text-green-300 light:bg-green-100 light:text-green-800 rounded-md text-sm">
|
||||
<p>
|
||||
{createdLabel}: {result.created}, {updatedLabel}: {result.updated}
|
||||
</p>
|
||||
|
||||
Reference in New Issue
Block a user