UI Status Design: Keep the Meaning Visible Without Colour Alone

Write the states before drawing badges

Use Draft and Ready for review as two fictional document states. Define what each means and whether the user can take an action. Keep the definitions in the component notes so a reviewer can assess the visible design against the intended meaning.

Inspect the colour-only version

Draw the two states as differently coloured dots without labels. Ask how someone would identify the correct state without naming a colour. If the answer requires remembering which hue means what, the design has not provided a visible alternative to that colour information.

Add an explicit visible cue

Place the concise status text beside the badge. A shape or familiar icon can support recognition, but do not rely on an unexplained decorative symbol. Keep the label near the object it describes so the relationship remains clear in a compact layout.

Review instructions as well as appearance

Replace instructions such as choose the red option with the actual visible option name and task. A monochrome inspection can expose colour dependence, but it is only one observation. Check the component at its intended size and preserve readable labels when the layout changes.

Keep separate checks separate

• Can the visible status be understood without identifying its hue?
• Is the status text readable at the intended size?
• Are text contrast and focus behavior reviewed independently?
• Does the implemented control expose appropriate semantics when it is interactive?

Preserve the component decision

Save the state definitions, chosen labels and reviewer observations together. Colour systems, interface components and prototype iteration fit the Mango Engineers UI/UX learning path. A visible label improves this specific status design; broader conformance still requires review of the complete interface.