Error and Warning Text on Dark Backgrounds
Ensure error messages, warnings, and status indicators remain accessible on dark backgrounds. Test common red, yellow, and green status colors for WCAG compliance.
Detailed Explanation
Status Colors on Dark Backgrounds
Error messages, warnings, and success indicators typically use red, yellow, and green. These colors behave differently on dark backgrounds compared to light backgrounds, and many common status colors fail contrast requirements in dark mode.
Red / Error Colors
/* On dark background #18181b */
color: #ef4444; /* red-500: 4.52:1 - Passes AA */
color: #f87171; /* red-400: 5.98:1 - Passes AA */
color: #fca5a5; /* red-300: 9.02:1 - Passes AAA */
color: #dc2626; /* red-600: 3.41:1 - FAILS AA normal */
color: #b91c1c; /* red-700: 2.50:1 - FAILS */
Yellow / Warning Colors
/* On dark background #18181b */
color: #facc15; /* yellow-400: 11.59:1 - Passes AAA */
color: #fbbf24; /* amber-400: 10.76:1 - Passes AAA */
color: #eab308; /* yellow-500: 9.33:1 - Passes AAA */
color: #f59e0b; /* amber-500: 8.26:1 - Passes AAA */
color: #ca8a04; /* yellow-600: 5.88:1 - Passes AA */
Green / Success Colors
/* On dark background #18181b */
color: #22c55e; /* green-500: 6.83:1 - Passes AA */
color: #4ade80; /* green-400: 9.05:1 - Passes AAA */
color: #86efac; /* green-300: 12.44:1 - Passes AAA */
color: #16a34a; /* green-600: 4.45:1 - FAILS AA normal */
color: #15803d; /* green-700: 3.18:1 - FAILS */
Key Insight
On dark backgrounds, lighter shades (300-400) of status colors tend to pass while darker shades (600-700) fail. This is the opposite of light mode, where darker shades work better. Your dark mode theme should map status colors to lighter variants.
Recommended Pattern
/* Status colors - light mode */
.error { color: #dc2626; } /* red-600: 4.63:1 vs white */
.warning { color: #ca8a04; } /* yellow-600: 4.58:1 vs white */
.success { color: #16a34a; } /* green-600: 4.52:1 vs white */
/* Status colors - dark mode */
.error { color: #f87171; } /* red-400: 5.98:1 vs #18181b */
.warning { color: #fbbf24; } /* amber-400: 10.76:1 vs #18181b */
.success { color: #4ade80; } /* green-400: 9.05:1 vs #18181b */
Use Case
Apply these recommendations when implementing form validation messages, toast notifications, status badges, and alert banners in dark mode interfaces. Ensure each status color variant passes the appropriate WCAG threshold.