The squint test, done properly · Design, Before Any Software

Take the colour away and see what is left

The fastest diagnostic in design costs nothing and takes about twenty seconds. Convert the design to greyscale and look at it. What you are inspecting is the value structure — the pattern of light and dark — which is the layer the eye resolves first and the layer that survives every bad viewing condition you will ever meet.

Most layouts that look wrong are wrong here, and the colour work sitting on top of the fault is wasted effort. This is worth doing before you have chosen a single hue.

The procedure, with numbers

Flatten to greyscale using luminance, not lightness. The distinction matters. A luminance conversion weights green heavily and blue barely — roughly 21% red, 72% green, 7% blue — because that is how much each contributes to perceived brightness. A naive average of the three channels turns a saturated yellow and a saturated blue into similar greys, which is precisely the error you are trying to detect.

GIMP: Colors > Desaturate > Desaturate, mode Luminance.
Photopea: Image > Adjustments > Black and White.
Krita: Filter > Adjust > Desaturate, choosing Luminosity.
Your phone, for checking anything on screen: Android Settings > Accessibility > Colour correction, or iOS Settings > Accessibility > Display and Text Size > Colour Filters > Greyscale.

Blur it slightly, about 1% of the width, so you are judging masses rather than edges.
Look for three blobs in an order. Not five, not one. You should be able to point at the darkest or lightest mass, then the second, then the third.

What the failures look like

Uniform mush. Everything sits in the same middle band of grey. This is the commonest result and it means there is no hierarchy to fix with colour, because colour is not going to introduce a value difference that is not there. The repair is to push something to an extreme: take the heading to near-black or the background to near-white, or invert a block.

The wrong thing is loudest. A decorative photograph is the darkest mass and the headline is second. The eye will land on the photograph. Either the photograph is the message, in which case the headline needs to move onto it or away from it, or it needs to be lightened.

Two things tie for first. Two elements at the same value, similar size, in different places. The eye picks one at random and the reading order becomes unpredictable between viewers.

A number to hold on to: if the mean grey of your primary element and the mean grey of what surrounds it differ by less than about 20 levels out of 255, the difference will not register at a glance. You can measure this rather than guess — the colour picker in any editor gives you the value, and GIMP's Windows > Dockable Dialogs > Histogram shows you the mean of a selection directly.

Why this works when other checks do not

Value contrast is the most robust signal you have. It survives:

Sunlight on a phone, where saturation collapses and everything washes towards mid-grey.
Colour blindness, which alters hue discrimination and leaves lightness largely intact.
Cheap screens with narrow gamut and poor calibration, which is most screens your readers own.
Photocopying, faxing and newsprint, which still matter more than anyone in a design conversation expects.
Peripheral vision, which is a luminance channel first.

If the structure holds in grey, it holds. That is a stronger claim than almost anything else you can say about a layout for free.

What it cannot catch

Be clear about the limits, because people over-trust this test once it has saved them a few times.

It will not catch a measure problem. A paragraph set 140 characters wide has a perfectly good value structure and is still miserable to read.
It will not catch colour-only meaning. Red and green status dots of the same lightness look identical in grey, which correctly warns you that a colour-blind reader is stuck — but a design that passes the squint test can still fail here if the dots differ in lightness while carrying meaning only a colour name explains.
It will not catch semantic errors. A beautifully ranked layout that promotes the wrong message is still wrong, and no filter will tell you.
It says nothing about whether the palette is pleasant. It is a structural test, not an aesthetic one.

Build it into the loop

The reason this test gets skipped is that it arrives too late. By the time the design is finished, converting it to grey feels like an audit of work you have already committed to. Do it at the first rough instead, when the design is four grey boxes and a line of text, and it costs nothing to change.

A useful habit: design the first version entirely in greyscale, with no hue at all, and only introduce colour once the grey version ranks correctly. Everything you then add is decoration on a structure that already works, rather than an attempt to rescue one that does not.