60-30-10 Color Rule for UI Design: Roles, Examples, and Contrast Checks

Balancing colors in UI design often feels like finding harmony in a song: each tone has a role. The 60-30-10 color rule is a starting point for that balance, with roughly 60% dominant color, 30% secondary color, and 10% accent. It is a composition heuristic, not an accessibility standard or a requirement to count every pixel. In a UI design workspace with reusable color variables, you can assign these roles to surfaces and components, then review whether the screen supports the task.

The 60-30-10 rule describes a color scheme with one dominant role, a supporting role, and a smaller accent. In an interface, those roles might be the page surface, content panels, and the primary action. The approximate proportions provide a starting point:

• 60% dominant color for the main surface or background.
• 30% secondary color for supporting areas or grouped content.
• 10% accent color for selected emphasis.

The ratio can keep several colors from competing equally, but it does not guarantee contrast or usability. A pale accent on a pale surface can still be unreadable. The intended action, its label, spacing, and contrast matter more than exact percentages.

The main color establishes the overall surface, the secondary color can distinguish sections, and the accent can emphasize an action. Assign these jobs consistently. Do not make an accent-colored heading look like a clickable control if it has no action.

For example, a productivity screen might use a light neutral background, gray-blue panels, and an orange action button. Treat that as a palette proposal to check with real content, not proof that blue is calming or orange will increase clicks.

The practical benefit is a clearer set of decisions: which surface should recede, which content belongs together, and what deserves emphasis? Equal amounts of several strong colors can make those decisions harder to read. The rule offers a way to simplify the composition without claiming a universal response from every viewer.

Used flexibly, the ratio can support these design goals:

• Visual hierarchy: give the page a dominant surface, use a supporting color to group content, and reserve emphasis for a small number of elements.
• Simpler decisions: define a few color roles before styling each component, rather than choosing unrelated colors one element at a time.
• Focused emphasis: use the accent where it helps a person identify the next action. Whether this improves task completion requires observation; the ratio itself does not establish a conversion benefit.
• Adaptable presentation: light, dark, and minimal interfaces can use the same role-based approach with different colors and proportions.

Start with the task and content, then choose the color roles. A dashboard needs distinguishable data and states; a registration form needs readable labels, a clear action, and understandable errors. Mood and brand expression are useful considerations, but they should not obscure those needs.

Step 1: Choose Your Dominant Color (60%)

This is the foundation of the UI: the background, main surface, or another large area. Neutral or restrained colors are often useful because text and controls still need to stand out. Test the actual text and background pair rather than choosing a pale shade by appearance alone.

For example, a finance dashboard can use light gray for the main surface. A navy version needs different text and surface colors; changing only the background is not a complete dark-mode design.

Step 2: Add a Secondary Color (30%)

Use the secondary color to group related content, such as a sidebar or summary panel. Keep the grouping meaningful. A colored panel should help explain which information belongs together rather than decorate an arbitrary section.

For instance, a mostly neutral screen might use a pale blue-gray panel for account details. The text inside that panel still needs its own contrast check.

Step 3: Highlight With an Accent Color (10%)

Apply the accent selectively to an important action or selected state. It does not have to occupy exactly a tenth of a small screen. If one clearly labeled action is enough, do not color additional elements merely to reach a quota.

Orange, green, or violet can be candidates, but none is inherently readable or appropriate. Check the foreground/background pair, the brand system, and any established meaning such as warning or success.

Step 4: Test and Refine Using Mockitt

Make a screen with realistic content, then compare palette variants without changing the layout. In Mockitt, color variables and reusable components can keep the same role consistent across screens. Review the default, focus, disabled, error, and selected states where relevant.

Ask a reviewer to identify the primary action and explain any status message. A visual preference is useful feedback, but difficulty reading a label or interpreting a state is a more specific design problem. Keep a record of which color pair or component state needs adjustment.

Apply the roles to one screen

In an illustrative workshop-registration screen, assign the neutral surface to the page, a pale violet panel to the session details, and a deep violet fill to “Reserve a place.” A notice saying “Registration closes tomorrow” uses a visible text label as well as its background treatment. Its meaning does not depend on recognizing a hue.

Now change the page to a narrow mobile layout. Keep the same component roles even though the session panel occupies a different proportion of the viewport. Check the button label and notice again; do not enlarge the accent area just to preserve 10%. The deliverable is a small set of color roles and checked component states, not a claim that the entire screen has a mathematically exact ratio.

The 60-30-10 rule is simple, but it's also simple to misuse. Here are some common mistakes to avoid:

• Too many competing accents. Reserve strong emphasis for meaningful actions and states. A warning may need a semantic color outside the main palette; label it clearly instead of treating every colored item as another CTA.
• Skipping contrast checks. WCAG’s minimum text-contrast guidance generally requires 4.5:1 for normal text and 3:1 for large text, with specific exceptions. A 60-30-10 composition does not establish compliance.
• Ignoring meaning. Keep brand colors and status colors coherent. Do not use color as the only way to communicate information: include a label, icon, or other appropriate cue for errors and selected states.
• Following the percentages rigidly. Adjust the composition for content density, screen size, and light or dark presentation. The role of a color should remain understandable when its visible area changes.

These three illustrative palettes show how the roles might be applied. They are design proposals, not measured outcomes from real products:

Example 1: UI for a Health App

• 60% white background to give a light and airy feel.
• 30% pale green used for sidebars and navigation.
• 10% orange used for active buttons and progress indicators.

Keep progress labels visible so orange is not the only way to understand the state. Review whether the pale green navigation has enough contrast for its text and selected item.

Example 2: E-commerce Dashboard

• 60% dark gray used for background and main surfaces.
• 30% lighter gray used for content containers.
• 10% yellow used for sale offers and CTAs.

Check chart labels, panel boundaries, and the yellow button’s text separately. A dark background does not automatically make every light or saturated element readable.

Example 3: Travel Booking Website

• 60% sky blue for headings and backgrounds.
• 30% white for cards and forms.
• 10% coral red for "Book Now" buttons.

The blue, white, and coral palette gives each area a different role. Verify the booking form and action labels without relying on assumptions about the emotional meaning of those colors.

Build a small screen for the relevant task and apply the proposed palette. Compare the result using the same content and state, so a change in wording or layout does not disguise a color problem.

Mockitt can help you maintain and review the color choices in a design. Use its color variables and reusable components to represent the roles you have chosen; it does not automatically establish that a layout follows the ratio or meets an accessibility standard.

A useful workflow is to:

• Adjust the color of the relevant surface or component, then inspect it with its actual text and surrounding content.
• Use reusable color variables so a role can stay consistent when it appears on several screens.
• Share the design with colleagues and collect feedback about specific labels, states, and actions.
• Preview variations while keeping the task and content stable, then record the reason for the chosen palette.

For a larger interface, document each color’s role and its intended foreground/background pairs. That is more useful for implementation than handing over three swatches with no explanation.

The 60-30-10 color rule is a flexible way to organize a palette, not a promise of visual balance or better results. Use it to choose a dominant surface, a supporting role, and restrained emphasis, then check whether the resulting components are readable and understandable.

The useful question is not “Have I reached exactly 10%?” but “Does this emphasis help someone complete the task?”

Keep the roles consistent across screens, review the important states, and adjust the proportions when the content needs it. Contrast and clear meaning take priority over a decorative formula.