Similarity And Contrast

Similarity and contrast

If similarity makes things feel like they go together, contrast makes things feel different. Used together, they let you communicate "these belong, those don't" through pure visual treatment. Used separately, similarity alone produces a uniform layout where nothing stands out, and contrast alone produces visual chaos where nothing is grouped.

The skill is calibrating both: enough similarity that related items group, enough contrast that distinct things distinguish. Most design problems are calibration problems on this axis.

When to introduce contrast

Contrast deliberately introduces difference where similarity would be misleading or insufficient. Specifically:

Primary vs. secondary actions. A submit button must be distinguishable from a cancel button. The two should not look the same — that misleads users about which is the primary action. Contrast in color, weight, or size separates them.

Normal vs. exceptional states. A normal status item should look different from an error item. The exceptional state needs to stand out so users notice it.

Important vs. supporting content. A page title should look different from body text. The hero card should look different from secondary cards. Without contrast, the user has no visual hierarchy to rely on.

Foreground vs. background. The active workspace should be visually dominant; the chrome (sidebars, headers, footers) should recede. Without contrast, foreground and background compete for attention.

Now vs. later. The current step in a flow should look different from completed and upcoming steps. Without contrast, the user can't tell where they are.

Calibrating contrast

Contrast can be too subtle or too aggressive. The right level depends on what you're communicating.

Too subtle. Two button styles that differ only by 10% opacity. The dissimilarity isn't visible; users don't perceive distinct categories. Either increase the contrast or remove the styling difference (it's not communicating).

Too aggressive. A primary button rendered in such a different style from secondary buttons that it doesn't even feel like the same component family. The contrast is so high it severs the relationship.

Just right. Primary and secondary buttons share a recognizable component shape (same padding, same rounding, same height) but differ clearly in color and weight. They're recognizably the same kind of thing (similarity at the structural level) with one clearly more emphasized than the other (contrast at the styling level).

The pattern: contrast within a family is more useful than contrast between families. Both are buttons; they share button-ness. One is emphasized.

The most useful contrasts

Some contrast types do more work than others.

Color contrast. Bright/saturated colors stand out against muted/desaturated. The brand color is reserved for primary actions; secondary actions use neutral colors. Status colors stand against neutral backgrounds.

Weight contrast. Bold against regular against light. Useful for typographic hierarchy without changing colors.

Size contrast. Large against small. Headlines vs. body. Hero card vs. supporting cards.

Color-light vs. color-dark. Within a single color, dark vs. light. Useful in monochrome or restrained color systems.

Filled vs. outlined. A filled button vs. an outlined button. Visually distinguishable; primary vs. secondary.

Position contrast. A floating action button (FAB) is positioned differently from in-line buttons; that position contrast emphasizes it.

Density contrast. A spacious section against a dense section. The spacious one feels emphasized.

The one-thing-emphasized rule

Hierarchy works when one element is clearly emphasized at each level. Pages have a single primary action; sections have a single primary headline; cards have a single primary image or value.

The corollary: emphasis loses its meaning when too many things are emphasized. A page with five "primary" buttons has no primary; users don't know which is the most important. A page with three different highlight colors has no clear emphasis.

The discipline is restraint. Pick the one or two things that warrant emphasis. Let the rest read as supporting.

Worked examples

Form with primary and secondary buttons

A form has a "Submit" primary action and a "Cancel" secondary action. Both are buttons; both share the same height, padding, and rounding (similarity at the structural level). They differ in:

• Color: Submit uses the brand color background with white text; Cancel uses a neutral background with dark text.
• Weight: Submit's text is medium weight; Cancel's is regular.
• Possibly size: Submit slightly larger to add emphasis.

Users see the family ("buttons") and the hierarchy (one is primary). The contrast is calibrated to be visible without severing the family relationship.