Amber vs Yellow for Warning States
Compare amber and yellow for warning banners, alerts, and cautionary UI elements.
Amber
#f59e0b
Golden orange, readable
Yellow
#eab308
Pure yellow, bright
Side-by-Side Comparison
| Aspect | Amber | Yellow |
|---|---|---|
| Readability | Good contrast as background | Poor contrast on white |
| Severity perception | Moderate warning, take note | Mild caution, informational |
| Accessibility | Passes WCAG for large text | Fails most contrast checks |
| Use case | API deprecation, storage limits | New feature highlight, tip banners |
| Best For | Warning banners, deprecation notices | Highlights, attention markers |
Our Recommendation
Amber for accessible warning states. Yellow only for decorative highlights with managed contrast.
Tailwind Classes
Amber
Background: bg-amber-500
Text: text-amber-500
Border: border-amber-500
Yellow
Background: bg-yellow-500
Text: text-yellow-500
Border: border-yellow-500
#warning#amber#yellow#status#comparison