Semantic Color Palette Text Colors Always Default to White - Creates Poor Contrast in High Contrast Theme #40
Description
Description
The Palette class in MudBlazor generates CSS custom properties for semantic color text colors (--mud-palette-success-text, --mud-palette-warning-text, --mud-palette-error-text, --mud-palette-info-text) that are hardcoded to white, regardless of the background color's luminance.
This creates severe accessibility and usability issues, especially in High Contrast dark mode where backgrounds are intentionally bright for visibility:
High Contrast Dark Mode Example:
- Success:
#00DD00(bright green) + white text = unreadable (~1:1 contrast) - Warning:
#FFB700(bright orange) + white text = unreadable (~1:1 contrast) - Error:
#FF4444(bright red) + white text = unreadable (~1:1 contrast) - Info:
#00DDFF(bright cyan) + white text = unreadable (~1:1 contrast)
Impact
- Violates WCAG contrast requirements in accessible themes
- Breaks readability in intentionally high-contrast color schemes
- Forces applications to implement workarounds at application level instead of theme level
Expected Behavior
Semantic color text colors should be selected based on the luminance of their background colors to ensure adequate contrast ratio (per WCAG standards).
Suggested Fix
Option 1: Add text color properties to Palette class
Color SuccessTextColor WarningTextColor ErrorTextColor InfoText
Option 2: Automatically compute text colors from background luminance using WCAG formula when text color properties are not explicitly set.
Workaround
Currently requires CSS custom property overrides at application level:
style="--mud-palette-success-text: (luminance > 0.5 ? dark_gray : light_gray); ..."Affected Version
- MudBlazor 9.2.0
Affected Components
- MudChip with Color.Success/Warning/Error/Info
- MudAlert with Severity enum
- Any component using semantic colors from Palette