Alerts - Traffic Light System
Traffic light system (Green/Amber/Red) that is universally understood and accessible to all users, including those with colour blindness.
System Status Alerts (WCAG Compliant)
All alerts use icons and text in addition to colour to ensure accessibility for users with colour vision deficiencies.
Success Alert
Your payment was successfully processed. The receipt has been sent to your email.
Use for:
- Completed actions
- Successful operations
- Confirmed states
- Positive feedback
Warning Alert
Your subscription will expire in 3 days. Please renew to avoid interruption of service.
Use for:
- Cautionary states
- Pending actions
- Items requiring attention
- Non-critical issues
Error Alert
Payment failed. Please check your card details and try again.
Use for:
- Error states
- Failed operations
- Destructive action confirmations
- Critical alerts
Info Alert
New features have been added. Check out the changelog to learn more.
Use for:
- Informational messages
- System updates
- Tips and guidance
- Neutral feedback
Contrast Verification
All alert colours meet WCAG AA standards:
- Name
Success Green- Description
#15803D - 5.02:1 contrast ratio on white background
- Name
Warning Orange- Description
#C2410C - 5.18:1 contrast ratio on white background
- Name
Error Red- Description
#DC2626 - 4.83:1 contrast ratio on white background
- Name
Info Blue- Description
#2563EB - 5.17:1 contrast ratio on white background
Accessibility Features
- Icons: Every alert includes an icon to convey meaning beyond colour
- Text labels: Clear "Success", "Warning", "Error", or "Info" labels
- Semantic HTML: Proper ARIA roles and attributes
- Keyboard accessible: All interactive alerts can be dismissed with keyboard
- Screen reader friendly: Meaningful text alternatives for all visual elements