Contrast

The sentence that comes up most often in a design review is some version of "I can't see it." The button is there but the eye slides past it. The heading is there but it reads like body text. The person who made the screen says everything is on it, the person looking says they can't find it, and both of them are describing the screen accurately.

These conversations stall because the complaint arrives as taste. "Make it prettier" and "it feels flat" don't point at anything to change. The designer tries a different color, brings it back, and someone else says something different. Three rounds later the screen is worse than it started.

Contrast reframes the problem as a fact about eyes. People don't read a screen from the top left downward; they look at whatever differs from its surroundings. Once that's the frame, "I can't see it" stops being an opinion and becomes a statement that the difference is too small — which comes with places to fix. Enlarge the heading, pull the button color away from the background, or push everything around it down.

Something stands out when it differs from what surrounds it, and how much it differs decides how much it stands out. On a screen there are four axes that carry that difference.

1. Size. The same black text at 14 pixels and at 24 pixels reads with different weight. It's the most honest way to build hierarchy, and the gap survives a narrow window.
2. Weight. Leaving the size alone and going bolder emphasizes without taking up more room. Useful where the number of lines is fixed, like the total row of a table.
3. Brightness. How far the text color sits from the background color. On white, dark gray and light gray at identical sizes read as body copy and as a secondary note.
4. Hue. One blue element on an otherwise gray screen gets seen first. But a difference built only from hue disappears in grayscale printing and for people with color vision deficiency, so it rides along with size or weight rather than carrying the job alone.

Whichever axis you use, one rule holds: a difference has to be large or absent to mean anything. Body text at 14 pixels with a heading at 16 gives you two pieces of body text; take the heading to 24 and it starts reading as a heading. Two pixels signals nothing to the user while still making the screen look unsettled. If a gap can't be committed to, matching the values exactly is the better option.

The second rule is that emphasis is relative. Emphasize everything on a screen and nothing is emphasized. Five filled blue buttons leave the user deciding where to press; fill one and reduce the rest to outlines and the place to press is obvious. Emphasis is as much about lowering the surroundings as raising the target — adding white space around an element does the same work.

It comes up where a screen has to steer the next action, where information is layered, and where legibility has to be confirmed rather than judged.

First, buttons and links. One primary action per screen gets the filled treatment. On a sign-up screen the sign-up button is filled and the route to log in is a text link. Fill both and the screen forks in two.

Second, separating layers of information. When one row of a list carries a title, an author and a timestamp, those three don't get the same size and color. Set the title darker and drop the rest a step into gray, and someone scanning reads only titles until they need more. That is what the size and weight steps defined in typography are actually for.

Third, confirming that text can be read at all. Light gray type looks tidy on a designer's large, bright display and vanishes on a phone outdoors. This is measured rather than eyeballed: contrast ratio gives a number, and the number either clears the threshold or it doesn't. Some of this territory isn't open to preference.

Fourth, building dark mode. Colors that read well on a light screen either sink into a dark background or scream against it. Supporting both themes means defining pairs by their distance from the background instead of picking colors one at a time, then storing them as design tokens.

"There's not enough contrast here, so the button disappears. Let's make the others outline-only."

Create the difference by lowering the surroundings instead of raising the target.

"The heading and the body need to be two steps apart."

The current gap is too small to register as hierarchy.

"This gray fails the contrast threshold. I'm taking it one step darker."

A decision made from a measurement rather than from looking at it.

The exchange between Noa and Theo over a Pagedeck settings screen is typical. Noa's version had Save and Cancel sitting side by side, both gray. Theo said he had to read the labels every time to find Save, so Noa filled Save with the accent color and stripped Cancel back to plain text. Neither button moved and neither changed size, but the place the eye lands on opening the screen did.

When Mia looks at the same screen, her question isn't whether the colors are nice — it's what the order is. Once it's settled what the user should do first here, where the contrast goes follows from that. Pick colors before settling the order and the meeting slides back into taste.

The common misreading is that contrast means making colors stronger. Emphasis attaches to color first, and color is the easiest thing to reach for. But raising color alone adds one more color every time something new needs emphasis, and a screen showing red, blue and green at once has nothing that reads first. Size, weight and spacing create difference without adding any color, and they survive a grayscale printout. Color is better suited to adding meaning to something already separated.

The opposite mistake is assuming that more contrast looks cheap. Screens built from soft grays do look refined, which makes the values tempting to lower. The catch is that they look refined on one bright indoor monitor. Halve the screen brightness or open the same screen in sunlight and the button labels go first. A composed screen comes from emphasizing fewer places, not from weaker differences. Choose the one spot that gets the difference, line the rest up neatly, and the same impression arrives without lowering a single value.