How to Show Upward and Downward Trends in Web Design Without Relying Only on Red and Green

Some dashboards show increasing figures in green and decreasing ones in red. That shortcut can be difficult for people who cannot distinguish the colors, and it can confuse the direction of a change with whether the change is desirable. An increase in support requests does not mean the same thing as a decrease in response time. Using a fictional support dashboard with weekly comparisons, this article explains how blue, amber, and gray labels can work together with arrows, words, and actual values.

Describe upward and downward movement separately from good or bad outcomes

A trend is the direction in which a measured value changes over time. “Increased,” “Decreased,” and “No change” describe movement; “Good,” “Bad,” and “Needs attention” are assessments that require context. More support requests might mean a service is attracting more customers, or they might reflect a growing problem. A shorter response time may be desirable, but the quality of the responses also matters.

Show labels such as “↑ Increased,” “↓ Decreased,” and “→ No change” along with figures from both comparison periods. WCAG 2.2 (Web Content Accessibility Guidelines, international guidelines for accessible web content) includes a Use of Color requirement: color cannot be the sole visual means of communicating information. Written direction labels and distinct arrow shapes let people follow the changes without having to distinguish red from green.

Contrast needs its own check. The contrast ratio measures the difference in relative luminance between foreground and background colors. Under WCAG 2.2 Level AA, normal-sized text generally requires at least 4.5:1 contrast, or 3:1 for qualifying large text. Essential graphical marks, icons, and indicators identifying interface controls or states generally need at least 3:1 contrast against adjacent colors. The criteria for text and meaningful graphics should be evaluated separately.

Three restrained color labels for increases, decreases, and unchanged figures

Use white ■#FFFFFF for the dashboard cards and dark gray ■#1F2937 for headings and primary figures. This pair gives approximately 14.68:1 contrast. The same dark text ■#1F2937 against a light blue-gray page background ■#F8FAFC provides about 14.03:1. Supporting figures in medium slate ■#475569 still have approximately 7.58:1 contrast against white ■#FFFFFF.

• Increase: Put “↑ Increased 20%” on a pale-blue badge ■#DBEAFE with deep-blue text ■#1E40AF. Text contrast is approximately 7.15:1.
• Decrease: Put “↓ Decreased 20%” on a pale-amber badge ■#FEF3C7 with dark-brown text ■#92400E. Text contrast is approximately 6.37:1.
• No change: Put “→ No change” on a light-gray badge ■#F1F5F9 with slate-colored text ■#475569. Text contrast is approximately 6.92:1.

All three text-background pairs exceed the 4.5:1 minimum for normal-sized text. However, pale blue ■#DBEAFE against white ■#FFFFFF differs by only about 1.22:1, pale amber ■#FEF3C7 against white ■#FFFFFF by about 1.11:1, and light gray ■#F1F5F9 against white ■#FFFFFF by about 1.10:1. Their surfaces alone do not clearly communicate the states. Keep the arrows, written labels, and values visible. The HEX values accompanying the colors are hexadecimal color codes used on the web.

The table below contains fictional weekly support statistics. Moving from 120 to 144 support requests is an increase of 24 requests, or 20% relative to the previous week. Moving from 30 to 24 minutes for the average first response is a decrease of six minutes, or 20%. A resolution rate that stays at 80% is unchanged by 0 percentage points—not a percentage-point increase or decrease.

Check line charts, interaction states, and values without a valid baseline

If the dashboard includes line charts, give an upward series a blue solid line ■#1D4ED8 and upward-pointing triangular markers, while a downward series can use a brown dashed line ■#92400E and downward-pointing triangular markers. Against the white chart background ■#FFFFFF, their contrast ratios are approximately 6.70:1 and 7.09:1, respectively. However, blue ■#1D4ED8 and brown ■#92400E have only about 1.06:1 contrast against each other. At intersections, the different line patterns and marker orientations become important. Display the series name and actual values next to the graphic too.

When the previous week’s count is zero and the current week’s count is 12, the absolute increase is 12, but a percentage increase relative to the previous week cannot be calculated: the formula would require division by zero. Display “↑ 12 more (percentage increase not calculable)” instead of inventing “100% higher.” Likewise, if data from the comparison period is unavailable, show “No comparison data” rather than pretending its value was zero. Keep any assessment of whether the trend is desirable separate, supported by targets or an explanation of the cause.

Interactive charts and filters must not indicate a selected series or current keyboard position only through a color change. A dark-teal focus outline ■#0F766E has approximately 5.47:1 contrast against white ■#FFFFFF and 5.23:1 against the pale page background ■#F8FAFC. A slate border ■#64748B for a card, when needed, has approximately 4.76:1 contrast against white ■#FFFFFF. On a smartphone, retain the arrow, written direction, reporting periods, and numerical comparison even when the layout becomes narrow.

HueRoll lets you select a color by entering its HEX code and check its contrast with white or black. It cannot compare arbitrary pairs of custom colors or automatically determine WCAG AA or AAA compliance. The text, background, and line combinations in this example were calculated separately. The goal is not simply to avoid red and green; it is to communicate both the direction of change and its meaning when color is unavailable.