UI Audit Checklist: Check Your Interface in One Hour

Before you start (5 minutes)

Choose three screens: the first one new users see, the one used most often, and the one where money or data is committed.
Open them in a desktop browser with DevTools, and on a real phone.
Open the WebAIM Contrast Checker in a second tab.
Prepare a sheet with four columns: check, screen, pass or fail, note.
Sign in with a fresh test account, so you see the empty states.

Hierarchy and layout (10 minutes)

Check	How to test	Pass when
1. Primary action	Squint or blur a screenshot	Exactly one button stands out per screen
2. Page purpose	Show the screen to someone for five seconds	They can say what it is for
3. Reading order	Trace title, content, action with a finger	The path runs top to bottom without jumps
4. Alignment	Drag a vertical guide along the left edge	Titles, text, fields and buttons share edges
5. Spacing values	Inspect ten gaps in DevTools	Every value sits on your scale, for example 4, 8, 16, 24, 32
6. Grouping	Compare the gaps inside and between groups	Inside gaps are clearly smaller
7. Density	Count the distinct boxes, lines and shadows	Each one separates something that needs separating

Typography, colour and contrast (15 minutes)

Check	How to test	Pass when
8. Type sizes	List every font size on the three screens	Five or fewer
9. Weights	List every font weight	Two, at most three
10. Line length	Count the characters in a full line of body text	Roughly 50 to 75
11. Line height	Inspect body text	About 1.5 times the font size
12. Text contrast	Check each text and background pair	At least 4.5:1, or 3:1 for large text
13. Component contrast	Check input borders, icons and focus rings	At least 3:1 against what surrounds them
14. Colour alone	View the screen in greyscale	Errors, status and links are still recognisable
15. Palette	List the colours in use	One brand colour, one grey scale, fixed status colours
16. Zoom	Set browser zoom to 200 percent	Nothing is cut off or overlaps

Components, forms and states (15 minutes)

Check	How to test	Pass when
17. Buttons	Screenshot every button and compare	Three variants at most, with the same height and radius
18. Wording	List the labels of all primary buttons	The same action has the same name everywhere
19. Keyboard	Tab through the screen without a mouse	Every control is reachable and focus is always visible
20. Labels	Look at each form field while it holds a value	The label is still visible
21. Error message	Submit the form with a wrong value	The message appears at the field, in text, and says how to fix it
22. Kept input	Look at the other fields after that error	Nothing you typed was cleared
23. Empty state	Open a list in the fresh account	It explains what goes here and offers a first action
24. Loading	Throttle the network to slow 3G in DevTools	A skeleton or spinner appears, and the layout does not jump
25. Failure	Go offline and repeat an action	A readable message and a way to retry
26. Feedback	Save or delete something	A confirmation appears near the action

Mobile and touch (10 minutes)

Check	How to test	Pass when
27. Target size	Measure the smallest tappable element	At least 24 by 24 CSS pixels, ideally 44 or more on touch screens
28. Target spacing	Try to tap neighbouring icons with a thumb	No wrong hits in ten tries
29. Narrow width	Set the viewport to 320 CSS pixels	No sideways scrolling, nothing hidden
30. Hover	Use every feature on the phone	Nothing depends on hovering

Score and prioritise (5 minutes)

Count the fails, then sort them. A fail that blocks a task, such as an unreadable error or a button nobody can hit, goes to the top. A fail that only looks untidy goes below it. Fails that repeat on all three screens usually share one cause, such as a missing spacing scale, and one fix removes them all.

Blocks a task: fix this week.
Slows people down: fix this month.
Looks untidy: fix when you next touch that screen.
Run the checklist again after the fixes, and add a five-person user test when you can.

Common questions

Is a checklist audit enough, or do I need user testing?

A checklist finds faults you can see and measure, such as low contrast or inconsistent buttons. It cannot tell you whether people understand the product. Use the checklist to clear the obvious problems first, then watch five people try real tasks. The two methods find different things, and the checklist makes the test sessions more useful.

How often should I audit my UI?

Run the full list before each larger release and whenever support tickets about finding or understanding things start to rise. Between those, a ten-minute pass over contrast, spacing values and button variants on any new screen is enough to stop the product drifting back.