Status palette

Pages in this section

Communicating status information

Use the status palette to communicate status-based information such as compliance, risk, progress and service health. The palette uses red, amber and green (RAG), colours that are widely recognised and have an established meaning in health and care services.

Colour blindness or colour vision deficiency (CVD) affects approximately 1 in 12 men (8%) and 1 in 200 women. Avoid using red and green together in charts because some users cannot tell them apart. The categorical palette does not include red to reduce this problem and prevent confusion with status colours. However, red, amber and green (RAG) remain widely used for status reporting, such as compliance, risk and service health.

The most common forms of colour vision deficiency affect red-green discrimination. This means some users may not be able to tell red and green apart. They may struggle to distinguish:

• red from green
• red from brown
• green from brown

A dashboard that relies solely on red and green colours may become difficult or impossible to interpret.

Improve the accessibility of RAG statuses

Red, amber and green can make charts harder to interpret. Use the following guidance to reduce accessibility issues. If your chart uses RAG, follow this guidance to make status information easier to understand:

• define each status so that users interpret the colours consistently, for example:
  • Red: below 70%
  • Amber: between 70% and 79%
  • Green: 80% or above
• status names, labels or metrics should always be used next to the data points, such as:
  • Red: off track
  • Amber: at risk
  • Green: on track
• text should always be visible rather than relying on a tooltip or legend
• you can use shapes alongside colour to reinforce status information, for example:
  • square: off track
  • triangle: at risk
  • circle: on track
• use the simplest labelling approach for the chart type, whether that is direct labels or a clear, well-positioned legend
• for static RAG images, use alt text that explains the key message rather than describing the chart
• for complex RAG dashboards, provide a text summary or a semantically marked up HTML data table for screen reader users
• check that printed charts still make sense in black and white

Red, amber and green (RAG) palette

Use the status palette for data such as:

• compliance
• risk reporting
• progress reporting
• service health
• validation states
• audit findings

The status palette uses the existing UI colours that represent success, danger and warning. These colours are already used for alerts and status labels.

Text colour combinations for RAG

The following colour combinations should be used when placing text on the RAG colours. 

Example RAG visualisation

Mandatory compliance status

Compliance target: 90% (fictional data)

• Compliant: 60% (30 staff)
• Partially compliant: 20% (10 staff)
• Not compliant: 20% (10 staff)

Figure 1. Example RAG status chart

Example alt text

Helpful alt text focused on the key insight:

Mandatory training compliance is below the 90% target. 60% of staff are compliant, 20% are at risk and 20% are not compliant.

Why this works

Figure 1 follows best practice because it:

• uses a 100% stacked bar chart to show the proportion of staff in each compliance category
• uses a high contrast black target marker
• allows users to understand both the distribution of compliance states and performance against the target
• defines the compliance target and displays it as a labelled target marker on the chart
• shows the exact percentage as well as the staff count for each category, so users do not have to estimate values from the visual
• uses status labels close to the chart to reduce reliance on a separate key
• uses status labels as well as colour, so the chart remains understandable even if colours cannot be distinguished
• keeps the chart simple by focusing on a single measure
• uses a horizontal layout, making percentages easy to compare and the chart easier to adapt to smaller screen sizes
• provides enough space for labels so they remain readable when category proportions are very small

When space is limited, place status labels in a horizontal layout and keep them close to the chart.

Common status labels

Users expect RAG colours to have specific meaning. Use consistent terms for each status across charts, tables and dashboards.

Red:

• not compliant
• not achieved
• unacceptable
• outside tolerance
• high risk
• significant concerns
• intervention required

Amber:

• partially compliant
• needs attention
• requires improvement
• approaching tolerance
• medium risk
• some concerns
• watch closely

Green:

• compliant
• achieved
• acceptable
• within tolerance
• low risk
• meets expectations
• on course

References

Web AIM colour contrast checker

Visualising data
5 ways to design for red-green colour blindness

Colour blind awareness
About Colour Blindness