Where this sits in the track
b2 gave you the brief, b3 the exploration, b4 the drafted screens. You now have output - probably a lot of it - and the bottleneck has moved to judgement. This is the session that industrialises it. The five checks here are the same five the lab has been scoring since b1, but tonight you learn to run them by eye, in order, and to say the sentence that unblocks a review: "three specific things are broken, here they are, and here is the number."
Five checks, in this order 8 min live
Order matters, because each check makes the next one easier to see. Hierarchy first - if two things are shouting, everything else you notice is a symptom. Then type scale, then spacing rhythm: both are arithmetic, both are fast, and fixing them removes most of what people vaguely call "unpolished". Then contrast, which is the only check that is a legal standard in many markets. Then colour restraint, last, because counting hue families is meaningless until the other four are settled.
LiveThe sentence that ends the argument4 min▶
Reviews stall because both sides are stating preferences. The script gives you a form of words that is hard to argue with, because every clause is checkable:
"Hmm. It feels a bit cluttered and cheap. Can we make the header stronger and clean it up generally? Maybe a different blue."
"Three specific things. One: two elements are competing for first read - the AI banner is bolder than the title, so nothing wins. Two: the timestamp is 1.5:1 against white, which fails WCAG AA at 4.5:1 - that is a defect, not a taste call. Three: four hue families are on screen, and only one carries meaning. Fix those and I expect the 'cheap' feeling to disappear on its own."
The last clause matters. It offers a hypothesis rather than a verdict, which keeps the review collaborative - and in practice the vague complaint usually does disappear once the measurable failures are gone.
LiveWhat to cite when accessibility is called a preference4 min▶
Know the criteria by number. It changes the temperature of the conversation:
- SC 1.4.3 Contrast (Minimum), Level AA - text and images of text need at least 4.5:1, with 3:1 allowed for large text. Large means 18pt or 14pt bold, which W3C's own conversion (1pt = 1.333px) puts at roughly 24px and 18.5px; most tools, including this lab, implement the bold threshold as 18.66px. Either way, size and weight decide it, not the tag.
- SC 1.4.11 Non-text Contrast, Level AA - 3:1 for the visual information needed to identify UI components and states, and for meaningful graphics. This is the one that makes a pale button outline a bug.
- SC 1.4.6 Contrast (Enhanced), Level AAA - 7:1, and 4.5:1 for large text. Worth knowing when a client has an AAA commitment.
- SC 1.4.12 Text Spacing, Level AA - the layout must survive a user overriding line height to 1.5x the font size, and paragraph spacing to 2x. Generated layouts with hard-coded heights routinely break this.
- SC 2.5.8 Target Size (Minimum), Level AA - a 24x24 CSS px minimum for pointer targets, with exceptions. Denser than most people assume, so check before you argue for smaller.
One honest note on the newer thinking: APCA, a perceptually-based contrast algorithm, appears in WCAG 3 work and in some tools. WCAG 3 is a draft, not a standard - so design to WCAG 2.2 for anything you must defend, and treat APCA as extra insight rather than the requirement.
Self-studyThe AI-as-reviewer prompt - and where it lies4 min read▶
Models are genuinely useful reviewers if you constrain them to what they can see and force a structure. They are unreliable exactly where numbers are involved.
"Here is a screenshot of one screen. Review it against these five checks, in this order: (1) hierarchy - is there exactly one loudest element, and does the title step clearly above body text; (2) type scale - list every distinct text size you can see and say whether they look like one scale; (3) spacing - identify any group whose gaps look inconsistent; (4) contrast - flag every text element you suspect is below 4.5:1, and say you are estimating; (5) colour - count the hue families and say which carry meaning. For each check give a verdict, the specific element, and the smallest fix. Do not comment on anything else. Do not tell me it looks good."
- It hallucinates ratios. A model reading a screenshot will state "3.8:1" with total confidence. Treat any number it gives as a flag to verify, never as a measurement - use a real contrast checker or your inspector.
- It cannot read your tokens. It sees pixels, not variables, so it cannot tell you whether a value came from your system or was typed in by hand. That check lives in b6.
- It is agreeable by default. Without "do not tell me it looks good", you get praise. Ask for the strongest case against the design, then decide what survives.
- It is decent at the unmeasurable half - naming what a layout emphasises, spotting a missing empty state, catching copy that hedges. Use it there, then own the judgement yourself.
What to review once nothing is broken 6 min live
A 100 on the lab means nothing is measurably wrong. It says nothing about whether the work is right. Once the script is clean, your review time should go entirely to four questions a generator cannot answer for you - and this is where senior judgement earns its money.
Self-studyReviewing someone else's AI work without blame3 min read▶
When a colleague brings generated work, the failure is almost never their taste - it is the brief they gave. Reviewing the brief instead of the person is faster and lands better:
- Ask for the brief first. "What constraints did you give it?" Nine times out of ten the missing check was never asked for.
- Score, do not editorialise. Run the five checks in front of them. It teaches the standard while you review.
- Fix the constraint, regenerate. One rewritten brief usually beats twenty rounds of nudging - and it teaches the loop from b1.
- Praise the judgement, not the render. The valuable thing they did was choose; say that explicitly, or you train the team to value volume.
Diagnose before you touch anything ★ 12 min · everyone runs it
Same Cadence screen, same lab, new discipline. Do not touch a lever yet. Look at the screen for thirty seconds and write down your five verdicts by eye. Then open the scorecard and compare. This is the drill that turns the script into instinct - and the gap between your guess and the measurement is the most useful thing you will learn tonight.
Levers off. Write your five verdicts by eye first: how many things are shouting, how many sizes, what fails contrast, how many hue families.
Now read the rows. Most people underestimate the contrast failures badly - 1 of 19 elements passes here - and overestimate their spacing eye.
Turn on Contrast alone. Note the one row that stubbornly stays red, and say why in the language of Part 1.
Now use the checks as a fix order: hierarchy, scale, spacing, contrast, colour. Watch the score move without any taste decision being made.
Press Art-directed. Then look at the screen and ask the Part 2 questions. Notice how little the lab told you about whether this is good.
The 19-point instinct ★ 10 min · explore
The ladder again - 17 → 32 → 46 → 66 → 86 → 100 - and then the row that matters most in this session. From a perfect 100, turning on Add colour drops the score to 81. Three separate things break at once: a fourth hue family appears, two paddings leave the grid, and a yellow highlight puts yellow text on a yellow background at 1.5:1. Nobody set out to do harm. They set out to make it feel more alive.
Read the ladder rows as sessions: hierarchy (b1), scale and spacing (b4, b6), contrast (this one), one accent (b6, b7).
In the lab above, get to 100, then press Add colour and read all five rows. Name each of the three separate defects.
Notice what did NOT break: hierarchy and type scale held. Structural decisions survive decoration; colour decisions do not.
Write the one-sentence version for a stakeholder: "the badges cost us a hue family, two grid values, and one accessibility failure."
The five checks are not an academic exercise - they are the exact failures researchers find in AI prototypes. Nielsen Norman Group ran a heuristic evaluation of AI-generated prototypes against a real redesign brief in October 2025 and named the problems in almost the same words this session uses: a lack of visual hierarchy, poor colour contrast, and inconsistent margin spacing. Their earlier assessments were blunter still - in 2024 they found no design-specific AI tool in serious use and called the output "generic, seemingly templatized", and their 2025 follow-up concluded we are "still nowhere near the AI-powered design tools we've been promised". The tools have improved since; the failure modes have not changed, which is precisely why a scored review beats an opinion.
"Can we add a colour for it?" is the most expensive four seconds in a design review. Every new hue family needs a meaning, a token, a dark-mode value, a contrast-checked text pair, and a rule for when it does not apply. That is the real cost - the score drop is just the visible part. The counter-move is not refusal: it is "yes, if it means something. What state or category is it encoding?" Half the time the answer is nothing, and the request quietly dissolves.
Try it yourself - this week ◐ 30-40 min total
- Run the by-eye-then-measure drill on three real screens: two of yours, one from a product you admire. Record your guess and the measurement side by side for all five checks.
- Take the b4 Cadence draft you generated and review it with the AI-as-reviewer prompt from Part 1. Then verify every ratio it claimed with a real contrast checker and count how many it got wrong.
- Write your five-check script as a one-page review template you can paste into a comment. You will use it in b9's handoff and b10's capstone scoring.
- Find one screen in your product with three or more hue families. For each, write what it encodes. Delete the ones that encode nothing and see whether anyone notices.
Official sources covered
This session teaches the working core of the WCAG 2.2 criteria a designer applies daily, plus the review practice around them. The normative text lives with W3C and is linked below; conformance testing and certification stay with the official bodies. This page covers:
Three questions before you go 🎯 ◐ 90 seconds
1 · Why does the script check hierarchy before contrast?
Order is about diagnosis, not importance. With two elements shouting, every other complaint is a symptom - and several of them disappear once one element wins. Contrast is still the only check on the list that is a formal standard.
2 · An AI reviewer says a label is "3.8:1 against its background". What is the right response?
Models are useful at spotting suspects and unreliable at stating measurements. The flag is worth having; the number is not evidence until you measure it yourself. Quoting a hallucinated ratio in a review costs you credibility you need later.
3 · The anti-lever costs 19 points. Which three defects does it introduce at once?
Decoration rarely breaks one thing. The badges bring their own padding values and their own hues, and the highlight fails AA. Hierarchy and type scale hold, which is the useful lesson: structure survives decoration, colour decisions do not.