De-emphasize, don't emphasize

You already know the reframe. When the primary action does not stand out, you do not make it louder, you make everything around it quieter. It is Refactoring UI’s rule, it is correct, and the previous move spent it.

This chapter is about the two questions that arrive immediately afterwards and get no answer. Which element loses? And how far down can I turn it before I have broken something?

The move

Rank the actions by how often they are used, give exactly one of them the emphasis, and stop turning the rest down before quiet starts reading as unavailable.

Why turning things down works at all

Worth one paragraph, because it explains the boundary as well as the rule.

Visual salience is not a property an element has. It is a relationship between an element and what surrounds it. Nothdurft’s work on preattentive vision found that performance depended on local contrast at the borders between regions rather than on the absolute properties of the elements themselves.

Which means emphasis is zero-sum by construction. There is no operation that makes one thing more prominent without making something else less so. Turning the target up and turning the competition down are the same move, and only one of them stops you eventually running out of headroom.

Which element loses

The instinct is to rank by importance, and importance quietly becomes how dangerous it is or who asked loudest in the meeting. Both produce interfaces where Delete is the brightest thing on the page.

Rank by frequency instead. Apple’s guidelines say it directly: “In general, prioritize the commands that people are most likely to want. These commands are often the ones people use most frequently.” Their menus guidance is the same, “Prefer listing important or frequently used menu items first.”

Danger is handled by confirmation and undo, not by visual weight. A destructive action that is rarely used should be quiet and hard to trigger by accident, which are different problems solved by different means.

Material’s button ladder gives you the vocabulary once you have the ranking. Their documentation lists “five button styles, in order of emphasis”, running from filled at the top, where a filled button is “used for final or unblocking actions in a flow such as Save, Join now, or Confirm”, down to text buttons, which “have less visual prominence, so should be used for low emphasis” actions.

So the procedure is mechanical. Count how often each action is actually used, sort, then assign exactly one filled button to the top of that list and push everything else down the ladder.

BEFORE                          AFTER

[ Save ]  [ Duplicate ]         [ Save ]     Duplicate  Archive
[ Archive ]  [ Delete ]
                                                              Delete
four filled buttons
all shouting equally            one filled, two text, one quiet
                                and set apart
ranked by: who asked
                                ranked by: uses per week
Delete is the brightest         (Save 40, Duplicate 3,
thing on the page                Archive 2, Delete 0.2)

                                Delete is still one click.
                                it just stopped competing.

How far down is too far

Here is the floor, and it is a hard one rather than a matter of taste.

WCAG 2.2 requires 4.5:1 contrast for normal text and 3:1 for large text and for interface components. Below that you have not de-emphasised something, you have made it non-compliant.

But the more interesting limit sits above the legal one, and it comes from what users read grey as. Nielsen Norman Group put it well: “by convention, disabled features are dimmed or grayed out. Low contrast treatments risk sending users the wrong signal about the availability of an option.” Their example was GitHub, whose search fields were “grayed out, making them look unavailable.”

Notice how the standard and the convention interact. WCAG exempts disabled controls from the contrast minimum. So the moment you turn something down far enough to look disabled, you have crossed into the visual language the standard has stopped protecting, and users will read the control as unavailable while it is perfectly clickable.

That is your real floor: not the ratio, but the point where quiet becomes off.

What it costs

People read de-emphasis as demotion, and they are not always wrong. Turn a stakeholder’s feature into a text button and expect a conversation. Have the frequency numbers ready, because the argument is much shorter when the ranking came from usage data instead of your taste.

And the rule has exceptions in dense data. In a table, Material’s own spec sets column headers lighter than their content, at 54% black against 87% for the values, and raises the header to full weight only when it becomes the active sort. That is the right call when people are scanning values. It is the wrong call when they are hunting for a specific field. Which way round depends on the task, and no rule settles it for you.

Try this week

Open the busiest screen in your product and count the filled buttons. If there is more than one, that screen has no primary action.

Then get the actual numbers. Your analytics already know how often each of those actions is used, and the ranking is nearly always a surprise to somebody.

Keep one filled button at the top of that list. Everything else becomes a text button, and anything under a use or two a week moves out of the main cluster entirely.

Change nothing else. No new colours, no new spacing. You will have made the screen look substantially more designed by deleting emphasis, which is the whole trick.