Blog Post

Visual Bugs: 12 Common Types and How to Detect Them

Q: How do you find visual bugs on a website?

Visual bugs require visual inspection because automated test suites do not verify appearance. The most effective approach combines manual review at key breakpoints (375px, 768px, 1440px) with automated tools: accessibility scanners for contrast and focus state issues, visual regression testing for unintended layout changes between builds, and AI-powered visual QA tools like OverlayQA for typography drift, spacing mismatches, and design token violations.

By OverlayQA Team. Published: June 5, 2026

Quick answer: Visual bugs are UI rendering defects that users see but automated tests miss. According to Stanford's Web Credibility Research, 75% of users judge a company's credibility by visual design alone. The 12 most common visual bugs are: font weight errors, line-height drift, color mismatches, padding discrepancies, alignment breaks, z-index conflicts, text overflow, responsive layout failures, missing interaction states, border-radius inconsistencies, image rendering problems, and dark mode failures.

What Is a Visual Bug?

A visual bug is any discrepancy between a designed UI and its rendered implementation that a user can see. The button uses Regular weight instead of Semi Bold. A card has 20px padding instead of 24px. A dropdown appears behind the page header. These are not functional failures. Users perceive them. Research by Lindgaard et al. (2006) found that users form aesthetic judgments about a website in 50 milliseconds. Visual bugs degrade that first impression before a user reads a single word.

Visual bugs differ from functional bugs in one critical way: automated test suites do not catch them. A unit test confirms that a button triggers an action. It does not confirm that the button renders at the correct size, color, and position. The National Institute of Standards and Technology (NIST) estimates that fixing a defect costs 5 to 10 times more for each development phase it goes undetected.

The 12 Most Common Visual Bugs

1. Font Weight and Size Errors

The design specifies Inter Semi Bold (600). The implementation renders Inter Regular (400). Typography bugs are the most frequent visual defect category because design tools and browsers use different text rendering engines.

2. Line-Height and Letter-Spacing Drift

Figma specifies line-height in absolute pixels (28px). CSS developers often use unitless ratios (1.5). On 16px text, line-height 1.5 resolves to 24px, not 28px. That 4px difference compounds across every paragraph line.

3. Color Value Mismatches

The design specifies #6B7280. The code uses #666666. Close enough to pass a quick visual check, different enough to break brand consistency across a full page.

4. Padding and Margin Discrepancies

A card uses 20px padding instead of the specified 24px. Spacing bugs are the most tedious to detect manually because they require measuring pixel values between nested containers.

5. Alignment and Grid Breaks

A form label sits 2px higher than its input field. Navigation items break out of the baseline grid. Cards in a row render at slightly different heights. On a full page, these create visual noise that makes the interface feel unpolished.

6. Z-Index Stacking Errors

A modal appears behind the page header. A tooltip gets clipped by the next section. Z-index bugs are high-severity because they directly block user interaction.

7. Text Overflow and Clipping

A heading looks perfect with placeholder text but wraps to three lines with real product names. Overflow bugs are invisible during development because developers test with short, predictable content.

8. Responsive Layout Failures

A three-column feature grid overlaps at 768px. Hero text overflows at 375px. According to StatCounter (2025), mobile accounts for over 59% of global web traffic. A layout that breaks below 768px is broken for the majority of users.

9. Missing Interaction States

No hover effect on clickable cards. No focus ring for keyboard users. No disabled state while the form processes. Missing focus states violate WCAG 2.1 Success Criterion 2.4.7 and can trigger legal compliance issues under the ADA, Section 508, and the European Accessibility Act.

10. Border-Radius and Shadow Inconsistencies

Cards use 8px border-radius in one section and 12px in another. Buttons alternate between 6px and 8px. Individually subtle. Across a full page, inconsistent radii make the interface feel assembled from mismatched parts.

11. Image Rendering Problems

A 1x resolution image looks blurry on retina displays. A product photo stretches because its container forces a different aspect ratio. Image bugs impact Core Web Vitals scores. Largest Contentful Paint (LCP) suffers when hero images are unoptimized.

12. Dark Mode Failures

Body text stays dark gray on a dark background. Box shadows become invisible. Contrast ratios that passed in light mode fail in dark mode. A site that only tests in light mode is untested for a growing share of users.

Why Visual Bugs Escape Testing

Four factors explain why visual bugs ship at a higher rate than functional bugs. Unit and integration tests verify behavior, not appearance. Code review happens in a diff viewer, not a browser. Design specs are interpreted, not enforced. And cross-device rendering differences mean a layout can look correct on the developer's machine and broken on a user's device.

How to Detect Visual Bugs Before Shipping

OverlayQA combines AI visual analysis, accessibility auditing, and design token inspection in a single Chrome extension. It detects typography drift, spacing mismatches, color errors, missing interaction states, responsive breakages, and WCAG violations against any live URL. Issues export to Jira, Linear, Notion, Asana, Trello, and Slack with CSS selectors, computed values, screenshots, and element metadata attached. Install OverlayQA free from the Chrome Web Store.

Frequently Asked Questions

What is a visual bug?

A visual bug is a discrepancy between a designed user interface and its rendered implementation. Font weights, colors, spacing, layout, and interaction states can all deviate from the design spec without affecting functionality. Stanford's Web Credibility Research found that 75% of users judge credibility by visual design.

What are the most common visual bugs?

The 12 most common visual bugs are: font weight and size errors, line-height and letter-spacing drift, color value mismatches, padding and margin discrepancies, alignment and grid breaks, z-index stacking errors, text overflow and clipping, responsive layout failures, missing interaction states, border-radius and shadow inconsistencies, image rendering problems, and dark mode failures.

How do you find visual bugs on a website?

Combine manual review at key breakpoints (375px, 768px, 1440px) with automated tools: accessibility scanners for contrast and focus state issues, visual regression testing for layout changes between builds, and AI-powered visual QA tools like OverlayQA for typography drift, spacing mismatches, and design token violations.

What is the difference between a visual bug and a functional bug?

A functional bug prevents a feature from working. A visual bug affects how a feature looks without breaking its behavior. A button that does not submit a form is a functional bug. A button that submits correctly but renders at the wrong size or color is a visual bug. Functional bugs are caught by automated tests. Visual bugs require visual inspection or AI-powered detection.