Change alert color to more appropriately communicate warnings vs watches

[sarahmhgov]

Description

Currently all WWA in the website are red. This has been called out by internal and external users as inconsistent with NWS practices and confusing.

Update

• red: warning
• orange: watch
• yellow: advisory/statement/other and considering all hazard components (hourly table, banners)

Considerations

• For implementation should we also include color updates in hazard on a map implementation?
• do we need to inherit NWS hex colors for this implmentation or can we use USWDS?

Acceptance Criteria

• Users are able to quickly know if a hazard is urgent or non-urgent using visual cues.

Note that the color based definitions are a secondary indicator and do not require an alternate color-blind safe supplement.

[colinmurphy01]

This feels ready for design.

Does this need to be scoped further?

[colinmurphy01]

Product is aligned with moving forward with the simplified solution: red: warning / orange: watch / yellow: advisory/statement/other and considering all hazard components (hourly table, banners).

[shadkeene]

@partly-igor @coreypieper Do we know if this aligns with latest thinking from the hazsimp team? Would be nice to be aligned with them on this. I know several months ago, they said there were many options supported since the survey results were pretty even across the board. Let me know if I can do something on this end to help.

[colinmurphy01]

Updated to also consider updating colors in the hazard on a map component.

[partly-igor]

Updated alert colors documentation

[colinmurphy01]

Can you confirm that next steps are:

1. Share with HazSimp team, no red flags (elbow elbow) then
2. Ready for eng

[partly-igor]

😆 yes that sounds right

[colinmurphy01]

@igorkorenfeld in order to get them approved can you provide links to the examples in context. I think that helps more.

[partly-igor]

Sure thing:

Mobile

Desktop

[colinmurphy01]

@shadkeene @coreypieper do either of you want to send the colors and preview environments over to the HazSimp team for review and objections. It may require some context, so a short meeting may be necessary.

[shadkeene]

Yes @colinmurphy01 @coreypieper , will do that today.

[shadkeene]

AFS supports the 3 color red/yellow/gray as prototype. Waiting to hear from another AFS person (will probably hear next week) but going to close this for now b/c we have communicated/coordinated this with AFS.