How Should You Use Card Colors on a Kanban Board? A Web UI That Makes Categories Easy to Identify

Giving different colors to cards on a kanban board can make it easier to find particular kinds of work. But if entire cards are painted red, blue, and green, those colors can become confused with the colors used for workflow stages or task priorities. Using a board for managing website updates, this article explains how to separate the columns showing progress from the category colors shown on individual cards.

Apply category colors to small labels, not the entire card

A kanban board is a screen where work items are represented as cards arranged in columns for different stages. For example, the four columns might be “Not Started,” “In Production,” “Awaiting Review,” and “Published.” Moving a card between columns changes its workflow stage, but the type of work—“Announcement,” “Interface Improvement,” or “Data Update”—stays the same. Use the columns for progress and a compact label inside each card for its category.

Always include the category name on the label instead of using color as the only way to identify it. WCAG 2.2 (Web Content Accessibility Guidelines, international guidelines for making web content accessible) includes a Use of Color requirement stating that color must not be the sole visual means of conveying information. Deadlines and urgency are separate from work type. Instead of turning a card red just because it is urgent, display its due date and a clear note such as “Needs Immediate Review.”

Example: three card categories on a website-update board

Give the four columns a light blue-gray background ■#F4F6FA and all cards a shared white background ■#FFFFFF. Use dark blue-gray ■#243244 for the card titles and a quieter slate color ■#526174 for assignees and due dates. Against the white cards, the title text has approximately 13.01:1 contrast and the secondary text about 6.32:1. A contrast ratio describes the difference in relative luminance between text and its background.

The white cards and light column background have only about 1.08:1 contrast. If the card boundary needs to be visually identifiable, use a slate outline ■#64748B. This outline has approximately 4.76:1 contrast against white ■#FFFFFF and 4.40:1 against the surrounding column ■#F4F6FA. Consistent spacing between cards also helps maintain their separation.

• Announcement: “Update the closure-day announcement.” Use a pale-blue label background ■#E8F1FF with deep-blue text ■#244A8F reading “Announcement,” giving approximately 7.53:1 contrast.
• Interface Improvement: “Adjust spacing in the search form.” Use a pale-violet label background ■#F2E8F9 with deep-violet text ■#653B84 reading “Interface Improvement,” giving approximately 7.04:1 contrast.
• Data Update: “Update basic facility information.” Use a pale-green label background ■#E6F5EF with dark-green text ■#246448 reading “Data Update,” giving approximately 6.24:1 contrast.

All three label text combinations exceed the 4.5:1 requirement for normal-sized text. However, the pale-blue Announcement label background ■#E8F1FF differs from the white card ■#FFFFFF by only about 1.14:1. Do not expect the colored area to identify the category on its own: retain the label text and put category labels in a consistent place. When a card moves from “In Production” to “Awaiting Review,” its category name and color should remain unchanged.

Keep moving, selecting, and viewing cards accessible

When a card is selected, do not change its category color to communicate selection. Add a checkmark or the word “Selected,” together with a visible outline. For example, a dark-teal outline ■#0F766E provides approximately 5.47:1 contrast against a white card ■#FFFFFF and about 5.06:1 against the light column background ■#F4F6FA. Keep the keyboard focus indicator visible as users move through the cards.

Do not require users to drag a card in order to move it between columns. Provide a click-or-tap menu with an action such as “Move to Awaiting Review.” Under WCAG 2.2’s Dragging Movements criterion, drag-based functionality generally needs a single-pointer alternative that does not require dragging. If a move button uses deep blue ■#1E40AF with white text ■#FFFFFF, the text has approximately 8.72:1 contrast against the button, and the button has 8.06:1 contrast against the light column background ■#F4F6FA. After a move, update the stage and column count without changing the card’s work category.

On smartphones, even when columns can be scrolled horizontally, make sure people can identify the current stage as well as each card’s category, assignee, and due date. HueRoll lets you enter a HEX code (a hexadecimal color value) and check the selected color against white or black. It cannot compare arbitrary color pairs or automatically assess WCAG AA or AAA conformance. The card, label, and outline combinations in this example were calculated separately. Also test the board’s interactions in the finished interface.