How Do You Design an Empty State? Empty State Color Schemes and Web Design

An Empty State is the screen shown when there is no content to display yet, such as when someone has not created their first item. Leaving a blank area alone can make people wonder whether something failed to load. A useful Empty State briefly explains what would normally appear there and what the user can do next. Its colors should usually feel like part of the normal interface rather than like a strong error warning.

Show what the user can do next, not only that nothing is there

For a first-use screen where no data has been created yet, state the situation in words such as “No projects yet,” then provide a clear next action such as “Create your first project.” Keep the heading and explanatory text central to the message instead of asking an illustration or icon to carry the meaning by itself.

The Primary color in the Empty State—the base color used for important actions and emphasis—should normally keep the same role it has elsewhere in the product. Rather than switching to a new vivid palette only because the area is empty, preserve the usual page background and text colors and emphasize only the action that helps the user move forward.

Use off-white and blue to organize the explanation and next action

For one example palette, use off-white ■#F8FAFC for the page background and dark gray ■#27313A for the heading and body text. Their contrast ratio—the difference in relative luminance between foreground and background colors—is about 12.65:1. This keeps the explanation of what is missing and what the area is for easy to read.

For supporting copy, medium gray ■#5B6470 against off-white ■#F8FAFC gives a ratio of about 5.73:1. This lets secondary guidance appear quieter than the main message while still maintaining enough contrast for normal-size text.

If the Empty State includes a small guidance panel, use pale blue ■#EAF2F8 for the surface and blue ■#315D94 for an icon or short heading; the ratio is about 5.94:1. A primary “Add your first item” button using blue ■#315D94 with white text ■#FFFFFF has a ratio of about 6.72:1.

Do not use color alone to explain why the area is empty

WCAG (Web Content Accessibility Guidelines) 2.2 requires at least 4.5:1 contrast for normal-size text and 3:1 for large text. Non-text visual information needed to identify or understand controls, such as a meaningful icon or button boundary, generally needs at least 3:1 against adjacent colors. Color should not be the only visual means of communicating information, so state the condition directly with text such as “No items yet” and “You can create a new one.”

A first-use Empty State is also different from a screen where content is unavailable because of a network or loading error. If both states look the same, users may not know whether they need to create something or whether the system failed. Separate the message and next action according to the actual cause. In HueRoll, you can adjust candidate colors with a three- or six-digit HEX code or the color picker, then check the selected color against white and black. HueRoll does not compare arbitrary custom color pairs or automatically determine AA or AAA conformance, so check the actual contrast separately for adjacent text, background, icons, and buttons.