Layout decisions to make before color
WebForgers
Color is a late decision. On a booking page the first failures are usually the size of the opening line, the length of the paragraphs, and the gap around the button that completes the booking. Those three can be settled while the palette is still unset.
The opening line
The opening line is the one a person has to read at arm’s length on a phone. For a booking page that line is the name of the action: what can be booked, and for whom. It stays one line at the width you actually test, a narrow phone in portrait. A desktop window dragged thin is a later check. It is a poor stand-in for a phone held outside.
The reading line
A paragraph that explains the offer — who it is for, how long it takes, what to bring — stays near 60 to 75 characters on a wide screen. That range is a working habit of this publication, written down so the next page starts from it. Past that length the eye has to search for the start of the next line, and an explanation is exactly the paragraph a person reads through.
The gap around the action
The booking control is the action. WCAG 2.2 sets the minimum pointer target at 24 by 24 CSS pixels. A smaller target can still pass when a 24-pixel circle centered on it stays clear of neighboring targets, and the criterion lists further exceptions, including links inside a sentence. Draw the booking control larger than that minimum, and keep a clear gap between it and any nearby text link, so the two targets keep their own space.
Contrast, after the measures
With those three measures on the sheet, the page can already be used. Color then has a job: to separate the booking control from the quiet links, and to mark a choice that is no longer available.
WCAG 2.2’s contrast minimum asks ordinary text for 4.5 to 1 against its background. It treats large text — 18 point, or 14 point bold, and up — as able to sit at 3 to 1. The opening line is often large text. The explanatory paragraph is ordinary text, so a pale color that looked elegant in a still drawing has to be darkened until that paragraph clears 4.5 to 1.
The conditions of the booking control are a separate piece: Designing every state of a control.
A sheet before any swatch
Write three notes before a color file is opened.
The opening line is the words, plus the phone you held. If the line wraps on that phone, in portrait, at arm’s length, it is not the opening line yet. Cut the words or raise the size, then hold the phone again. A desktop window dragged thin is still the later check. It does not replace the phone.
The reading line is one full line of the paragraph that explains the offer, pasted into a plain note and counted with the spaces. This publication uses 60 to 75 characters as its own habit for that kind of paragraph. The habit is not a number a specification demands. A list of what to bring can be shorter on purpose. Write that down, so a later edit does not stretch the list into a wide paragraph.
The gap is the booking control, the nearest text link, and the open space between them. Draw the control larger than the 24 by 24 CSS pixel minimum, and keep the circle of space unshared.
When the line fits and still says the wrong thing
“Welcome to the studio” can sit on one line and still be the wrong opening line. The line names the action: what can be booked, and for whom. A greeting that fits is still a greeting. Replace it, then check the width again. Fit and meaning are two checks. Passing one does not pass the other.
When color arrives first
A palette chosen first has to be reopened. The pale color that looked quiet in a still drawing fails the explanatory paragraph, because that paragraph is ordinary text. The opening line is often large text and can sit at the lower bar. The failure is not that a brand color is “wrong.” The failure is that the paragraph someone has to read does not clear its bar, and the booking control does not separate from the quiet links.
Do the three measures in black on white. The page can already be used. Open the palette after that, darken whatever fails on the ordinary paragraph, and check that the booking control still separates from the quiet links.
Write this down
- The phone, and that the opening line was one line on it.
- The character count of one explanatory line, and whether it sat in the 60 to 75 range this publication uses.
- The booking control drawn larger than the minimum target, with a gap the nearest text link does not enter.
- The paragraph’s contrast, checked after the palette, because that paragraph is ordinary text.
Someone picking up the file should be able to repeat those four without opening a drawing tool. The next piece draws the conditions of the same control. It assumes these measures are already on the sheet.
The phone, held for real
Hold the phone outside, or in the light the booking page will actually get, portrait, at arm’s length, with the browser chrome still taking its strip at the top. A window on a laptop dragged narrow is a later check. It hides the chrome, it sits at a desk distance, and it lets you lean in. The opening line has to survive the worse of those two tests. If the action name wraps on the phone, the line is too long or the type is too large. Do not shrink the type as the first repair. Ask whether the words are the action. “Book Thursday at 6” can be the whole line. The place name can drop to the next line if someone still needs it. This publication’s habit is that split: one line for the action, a following line for the place. The habit is not a character count from a specification. The 60 to 75 character habit belongs to the explanatory paragraph, which is ordinary text on a wide screen. Do not borrow it to judge the opening line. The opening line is shorter because it is the name, and it is often large text.
Write down the phone you used and that the action stayed one line. “Looked fine on my machine” is not that note. A second person should be able to pick up the same phone class and repeat the check without opening the drawing.
The explanatory paragraph, line by line
The paragraph under the action says who the session is for, how long it takes, and what a returning visitor should bring. Read it as separate lines, not as a gray block. Count one line that you expect a person to read through. If that line runs past the habit, break it at a phrase they can pause on, not in the middle of “returning visitor.” A break that saves the count and ruins the phrase has passed the ruler and failed the sentence.
Keep the paragraph next to the action. A long explanation pushed below a gallery forces the person to book before they have read who the session is for. The gallery can follow. The explanation cannot be a footnote to a photograph of the room. On a booking page the room is not the action.
If a second paragraph is required, give it one job. The first paragraph is who and what to bring. The second is the exception: what happens when Thursday at 6 is full, or when a beginner has opened the returning page by mistake. Two paragraphs that both restate the offer are one paragraph written twice. Cut one.
Neighbors of the control
The booking control is not alone on the page. A text link for the beginner list, a link back to the week, and sometimes a link that only explains the price sit near it. The ring on the plate is the space those neighbors do not enter. Draw the control first, at a size you would still trust with a thumb, then place the links outside the ring. If a link must sit close because the layout is tight, move the link to the next line rather than shaving the ring. A tight layout that eats the gap will be reopened the day someone taps the beginner list while aiming for the booking.
The control’s label is the action, the same words as the opening line or a shorter form of them. “Continue” is not the action. “Submit” is not the action. If the opening line says Thursday at 6, the control should not say “Go” and hope the line is still visible when the thumb arrives. On a phone the line can scroll away. The control has to carry the action by itself.
Disabled comes later, on the control plate. Here, while the palette is still unset, draw the control as available. A gray control on the layout plate hides the size problem inside the gray. Black on white shows whether the control is actually large enough and whether the label fits on one line inside it.
After the palette is allowed
When the three measures are written down, open the palette. Check the explanatory paragraph first, because it is ordinary text. Large text on the opening line can sit at a lower contrast bar. The paragraph cannot borrow that bar. If the pale color fails the paragraph, darken the paragraph or the ground under it. Do not darken the whole page until you have seen which element failed.
Then check that the booking control still separates from the quiet links. A palette that makes every link the same weight as the control has undone the ring. The ring can stay the right size and still fail if the color of the link and the color of the control are one color. Separation is a second look, after the size.
Write the result next to the four notes already on the sheet: the phone, the line length of the paragraph, the gap, and now the paragraph’s contrast after the palette. Someone picking up the file should not have to open the drawing tool to know which of the four moved. The control plate assumes this sheet exists. If the sheet is blank, that plate is early.