National Weather Service United States Department of Commerce

Methodology for Drawing Color Blocks Around Point Forecast Icons

Color blocks will be drawn around the icons for time periods when Watches, Warnings, and Advisories (WWAs) for weather- and/or water-based hazards are in effect.  Yellow will be used to denote a "Watch", orange will be used for "Advisory" and red will be used for "Warning".  The title(s) of the hazard(s) (e.g., "Excessive Heat Warning", "Flash Flood Watch") will be provided at the top of each block. 

These color blocks will be applied as follows:

1)  If a WWA is in effect "NOW" (at the time the user clicks), a new color block will be added as the left-most icon.  In these cases, the right-most icon for 4.5 days in advance will be dropped.  The colored block for "NOW" will completely surround the icon and will provide the WWA title and its ending time.  If more than one WWA is in effect, the phrase "NOW:  Multiple hazards in effect" will appear at the top of the block.   

2)  If a WWA has been issued but is not yet in effect, a color block will be used to depict the start time of the hazard and will be extended to cover the length of time it remains in effect.  This may be as much as the full 4.5 days (or 4 days if a “NOW” box is used).  In cases where multiple hazards have been issued but are not yet in effect (referred to as “beyond NOW”) , the colored blocks will be stacked vertically to allow the titles of all hazards to be displayed.

3)  If WWA(s) are already in effect "NOW" and extend into the future "beyond NOW", the "NOW" block will be used in combination with blocks that extend into the future, as described above.

In all cases, a capability will be added to allow users to access brief text identifying WWA title(s) and duration.  For WWAs in effect "NOW", users may click anywhere in the "NOW" block to access this text.  To access text for WWAs that have been issued “beyond NOW”, users may click on the information icon (indicated by a circled, lower case “i”) provided above the color block(s).

For WWAs “beyond NOW” that are of relatively short duration, the shaded area with the colored block may be too narrow to accommodate the full WWA title.  In these cases, an abbreviated label with ellipses is used.   Details regarding all WWAs and their duration may be accessed by clicking on the “i” symbol provided above the color bocks.

Here are additional details regarding color block width.  For all hazards that extend "beyond NOW", the color block width will generally be determined by the starting and ending time of WWA(s), at 1-hourly resolution. 

For example, if a user accesses the page at 9:00 am and an Excessive Heat Warning begins at 11:00 am (as in Scenario 1 below), the color block will be drawn starting at a point representing 11:00 am or almost half way from the beginning of the "Today" icon, which extends from 6 am to 6 pm. 

The exception to this rule will apply to cases where WWA(s) is/are already in effect.   For example, if a user accesses the page at 1:00 pm and the WWA is in effect “NOW” (as in Scenario 2 below), the "NOW" block will be added and the first block "beyond NOW" will be fully colored.

The following scenarios further explain how the color blocks will be used:


Scenario 1
ONE watch, warning, or advisory starting at a time in the future (i.e. "beyond NOW").
Icon Row/Headline Shading Result
It is now 9:00 am and an "Excessive Heat Warning" goes into effect at 11:00 am today.

The color shading convention for WWAs in effect "beyond NOW" is used.  Icons are shaded for the appropriate time period with the corresponding WWA color (in this case, red for "Warning"). The colored box is labeled at the top with the hazard text.


Scenario 2
ONE watch, warning, or advisory in effect "NOW"
and "beyond NOW".

Icon Row/Headline Shading Result
It is now 1:00 pm and the "Excessive Heat Warning" from Scenario 1 is in effect.


A "NOW" icon is inserted as the left-most icon to depict the "Excessive Heat Warning" already in effect. The last icon on the right is dropped.  The phrase above the icon describes the hazard timing.  In this case, the Warning extends "beyond NOW", and the shading is extended accordingly.


Scenario 3
MULTIPLE watches, warnings, or advisories starting at a time in the future. None of the headlines are in effect "NOW".

Icon Row/Headline Shading Result
The color shading convention for WWAs "beyond NOW" is used.  Icons are shaded for the appropriate time period with the corresponding WWA colors. Note that the colored blocks for WWAs in effect are stacked vertically for overlapping time periods.  The WWA titles are provided at the top of the colored blocks.

 
Scenario 4
MULTIPLE watches, warnings, or advisories in effect "NOW" and "beyond NOW".

Icon Row/Headline Shading Result
A "NOW" icon is inserted as the left-most icon and the last icon on the right is dropped. The "NOW" icon is shaded with the highest priority color, which reflects the most prominent WWA(s) in effect "NOW".  In this case the most prominent WWAs are "Watches" for both severe thunderstorms and flooding. Users will see a phrase above the icon that reads “NOW:  Multiple hazards in effect".  Below the icon text, users are invited to click anywhere within the box, including the "i", for details.

 

Note:  In general, WWAs in effect "NOW" may not be identical to those in effect "beyond NOW" because new WWAs may be issued (or existing ones may expire) during the current 6-hour period.   Accordingly, the number of hazards may change as the user moves from "NOW" to any period to the "beyond NOW".  In the example shown above, where the current 6-hour period is noon to 6:00 pm, a "Severe Thunderstorm Watch" and "Flash Flood Watch" appear in the pop-up for "NOW".  However in the icons for "This Afternoon", "Tonight", and "Wednesday" a "High Wind Warning", which begins at midnight tonight, is also shown.   
 
Scenario 5
MULTIPLE watches, warnings, or advisories in effect "NOW" and "beyond NOW".  In addition, at least one of the WWAs is too narrow (i.e. too short in duration) to display a WWA label.

Icon Row/Headline Shading Result
As in Scenario 4, a "NOW" icon is inserted as the left-most icon and the last icon on the right is dropped. The "NOW" icon is shaded with the highest priority color (i.e., reflecting the most prominent WWA(s) in effect) with a phrase above the icon that reads “NOW:  Multiple hazards in effect".  Below the icon text, users are invited to “Click HERE for Details”.  These details can be displayed by clicking anywhere within the "NOW" box, including on the "i" symbol.

In this case a "Severe Thunderstorm Warning" is also in effect for a short period during "This Afternoon".  However the shading is too narrow to display the "Severe T-storm Warning" label in the "This Afternoon" block.  In these cases, an abbreviated label with ellipses is used.  As with all WWAs displayed for "beyond NOW" hazard details can be displayed by clicking on the "i" symbol.