UI audits: reviewing usability, accessibility, and interface quality
A UI audit is a structured review of an existing website or application interface. It looks for problems in usability, accessibility, visual hierarchy, and consistency. The focus is the interface people encounter: typography, layout, navigation, controls, and forms.
UI and UX work overlap. An interface review can reveal important obstacles, but it does not replace research into the wider customer journey or establish legal compliance by itself. The scope and method of the audit should be clear.
What the review examines
The aim is to identify issues that make it harder to find information, read content, understand an action, or complete a task. Established guidance provides a basis for discussing those issues without relying only on visual preference.
1. Accessibility and WCAG
WCAG 2.2 provides criteria for web accessibility. Its four principles organize the questions a review asks:
- Perceivable: can people perceive the information? Review headings, text alternatives, contrast, and presentation.
- Operable: can people use the controls? Check keyboard access, focus visibility, and interaction.
- Understandable: are navigation, labels, instructions, and errors clear?
- Robust: does the implementation expose meaningful structure to browsers and assistive technology?
Automated checks can support this work, but manual testing is also needed. A limited sample review should not be described as proof that every page meets every criterion.
2. Responsive behavior and reflow
Review whether content remains usable when the viewport narrows or the page is enlarged. Reflow testing can include a 400% zoom scenario under the relevant WCAG conditions.
Look for clipped text, inaccessible controls, overlapping components, and unnecessary horizontal scrolling. Fixed widths and absolute positioning are common things to investigate, though the appropriate treatment depends on the content and the criterion's exceptions.
3. Color contrast
Check text against its actual background, including buttons, links, and form hints. For WCAG AA text contrast, the commonly applicable minimum ratios are:
| Text category | Minimum contrast ratio |
|---|---|
| Normal text | 4.5:1 |
| Large text under the criterion's definition | 3:1 |
These are not the only accessibility requirements. Components, states, and information communicated by color require their own review.
4. Typography and readability
Review font size, line spacing, line length, and heading structure. Design systems such as the U.S. Web Design System can provide useful reference points, but the actual content and audience still matter.
The original article suggested 16px body text, line height around 1.4–1.6, and roughly 60–80 characters per line as working design heuristics. Treat those as starting points to evaluate, not universal WCAG requirements. Text must remain usable when people change their display settings.
5. Layout and spacing
Consistent spacing helps communicate which elements belong together. Review the rhythm between headings, paragraphs, fields, and sections.
Look for crowded controls, arbitrary gaps, and components that follow different layout rules without a reason. A spacing system can make future changes more consistent, but it should support the content rather than force every section into an identical shape.
6. Navigation and breadcrumbs
Check whether labels describe destinations and whether the navigation reflects the way users understand the site. Breadcrumbs can explain a page's position in a hierarchy where that hierarchy is useful.
Review consistency between the navigation, page names, and URLs. A breadcrumb should help orientation, not simply reproduce technical routing details.
7. Forms and error messages
Forms are often where a useful visit becomes an inquiry or transaction. Review labels, instructions, validation, and the way errors are announced and corrected.
An error message should identify the problem and explain how to fix it. Where several errors exist, an error summary can help people reach the relevant fields. Client-side feedback can be helpful, but server-side validation remains necessary.
8. Interactive target size
Buttons, icons, checkboxes, and links should be practical to activate. Review both target size and spacing, particularly on touch screens.
The original article used a 48×48 target as a design guideline drawn from Material Design. That is not a universal CSS-pixel requirement for every web control. Evaluate the applicable accessibility criterion and the actual interaction instead of conflating different systems' units and recommendations.
9. Visual hierarchy
Visitors should be able to identify the main content, the primary action, and the relationship between sections. Size, contrast, placement, and reading order all contribute.
A visually prominent element should deserve that prominence. If every section demands equal attention, the page becomes harder to scan.
10. Consistency
Compare buttons, forms, navigation patterns, and component states across the site. Over time, projects can develop slightly different versions of the same interaction.
Document those differences and decide which are meaningful and which are accidental. Consistency helps people apply what they have already learned on another page.
What an audit should deliver
A useful report connects each finding with evidence, an explanation of its impact, and a proposed correction. A typical entry includes:
Issue
Description and evidence
Impact on the user
Relevant criterion or design guidance
Recommended correction
Priority and scopeScreenshots and reproduction steps help the development team verify the issue. Separate confirmed accessibility failures from broader design recommendations.
The result should be an actionable basis for improving the interface or planning a redesign. It cannot guarantee a conversion increase, but it can make the problems and the work needed to address them much clearer.
This article was created with AI assistance. The image was also generated with AI.