Should KPI Cards on a Dashboard Be Color-Coded? How to Make the Numbers Easier to Read

When a dashboard contains four key numbers, it can be tempting to fill the KPI cards with four different colors. Yet a brightly colored card for every metric may draw more attention to its background than to the number. It can also leave people guessing whether the color identifies the metric or means that a target has been missed. Using a fictional customer-support dashboard, this article explains why a shared neutral card style and small, clearly labeled target-status badges can work better.

Give KPI cards a consistent structure instead of a different color each

KPI stands for Key Performance Indicator, a measure used to monitor progress toward a goal. Each KPI card should display what was measured, the value and its unit, the reporting period, and the target. Our example has four metrics: 28 unresolved requests, an average first response time of 18 minutes, a 92% on-time completion rate, and a satisfaction score of 4.6 out of 5. These units represent counts, durations, percentages, and ratings; the size of one number cannot be meaningfully compared with the size of another.

Define the reporting period next to each metric. Here, 28 unresolved requests is the number still open at the end of the month. The average first response time measures how long it took to provide an initial reply during that month. The on-time completion rate is the share of cases completed within their deadline among cases completed that month. The satisfaction score is the average of the five-point survey ratings received that month. A snapshot and a period-wide calculation should not be mistaken for the same kind of measurement.

WCAG 2.2 (Web Content Accessibility Guidelines, international guidelines for accessible web content) requires that color not be the sole visual means of conveying information. If a KPI misses its target, do not communicate that solely by turning the entire card red. Add an explicit label such as “Needs review” and an explanation like “8 above target.”

Use white cards and two restrained target-status colors

Give the dashboard a pale blue-gray page background ■#F4F6FA and set every KPI card to white ■#FFFFFF, with important numbers and labels in dark blue-gray ■#243247. The text has approximately 12.95:1 contrast against white. Supporting information such as units or reporting periods can use slate ■#526174 and still achieve about 6.32:1 on white ■#FFFFFF. Much paler gray ■#A6B1BF has only about 2.17:1 contrast with white ■#FFFFFF, so it should not be used for small but meaningful descriptions.

Put the assessment in a compact badge underneath the number rather than coloring the entire card. For a Needs review badge, combine pale amber ■#FFF1D6 with dark-brown text ■#805400, giving approximately 5.90:1 contrast. For On target, combine pale mint ■#E4F2F0 with deep-teal text ■#165E50 for approximately 6.64:1. Both combinations exceed the 4.5:1 threshold generally required for normal-sized text under WCAG 2.2 Level AA. When the data is not available, use a separate written label such as “Unable to assess” instead of guessing which color applies.

The following values are fictional. For the on-time completion rate, 92% means that 92 of 100 completed cases met their deadlines during the month. Compared with a target of 95%, the shortfall is 3 percentage points, not a 3% relative decrease. The desired direction also differs by KPI: a shorter first response time is preferable under its target, while a higher satisfaction score is preferable under its target.

The background color of a status badge is not enough on its own. Pale amber ■#FFF1D6 differs from white ■#FFFFFF by only about 1.12:1, and pale mint ■#E4F2F0 differs from white ■#FFFFFF by about 1.15:1. Keep the words “Needs review” and “On target,” along with the numerical gap from the target. HEX values are hexadecimal codes used to specify colors on the web.

Check card boundaries, interactive focus, and missing information

White cards ■#FFFFFF differ from the pale page background ■#F4F6FA by only about 1.08:1. Where a visible card boundary is important, a slate outline ■#64748B provides approximately 4.76:1 contrast against white ■#FFFFFF and 4.40:1 against the surrounding page ■#F4F6FA. Consistent spacing and the same order—metric name, actual value, target, then assessment—also make the cards easier to scan.

If a “View Breakdown” button uses deep blue ■#1E40AF with white lettering ■#FFFFFF, its text contrast is approximately 8.72:1, and the button contrasts with the pale page background ■#F4F6FA by about 8.06:1. A violet keyboard focus outline ■#7C3AED provides approximately 5.70:1 contrast against the white card ■#FFFFFF and 5.27:1 against the page background ■#F4F6FA. Under WCAG 2.2, visual indicators necessary to identify controls or their states generally need at least 3:1 contrast against adjacent colors.

Missing data must not silently become zero. If the source cannot provide the unresolved count or on-time completion rate, display “Data unavailable” and defer the assessment instead of showing “0” or “0%.” A satisfaction average based on very few survey responses can also be unstable, so consider showing the number of survey responses next to the score. On smartphones, stack cards rather than squeezing four cards into one row; keep the metric name, number, unit, and assessment close together.

HueRoll lets you select colors with HEX codes and check a selected color against white or black. It cannot compare arbitrary pairs of colors or automatically judge WCAG AA or AAA conformance. The ratios for the card surfaces, status labels, and controls here were calculated separately. Making the meaning of each number and the items needing attention clear is more useful than giving all four cards a different bright color.