Website QA Checklist for Visual Review

You’ve spent weeks building and designing a website. Everything looks perfect on your screen. Then a client opens it on their tablet and the hero image overlaps the navigation. A customer on Firefox sees broken form styling. Someone on a 4K monitor notices the layout stretching awkwardly.

A website QA checklist prevents these moments. It’s a systematic pass through every visual element before launch so you catch problems while they’re cheap to fix — not after real users find them.

Here’s the checklist, broken into categories you can work through page by page.

Layout and structure

Start with the big picture. These issues affect the overall page structure and are often the most visible to users.

• Page width — Content stays within the max-width container on ultra-wide screens. No horizontal scrollbar appears at any viewport.
• Section spacing — Consistent vertical spacing between sections. Check that padding and margins follow the design system’s spacing scale.
• Grid alignment — Multi-column layouts align properly. Cards in a row are the same height. Gutters are consistent.
• Content overflow — No text or images break out of their containers. Check with both short and long content.
• Z-index stacking — Dropdown menus, modals, and sticky headers layer correctly. Nothing hides behind another element unexpectedly.
• Empty states — Pages that could have no data (search results, filtered lists) show appropriate empty-state messaging instead of blank space.

Typography

Typography bugs are subtle but they erode trust. Inconsistent fonts or sizes make a site feel unpolished.

• Font loading — Custom fonts load correctly. No flash of unstyled text (FOUT) or invisible text (FOIT) that lingers too long.
• Heading hierarchy — H1 through H4 are used in order and styled distinctly. Each page has exactly one H1.
• Line length — Body text doesn’t exceed 75 characters per line on desktop. Overly wide text blocks are hard to read.
• Line height and spacing — Paragraph spacing, line height, and letter spacing match the design spec.
• Text truncation — Long titles, names, or descriptions truncate gracefully with ellipsis or wrapping, not overflow.
• Special characters — Curly quotes, em dashes, and accented characters render correctly. Check any multilingual content.

Images and media

Broken or poorly optimized images are the fastest way to make a site look unprofessional.

• Image loading — All images load successfully. No broken image icons. Check on a throttled connection to simulate slower networks.
• Alt text — Every meaningful image has descriptive alt text. Decorative images use empty alt attributes.
• Aspect ratios — Images maintain their intended aspect ratio. No stretching or squashing, even with dynamic content.
• Responsive images — Images scale appropriately on mobile. Large hero images don’t download at full resolution on small screens.
• Video embeds — Embedded videos load, play, and maintain their aspect ratio across viewports.
• Favicons — Favicon appears correctly in browser tabs, bookmarks, and mobile home screens.

Navigation and interaction

Users interact with these elements constantly, so bugs here cause immediate frustration.

• Links — Every link goes to the right destination. No 404s. External links open in new tabs.
• Hover and focus states — Buttons, links, and interactive elements have visible hover and focus styles. Critical for keyboard navigation.
• Mobile menu — Hamburger menu opens and closes smoothly. All navigation items are accessible. The menu doesn’t persist when navigating to a new page.
• Scroll behavior — Smooth scrolling works for anchor links. Sticky headers don’t cover content when jumping to anchored sections.
• Form elements — Input fields, dropdowns, checkboxes, and radio buttons are styled consistently. Placeholder text is legible.
• Form validation — Error states are visually clear. Success messages appear after form submission. Required field indicators are visible.

Responsive design

Test at real breakpoints, not just by slowly dragging your browser window. Common breakpoints to check: 320px, 375px, 768px, 1024px, 1280px, and 1440px.

• Breakpoint transitions — Layout shifts between breakpoints are smooth. No awkward “in-between” states where elements overlap or create excessive whitespace.
• Touch targets — Buttons and links on mobile are at least 44x44px. Tightly grouped links don’t cause accidental taps.
• Text readability — Font sizes are large enough on mobile (16px minimum for body text). No need for pinch-to-zoom to read content.
• Horizontal scroll — No horizontal scrolling on any mobile viewport. Often caused by elements with fixed widths or overflow.
• Orientation — The layout works in both portrait and landscape on tablets and phones.

Color and contrast

These checks impact both aesthetics and accessibility.

• Contrast ratios — Text meets WCAG AA standards: 4.5:1 for normal text, 3:1 for large text. Use a contrast checker tool for verification.
• Color consistency — Brand colors are consistent across all pages. Check that hover states, link colors, and accent colors match the design system.
• Dark backgrounds — Text on dark sections or images is legible. If text overlays images, there’s a sufficient overlay or text shadow.
• Print styles — If the site needs to be printable, verify that print stylesheets hide navigation and use readable colors.

Cross-browser testing

Even in 2026, browsers render things differently. Test the most common ones.

• Chrome — Your primary development browser. Baseline check.
• Firefox — Often reveals different default styling for form elements and scrollbars.
• Safari — Known for unique rendering quirks, especially with flexbox, position: sticky, and date inputs.
• Edge — Generally matches Chrome, but worth a quick pass for enterprise users.
• Mobile Safari (iOS) — Viewport handling, fixed positioning, and input zoom can behave differently than desktop Safari.
• Chrome (Android) — Check text rendering and touch interactions.

How to run your visual QA process

Having the checklist is step one. Here’s how to use it efficiently:

Screenshot and annotate issues

As you work through the checklist, capture screenshots of every bug you find. Tools like Reviewer let you annotate directly on the screenshot — circle a misaligned element, draw an arrow to a broken layout, or drop a pin with a description. This makes bug reports unambiguous for the developer fixing them.

One page at a time

Don’t try to QA the entire site in one chaotic pass. Work through one page at a time, running through the full checklist on each. Start with the homepage, then key landing pages, then secondary pages.

Test with real content

Lorem ipsum hides content-related bugs. Test with actual copy, real customer names (including long ones), and production images. Edge cases in real data cause the bugs users actually encounter.

Log issues with context

For each issue, record: the page URL, the browser and device, a screenshot with annotation, and what the expected behavior should be. A visual feedback tool makes this documentation nearly automatic.

After the QA pass

Once you’ve worked through this website QA checklist and the development team has addressed the issues, do a final verification pass to confirm fixes. Keep the checklist for future launches — you’ll refine it over time as you learn which bugs recur in your workflow.

Ready to make your visual QA process faster? Try Reviewer to annotate screenshots and share bug reports with your team in one click.