Kill the borders

Go and look at the border you are actually shipping.

If you use Bootstrap 5, its default border colour is #dee2e6, which computes to a contrast ratio of 1.3:1 against white. Tailwind’s default gray-200 comes out at 1.24:1.

Hold those numbers next to the one requirement that applies. WCAG 1.4.11 asks for 3:1 for interface components. So wherever that border is the only thing marking the edge of a control, an input, a select, a clickable card, it is not a subtle design choice. It is a failure, by roughly a factor of two and a half.

And where it is not marking a control, it is doing something worse than failing. It is adding a line to the page that is too faint to group anything, while still costing you a line.

Grouping does not need a line

The instinct that a border is how you show things belong together is worth examining, because perception research settled this in 1992 and the answer is not what most developers assume.

Stephen Palmer’s principle of common region states that elements are grouped “if they are located within a common region of space, i.e., if they lie within a connected, homogeneously colored or textured region or within an enclosing contour.”

Read the two halves of that. A homogeneously coloured region or an enclosing contour. A fill and an outline are alternatives, not a hierarchy. Palmer says so directly in the results: the effect “is not specific to regions defined by enclosing lines, but is just as strong for those regions defined by reflectance edges.”

Just as strong. A background shift groups exactly as well as a border does, and it does it without adding a visible line to compete with your content.

The move

Decide what job the line is doing, then do that job with space, a background, or a shadow instead, and delete the line.

"THESE THINGS BELONG TOGETHER"    FOUR WAYS TO SAY IT

 1  a line around them             a border. costs a visible edge.
                                     at 1.3:1 it is not saying much

 2  a shared background            common region, via fill.
                                     Palmer: just as strong

 3  proximity                      closer together than they are to
                                     everything else. costs nothing

 4  a shadow                       common region, via an implied
                                     surface. see move 26

  pick the one that adds least. usually 3, then 2.
  keep 1 only where a real edge must be visible against
  the same background on both sides, and then take it
  to 3:1 and mean it.

Notice what option three costs: nothing. No new colour, no new token, no new element. Most borders in most codebases are compensating for spacing that was never set, and the fix is to set the spacing and remove the compensation.

Where I am arguing rather than citing

Two honest notes, because this chapter attracts stronger claims than the evidence supports.

The “built by a developer” signature is my assertion. I cannot source it. Nobody has surveyed how common a hairline grey border is, or shown that readers perceive bordered interfaces as amateurish. It matches what I see, and you should hold it as taste rather than fact.

And there is no study comparing a bordered card against the same card separated by shadow, background or space. I looked. Baymard, Nielsen Norman Group and the research literature all treat this as convention rather than measurement.

What it costs

Removing signifiers can genuinely hurt, and there is evidence pointing that way. In an eye-tracking study comparing flat against traditional interfaces, icon search took 8.0 seconds in the traditional version and 15.4 seconds in the flat one, nearly twice as long. That study had twenty participants, all students, so treat it as a warning rather than a law. But it is a real warning: the failure mode of this chapter is stripping away the cues that told people what was clickable and calling the result clean.

So separate the two decisions. These things are grouped can be said with space and fill. This thing is interactive usually still needs a visible affordance, and that affordance has a 3:1 floor.

And a background fill needs somewhere to sit. Once cards have a subtle fill, the page behind them has to be a different tone, which means introducing a surface colour you did not previously have. That is one token and one decision, but it is not free, and it is the reason teams reach for borders in the first place.

Try this week

Open devtools on your busiest page, find a border, and read its computed colour into a contrast checker.

Whatever the number is, you now know something you did not know this morning. If it is under 3:1 and it is the only edge on a control, you have found an accessibility bug that has been shipping for years.

Then pick one component and try the deletion. Remove the border, add a step of spacing between the groups it was separating, and look at it. Most of the time the border was not holding anything up.

If it still needs the line after that, keep it, and take it to 3:1 so it is doing the job properly rather than apologising for existing.