At a glance
- Contrast. Differences must be obvious. Weak ones read as mistakes.
- Repetition. One treatment per kind of element, everywhere.
- Alignment. Nothing sits where it does by accident.
- Proximity. What sits near is read as related.
- Low contrast appears on 83.9% of the top million home pages, per WebAIM's 2026 scan.
Two cards
The principles are easiest to see at small scale, so start with a business card. Both of these carry identical information.
The second is not better because it is plainer. It is better because it makes four decisions the first one avoided. Each of those decisions is one of the four principles below, and each behaves the same way on a web page.
C. Contrast: make differences unmistakable
If two things are not the same, make them clearly different. Timid differentiation is worse than none, because a heading two pixels larger than the body text reads as an error rather than a hierarchy.
On the cards. In the first, name, job title, phone, cell, email and website are all set at nearly the same size and weight. Nothing announces itself, so the eye has no entry point and must read everything to find anything. The second sets "John Doe" large and bold, "CEO" small and light beneath it, and the contact block smaller still. You know where to start before you read a word. The first card also runs black text over a mid-tone photograph, which drops the contrast ratio to somewhere unreadable in poor light.
On the web. This is the one principle with a legal dimension. Text contrast against its background is measurable under WCAG: 4.5:1 for normal text, and 3:1 for large text, defined as 18pt or 14pt bold. WebAIM's February 2026 scan of the top one million home pages found low-contrast text on 83.9% of them, and the figure has been rising. Light grey on white is the usual culprit, and it is nearly always a deliberate aesthetic choice.
The check. Glance at the page for two seconds. If you cannot tell what matters most without reading, contrast is insufficient. Then run your body text and link colours through WebAIM's contrast checker.
R. Repetition: one treatment, used everywhere
Decide once how a thing looks, then make every instance of that thing look that way.
On the cards. Count the typefaces on the first card: a serif for the contact block, a bold sans for the address, a third face for the service bullets, and skewed dimensional lettering for the company name. Four treatments for one card's worth of information, none of them repeating. The second uses two faces with clear jobs: a serif for the brand and tagline, a sans for everything the reader has to act on. And the blue of the logo mark reappears in "Established 1969" rather than being introduced once and abandoned.
On the web. Repetition decays fastest after launch, and it decays through editing rather than design. Pages added over two years by different hands, with images sized by whoever uploaded them and headings chosen by appearance, produce a site where no two pages quite match. Visitors do not diagnose the cause. They register that the business is less organised than its competitor.
There is an invisible version worth naming. Heading levels picked for how large the text looks, rather than for the page's actual hierarchy, break screen reader navigation and how search engines read the page, while the rendered page looks fine.
The check. Open six pages of your site in six tabs and cycle through them quickly. Anything that should match and does not becomes obvious at speed in a way it never is page by page.
A. Alignment: every element on a shared edge
Every element should share an edge with something else. Nothing should sit where it does because that looked about right.
On the cards. The first has at least four competing edges: a logo box at top left, bullets on a different left margin, a centre-aligned contact stack whose left and right edges are both ragged, and a company name set at an angle that aligns with nothing at all. The second has two zones, the logo block and the contact block, and everything in the contact block runs flush left off a single line.
On the web. A well-built grid enforces alignment, which is why the problems usually arrive later through content. Images uploaded at inconsistent widths, a paragraph centred because it looked lonely, a callout indented by hand, a table overflowing its column.
Centring deserves a specific warning, because it is the untrained default and it is what the first card does. A centred block produces a ragged left edge the eye cannot track downward. It works for a few short lines, such as a hero statement, and almost nowhere else.
The check. Screenshot the page and draw a vertical line at the left edge of your main text column. Count how many elements touch it, and how many distinct alignment lines exist. Fewer is better.
P. Proximity: what sits near is read as related
Elements placed near each other are perceived as belonging together. This is the failure we encounter most often, and the hardest one for an untrained eye to name, because the page registers as cluttered when the real problem is that the wrong things are grouped.
On the cards. The first spaces every line in the contact block identically, so name, title, phone, cell, email and website arrive as one undifferentiated list with no internal structure. The second groups them: name and title tight together, a gap, four lines of contact detail, a gap, the address. Same information, three groups instead of one, and the grouping does the reader's sorting for them.
On the web. A heading belongs closer to the section it introduces than to the section above it. A caption belongs against its image. A form label belongs tight to its field, and a validation message tight to the input that produced it.
Two things make this harder on the web than on a card. Spacing lives in a stylesheet, so a heading's margin is inherited by every heading on the site and a fix in one place changes twenty others. And a layout that groups correctly at desktop width restacks at mobile width, where elements that sat side by side become vertically adjacent to something else. A page can be correctly grouped on a laptop and wrong on a phone.
The check. Step back from the screen until the text becomes grey texture and count the clumps. Then narrow the browser to phone width and do it again.
Where the four came from
The CRAP mnemonic dates to a 1994 design primer. The principles are considerably older.
Proximity and repetition are Gestalt psychology. Max Wertheimer's 1923 paper Laws of Organization in Perceptual Forms identified the factors that make the eye group visual elements automatically, among them proximity, meaning elements near each other are perceived as belonging together, and similarity, meaning elements that look alike are perceived as a set. Wertheimer demonstrated it with rows of dots. It applies without modification to a web page.
That matters practically. These are not conventions a visitor learned and could unlearn. Grouping happens in perception, ahead of interpretation, so a visitor who sees a caption sitting closer to the wrong image has already connected them.
Alignment comes from Swiss typography and the grid tradition, stated most fully in Josef Müller-Brockmann's Grid Systems in Graphic Design. Contrast runs back through Jan Tschichold's Die neue Typographie in 1928 and into typographic practice well before that.
A five-minute pass over your own homepage
- Contrast. Identify the single most important thing on the page and make it obviously so, using at least two of size, weight, and colour. Run your text colours through a checker.
- Repetition. Open several interior pages together. Make matching things match.
- Alignment. Find your alignment lines and reduce them. Move anything centred that runs longer than two lines.
- Proximity. Squint at desktop width and again at phone width. Fix spacing so the visual groups match the actual meaning.
None of this requires design software or design vocabulary. It requires deciding what matters most on the page, which is the part people avoid, and which is the same decision a designer would charge you to make.
How this shows up in our work
These four are not a checklist run at the end of a project. They are most of what a design decision consists of, and the reason a page ends up legible rather than merely decorated.
They are also part of why we manage content changes rather than handing over an editor. Alignment and repetition are what erode when pages are added by people applying styles for appearance rather than structure, and the erosion is gradual enough that nobody inside the business notices it happening. Contrast and heading structure carry accessibility consequences alongside the visual ones, which we cover in what ADA web accessibility actually requires.
If your site has taken on a few years of edits and no longer looks like one thing, get in touch.
Sources
- Max Wertheimer, Laws of Organization in Perceptual Forms (1923), originally Untersuchungen zur Lehre von der Gestalt II, Psychologische Forschung 4, 301–350; English translation in Ellis, A Source Book of Gestalt Psychology (1938)
- Josef Müller-Brockmann, Grid Systems in Graphic Design (1981)
- Jan Tschichold, Die neue Typographie (1928)
- Robin Williams, The Non-Designer's Design Book (1994), the source of the CRAP mnemonic
- WebAIM, The WebAIM Million: 2026 report (March 2026)
- W3C, Understanding Success Criterion 1.4.3: Contrast (Minimum)
- WebAIM Contrast Checker
- Risingline, What ADA Web Accessibility Actually Requires