# Semantic status color > State has to be readable before the number is. - Canonical: https://patterns.konigi.com/dashboards/semantic-status-color - Group: Color - Level: context - Status: published - Updated: September 10, 2026 - Also called: good/warn/critical, severity scale, RAG --- ## Problem Someone scanning a page needs to know which of forty things needs them, and they need it before they have read a single label or number. ## Solution A small closed set of colours where each one means a state and nothing else. Three or four values, defined once, applied everywhere, and never used decoratively. The closed set is the whole pattern. The moment green also means "our brand" or "series 3", the colour stops being a signal and becomes a coincidence the viewer has to disambiguate. Every dashboard that has lost this has lost it gradually, one reasonable exception at a time. Two constraints have to be designed in rather than discovered. **Colour cannot be the only carrier.** WCAG is explicit that colour must not be the sole means of conveying information, and roughly one in twelve men cannot separate the red and green a status palette leans on hardest. The fix is not to abandon the palette but to pair it: an icon, a shape, a word, a position. A red dot and a green dot that differ only in hue are a coin flip for a meaningful slice of any audience. **The colours must survive their background.** WCAG 2.2 sets a contrast floor for non-text elements like status indicators. A palette designed on a white page and then shipped on a dark dashboard usually fails, because the mid-tone amber that read as warning on paper vanishes on charcoal. A status palette needs a light and dark variant of every value, tested in both. The third thing, which is not a design problem but kills more implementations than either: the thresholds behind the colour. A colour is a claim that a rule fired. If the rule is stale, the page is confidently wrong in the most trusted visual channel it has. ## Use when Anywhere a viewer must triage rather than read. Status columns, tiles, maps, timelines, alert lists. ## Don't use when The quantity is continuous and the magnitude matters. Reducing latency to amber loses the difference between 210ms and 900ms. Use colour for state and let a number or a bar carry the amount. ## Trade-offs Status palettes create a binary reading of continuous data, so values either side of a threshold look categorically different when they are nearly identical. They travel badly: the same green means "healthy" in one product and "completed" in another, and teams using both build a small daily confusion. Cultural conventions differ, notably red for up in some financial markets. And a colour that appears constantly stops being read at all, which is how a page ends up with a permanently amber tile nobody has looked at in a year. ## Checklist - How many states, and is the set closed and written down? - Does any of these colours also appear decoratively or as a series colour on the same page? - Is there a non-colour signal for every state—icon, shape, label, position? - Do the colours meet contrast requirements against both light and dark backgrounds? - Has the palette been checked against the common colour vision deficiencies? - Does saturation or weight distinguish severity, or are warning and critical equally loud? - Where are the thresholds defined, and who can change them? - What does "unknown" or "no data" look like, and is it distinct from healthy? - Does the same colour mean the same thing across every page in this product? - Is anything permanently coloured, and has anyone noticed? ## Compare **Grafana** attaches colour to thresholds as a field property, so status colour is derived from a rule rather than set by hand, and the same thresholds drive the stat panel, the gauge, the table cell and the state timeline. That consistency is the strongest argument for defining status colour at the data layer rather than the panel layer. **Sentry** encodes severity levels on the event rather than on the display, so colour follows the data into lists, alerts and digests. **Datadog** ties colour to monitor state, meaning what you see is what would page someone, which keeps the page and the alerting honest with each other. **Public status pages** typically run three states and always pair colour with a word, because their audience is unknown and cannot be assumed to share any convention. ## Related Grayscale with alerts is the discipline that decides how much of the page these colours are allowed to occupy. Threshold line is where the rule behind the colour is usually drawn. Status history is this palette applied along a time axis. Red/green direction coloring covers the finance-specific version and its accessibility problem. Header KPI strip is where a wrong status colour does the most damage. ## Examples ### Ignition (Inductive Automation) A public SCADA demo running live simulated plant data, with a runtime toggle between simple and photorealistic pump and pipe rendering—the ISA-101 argument as a setting. **Water Treatment / Overview** — captured September 11, 2026, Ignition Perspective public demo, Water Treatment (signed out). operational, dense density, dark theme, desktop-web. A real process mimic with live simulated plant data, and it settles two arguments from the entry. The first: the layout is topologically faithful and geometrically loose. Raw water pumps at the left, flash mixers, seven basins, nine filters, tanks, high service pumps, clearwell—the flow reads left to right because that is the process order, not because that is where the equipment stands. The second is where it departs from ISA-101, and the departure is deliberate. Green here means running. Every basin, every flocculator, every filter that is working is green, so most of the screen is coloured and the two stopped filters are the grey ones. That inverts the high-performance HMI rule—colour reserved for abnormal—and spends the budget on the ninety percent case. It is still readable, because the abnormal state is the absence of a colour everything else has, but it only works while "stopped" is rare. The pipe colours are a third channel again, encoding which fluid is in them rather than any state at all. Hotspots in this capture: - [Process mimic](https://patterns.konigi.com/dashboards/process-mimic) — Flat two-dimensional shapes, values placed where the instrument is, and the flow ordered by process rather than by geography. - [Grayscale with alerts](https://patterns.konigi.com/dashboards/grayscale-with-alerts) — Green for running, on every unit. The opposite of grey-at-rest, and it works only while stopped is the rare case. - [Dense small-multiple layout](https://patterns.konigi.com/dashboards/dense-small-multiple-layout) — Nine filters, identical four-value panels. Reading one teaches you all nine, and the two stopped ones are found by shape. - [Semantic status color](https://patterns.konigi.com/dashboards/semantic-status-color) *(this pattern)* — Stopped is grey and says Stopped. Colour and word together, so the state survives a monochrome screen. - [Gauge and dial](https://patterns.konigi.com/dashboards/gauge) — Tank level as a filled vertical scale—a bounded range where the endpoints are the physical tank, which is the case the gauge survives. - [Process mimic](https://patterns.konigi.com/dashboards/process-mimic) — Pump and pipe appearance switchable between simple and photorealistic. The whole ISA-101 argument, shipped as a setting. ### Grafana (Grafana Labs) The reference implementation for panel grids, template variables, and stat panels; most other tools are defined by how they differ from it. **Examples / Alert List** — captured September 10, 2026, Grafana Play (signed out; no version string exposed). operational, medium density, dark theme, desktop-web. Seven alerts, and the durations are the story. "Browser market share > 50%" has been firing for 17 days, 15 hours and 12 minutes. Two more have been firing for over three days. An alert that has been true for two and a half weeks is not telling anyone anything—it has become part of the background, and the list it sits in is now a list you scroll past. The other thing worth reading is the names. Six alerts, six conventions: a full sentence, a metric identifier in snake case, a camel-case service name, a two-word phrase, and two that just say "Dynamic". Somebody arriving at this list at three in the morning cannot tell from the names what is broken or how badly, which is work the naming could have done for free. Hotspots in this capture: - [Alert rule attached to panel](https://patterns.konigi.com/dashboards/alert-rule) — Seven rules in six naming conventions. Nothing in the list conveys severity or subject. - [Alert rule attached to panel](https://patterns.konigi.com/dashboards/alert-rule) — Firing for 17 days. Still actionable, in principle; nobody has acted for two and a half weeks. - [Semantic status color](https://patterns.konigi.com/dashboards/semantic-status-color) *(this pattern)* — Pending rather than firing: the threshold is met and the duration isn't. Two states, both named. - [Filter bar](https://patterns.konigi.com/dashboards/filter-bar) — "1 instance, 24 hidden by filters"—the list saying what it is not showing you. - [Drill-down](https://patterns.konigi.com/dashboards/drill-down) — The route from an alert back to the rule that defined it, on every row. **Where The Cool Dashboards Live / Chicago L Trains** — captured September 10, 2026, Grafana Play (signed out; no version string exposed). wallboard, sparse density, dark theme, wall. A live departures board for one platform, built out of stat panels against the CTA Train Tracker API, and it is the clearest wallboard in the gallery: four rows, type large enough to read across a concourse, no chrome inside the board and nothing to hover. The next train gets three times the height of the three behind it, which is the layout saying "start here" without a word of copy. The interesting problem is the colour. Pink, Green and Orange are the CTA's own line colours, inherited from the world outside the screen and already known to every rider—which is the best possible reason to use a palette. But the status chip beside them is also green when a train is on time, so on the second row "Cottage Grove" is green because it is the Green Line and "On Time" is green because it is on time, side by side, meaning two unrelated things. Hotspots in this capture: - [Wallboard mode](https://patterns.konigi.com/dashboards/wallboard-mode) — The next train, three times the height of the rest. Readable at ten feet with no pointer. - [Panel grid](https://patterns.konigi.com/dashboards/panel-grid) — Rows two to four at a third the size. Panel size is carrying the priority. - [Semantic status color](https://patterns.konigi.com/dashboards/semantic-status-color) *(this pattern)* — Green for on time, next to green for the Green Line. One hue, two unrelated jobs, one row. - [Freshness indicator](https://patterns.konigi.com/dashboards/freshness-indicator) — A countdown rather than a clock time, which is the right call and hides how old the feed is. - [Data table](https://patterns.konigi.com/dashboards/data-table) — The raw feed under the board, including the rgb string each line colour came from. **Examples / Gauge** — captured September 10, 2026, Grafana Play (signed out; no version string exposed). analytical, medium density, dark theme, desktop-web. Nine gauges, and the page makes Few's argument against them without meaning to. The panel at bottom left holds seven arcs reading 30.6, 30.8, 30.8, 30.9, 30.9, 31.0 and 31.3 GB. Seven squares, seven needles, to say that seven disks are all about the same. The same seven values as a bullet graph would be seven short bars in a fraction of the height, and the one that was different would be obvious rather than requiring you to read each label. What the gauges do carry is a bounded range where the endpoints mean something, which is the case the pattern survives: these are percentages and capacities, not rates. The panel beside them is where it stops working—three circular gauges at 40.8, 20 and 48.6 GB, all with a red arc, so a value and another value two and a half times larger get the same verdict. Hotspots in this capture: - [Gauge and dial](https://patterns.konigi.com/dashboards/gauge) — Seven arcs to report that seven disks agree. This is the area argument in one panel. - [Sparkline](https://patterns.konigi.com/dashboards/sparkline) — A sparkline inside the arc: the same series encoded twice in one square. - [Sequential and diverging scales](https://patterns.konigi.com/dashboards/sequential-and-diverging-scales) — The arc runs pink through green with no perceptual order, so position on it means nothing without the number. - [Semantic status color](https://patterns.konigi.com/dashboards/semantic-status-color) *(this pattern)* — 40.8, 20 and 48.6 all arc red. The threshold fires for everything, so it says nothing. - [Threshold line and region](https://patterns.konigi.com/dashboards/threshold-line) — The coloured band around the rim is the threshold, drawn as a region rather than a line. **Examples / Node graph panel** — captured September 10, 2026, Grafana Play (signed out; no version string exposed). operational, sparse density, dark theme, desktop-web. Seven services, and the panel is already too small to hold them. Three nodes are cut in half by the right edge and at least one more is somewhere past it, which is the force layout doing what force layouts do to a graph with more nodes than room. That is the hard part of this pattern and it is visible here at a scale of seven. Each node also carries four things at once: a number, a second number, and a ring split between a green arc and a red one. The legend names all four. A topology view where every node reports four measures is a view you read node by node, which is the opposite of what a map is for —one derived state per node is scannable in a second and drills into the rest. Here almost every ring is mostly red, so the channel that could have carried that state is saturated and distinguishes nothing. Hotspots in this capture: - [Service map](https://patterns.konigi.com/dashboards/service-map) — Nodes for services, edges for calls, both from instrumentation rather than from a diagram. - [Semantic status color](https://patterns.konigi.com/dashboards/semantic-status-color) *(this pattern)* — One node: two numbers inside and a success/error ring around it. Four measures, no verdict. - [Legend and series toggle](https://patterns.konigi.com/dashboards/legend-and-series-toggle) — Four series named for a graph with seven nodes, which is the legend doing more work than the map. - [Zoom and pan on time](https://patterns.konigi.com/dashboards/zoom-and-pan) — The only route to the nodes pushed off the right edge, and it doesn't move the rest of the page. **Examples / Polystat Visualization Showcase** — captured September 10, 2026, Grafana Play (signed out; no version string exposed). operational, medium density, dark theme, desktop-web. The plugin's own description is the host map pattern stated plainly —"visualise hundreds of metric series as a grid of coloured polygons" and "spot anomalies across your entire fleet at a glance"—and the shapes gallery halfway down says all six shapes "apply the same threshold colouring; choose the one that fits your layout." The page then disproves its own claim. The hexagon panels tile with every neighbour sharing an edge, so three cells read as one block. The circle panels leave a gap between every pair, so three cells read as three things you have to compare one at a time. At six cells that difference is a preference. At three hundred it is the difference between a cluster you see and a cluster you assemble, which is why the shape is a structural choice rather than a styling one. Hotspots in this capture: - [Host map](https://patterns.konigi.com/dashboards/host-map) — Hexagons sharing edges. Adjacent unhealthy cells merge into one shape, which is the point of the tiling. - [Host map](https://patterns.konigi.com/dashboards/host-map) — The same data as circles: a gap around every cell, so nothing clusters. - [Semantic status color](https://patterns.konigi.com/dashboards/semantic-status-color) *(this pattern)* — A closed set of three—OK, warning, critical—applied as the whole cell fill. - [Ranked list](https://patterns.konigi.com/dashboards/ranked-list) — Sorted descending so the worst cell lands where the eye starts. No share of total, and no row for the rest. - [KPI tile](https://patterns.konigi.com/dashboards/kpi-tile) — Name-only mode: two cells carrying a label, a colour and no number at all. **Examples / Stats, light theme** — captured September 10, 2026, Grafana Play (signed out; ?theme=light). analytical, dense density, light theme, desktop-web. The same dashboard as the dark Stats capture, same data, same palette, one URL parameter apart. Put them side by side and the palette turns out to have been designed on charcoal. On the dark version the value colours carry because they are brighter than the ground—reds, oranges and greens against near-black. Here they have to carry by being darker than the ground instead, and the same hues arrive as pale pink and pale salmon. Look at the Color value panel: six numbers at 30-odd pixels, and 93.5, 88.7, 93.4, 81.6, 77.6 and 87.9 are all light pink on white. The column on the right is worse, because 63.8 GB lands on pale orange. Nothing about the theme switch is broken, and nothing was chosen for this ground. That's the whole argument for designing the dark case first and deriving the other one: the constrained case should set the lightness range, and here the unconstrained one did. Hotspots in this capture: - [Dark-first data palette](https://patterns.konigi.com/dashboards/dark-first-data-palette) — The same six values as the dark capture. Bright-on-charcoal became pale-on-white, and the contrast went with it. - [Dark-first data palette](https://patterns.konigi.com/dashboards/dark-first-data-palette) — 63.8 GB in pale orange on white. On the dark version the identical colour was the readable one. - [Semantic status color](https://patterns.konigi.com/dashboards/semantic-status-color) *(this pattern)* — Whole-tile fills survive the switch, because the text sits on the colour rather than being the colour. - [Grayscale with alerts](https://patterns.konigi.com/dashboards/grayscale-with-alerts) — Ninety green rectangles, identical in both themes. Nothing here can read as abnormal on either ground. - [Sparkline](https://patterns.konigi.com/dashboards/sparkline) — The area fills under each value drop to near-white here, so the shape that was legible on charcoal is a smudge. **Examples / Stats** — captured September 10, 2026, Grafana Play (signed out; no version string exposed). analytical, dense density, dark theme, desktop-web. A showcase rather than a working dashboard, which is what makes it useful: it is Grafana demonstrating every visual option the stat panel has, in one place, with nothing else competing. Two things are worth reading it for. The first is that across roughly sixty tiles here, not one carries a comparison. Every option on display is about how the number looks—background colour, value colour, orientation, text mode, grid packing—and none is about what the number should be measured against. The panel type that most needs a delta and a base is being shown off without either. The second is the colour. Every single tile on this page is coloured, and the "No text" panel is ninety-odd green rectangles carrying no label and no value at all, which is colour as the sole carrier of meaning at its purest. Both of those are reasonable for a catalogue of options and neither survives being copied onto a real page. Hotspots in this capture: - [KPI tile](https://patterns.konigi.com/dashboards/kpi-tile) — Label, value, unit and a sparkline behind it. No delta, no base, no window. - [Dark-first data palette](https://patterns.konigi.com/dashboards/dark-first-data-palette) — The dark half of the pair. The same six values in the light capture arrive as pale pink on white. - [Sparkline](https://patterns.konigi.com/dashboards/sparkline) — A column of them, each scaled to its own series, which is the comparison Tufte warns the arrangement invites. - [Semantic status color](https://patterns.konigi.com/dashboards/semantic-status-color) *(this pattern)* — Whole-tile background colour: the loudest channel available, spent on all six. - [Grayscale with alerts](https://patterns.konigi.com/dashboards/grayscale-with-alerts) — Seven rows, seven different colours, no resting state. Nothing here can read as abnormal. - [KPI tile](https://patterns.konigi.com/dashboards/kpi-tile) — Thirty numbers with no labels—the value with nothing attached to it. - [Semantic status color](https://patterns.konigi.com/dashboards/semantic-status-color) *(this pattern)* — No text at all. Colour is the only carrier, which is the WCAG failure stated as a feature. - [Header KPI strip](https://patterns.konigi.com/dashboards/header-kpi-strip) — Six tiles sharing one anatomy, which is the arrangement that reads as a row rather than as six things. **Examples / State timeline and Status history** — captured September 10, 2026, Grafana Play (signed out; no version string exposed). operational, medium density, dark theme, desktop-web. The most useful thing on this page is an accident of layout: the third panel down the left column draws three series as state bands, and the panel directly underneath draws the identical query as an ordinary time series. Same data, stacked one above the other. The line chart is three tangled traces oscillating between 57 and 64, and reading it means picking a series, tracing it, and thresholding it in your head. The state timeline above has already done that and shows the conclusion, and the blue stretches—below fifty—are findable without being looked for. That is the whole argument for the encoding, and Grafana has put the before and after in adjacent panels. Worth noticing too that every coloured region here carries its word inside it. LOW, HIGH, NORMAL, CRITICAL, True, False. Colour is never the only carrier on this page. Hotspots in this capture: - [Status history](https://patterns.konigi.com/dashboards/status-history) — Continuous regions with the state name written inside each one. - [Threshold line and region](https://patterns.konigi.com/dashboards/threshold-line) — Thresholds turning a numeric series into discrete bands: under 50, 50, 300. - [Time series](https://patterns.konigi.com/dashboards/time-series) — The same query as the panel above, untranslated. Three traces you have to threshold yourself. - [Sequential and diverging scales](https://patterns.konigi.com/dashboards/sequential-and-diverging-scales) — One mark per sample, green through red by temperature—so green here means cold, not good. - [Semantic status color](https://patterns.konigi.com/dashboards/semantic-status-color) *(this pattern)* — A closed set of two, both labelled. The clearest case on the page of colour plus a word. **Examples / Table** — captured September 10, 2026, Grafana Play (signed out; no version string exposed). analytical, dense density, dark theme, desktop-web. Seven tables demonstrating what a cell can hold, and the range is the point: a threshold colour on the whole cell, a continuous gradient down a column, an image, a bar rendered inside the cell, a pill, and a markdown block carrying three metrics at once. Two of them stop working at this size. The bar gauge column on the right is squeezed to a sliver about six pixels wide, so the encoding that was supposed to make magnitude visible carries nothing, and the catch-phrase column beside it truncates mid-word with no way to see the rest. The bottom-left table is the one to look at hardest. It is sorted, it has column headers you can click, and the pager under it reads page 1 of 72. Any sort applied there is a sort of the page unless the query re-runs, and nothing on screen tells you which of those is happening. Hotspots in this capture: - [Data table](https://patterns.konigi.com/dashboards/data-table) — Threshold colour filling the cell, which makes a column scannable without being read. - [Sequential and diverging scales](https://patterns.konigi.com/dashboards/sequential-and-diverging-scales) — A continuous ramp down a sorted column: the table doing a heatmap's job. - [Data table](https://patterns.konigi.com/dashboards/data-table) — In-cell bar gauge clipped to a sliver, and text truncated mid-word with no escape to the full value. - [Semantic status color](https://patterns.konigi.com/dashboards/semantic-status-color) *(this pattern)* — Value mappings turning raw levels into a closed set, each with its word in the cell. - [Delta indicator](https://patterns.konigi.com/dashboards/delta-indicator) — Pills reading up, down and down fast: direction with no magnitude and no base. Also page 1 of 72. ### Home Assistant (Open Home Foundation) A card grid people genuinely rearrange, on a wall tablet, which is where resizable layouts either work or quietly stop describing the house. **Demo dashboard** — captured September 10, 2026, Home Assistant public demo (signed out). personal, medium density, light theme, desktop-web. The grouping axis here is physical space—Living room, Kitchen, Study, Outdoor—which nothing else in this gallery uses, and it works for the same reason process mimics work: the viewer already holds the model. The thing worth stealing is the state labelling. Every entity says its state in words: Open · 100%, Off, Closed, Playing, Up-to-date, Unplugged. The amber tint on an icon repeats what the word already said rather than replacing it, so the page is readable with no colour at all. That isn't accessibility diligence so much as an audience constraint—you cannot train a household on a colour key the way you can train an on-call rota, so the words have to carry. Each section header also doubles as a summary: Living room reports 22.8°C and 57% humidity beside its own name, and Study reports "In a meeting". And this is a control surface as much as a display—the Spotlights card is a slider you drag, the thermostats have plus and minus. Hotspots in this capture: - [Resizable card grid](https://patterns.konigi.com/dashboards/resizable-card-grid) — Cards a household arranges itself, grouped by room. Sections are one column each rather than a free canvas. - [Semantic grouping](https://patterns.konigi.com/dashboards/semantic-grouping) — Grouped by where the thing physically is, and the group header carries that room's temperature and humidity. - [Semantic status color](https://patterns.konigi.com/dashboards/semantic-status-color) *(this pattern)* — Amber means on, and the card says 49% anyway. Colour repeats the word instead of replacing it. - [Header KPI strip](https://patterns.konigi.com/dashboards/header-kpi-strip) — Three chips above everything: outside temperature, humidity, and whether anyone is home. - [Sidebar and canvas](https://patterns.konigi.com/dashboards/sidebar-and-canvas) — Collapsed to icons by default, because on a wall tablet the canvas is worth more than the labels. - [Sparkline](https://patterns.konigi.com/dashboards/sparkline) — One card carrying a number and the shape behind it, with no axis and no legend. - [Dashboard builder](https://patterns.konigi.com/dashboards/dashboard-builder) — A pencil in the corner. Editing is one click from reading, which is why these pages actually get rearranged. ## Related patterns - [Grayscale with alerts](https://patterns.konigi.com/dashboards/grayscale-with-alerts) — If everything is colored, nothing is; normal should be gray. - [Threshold line and region](https://patterns.konigi.com/dashboards/threshold-line) — A flat metric has a line it must not cross, and the chart should show where that line is. - [Status history](https://patterns.konigi.com/dashboards/status-history) — The viewer needs to see when something was up, down, or degraded, over days, in one row. - [Red/green direction coloring](https://patterns.konigi.com/dashboards/red-green-direction) — Finance readers expect up-green and down-red, and a fifth of them can't tell the two apart. - [Header KPI strip](https://patterns.konigi.com/dashboards/header-kpi-strip) — The first row of the page has to answer 'is it okay' before the rest asks 'why'. ## Sources - [W3C, WCAG 2.2—Use of Color](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html) - [W3C, WCAG 2.2—Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html) - [Grafana, Configure standard options](https://grafana.com/docs/grafana/latest/visualizations/panels-visualizations/configure-standard-options/) --- Screenshots on patterns.konigi.com are reproduced for commentary and criticism. Product names and marks belong to their owners.