awesome-copilot/skills/web-design-reviewer/references/visual-checklist.md

Visual Inspection Checklist

This document is a comprehensive checklist of items to verify during web design visual inspection.

---

1. Layout Verification

Structural Integrity

• Header is correctly fixed/positioned at the top of the screen
• Footer is positioned at the bottom of the screen or end of content
• Main content area is center-aligned with appropriate width
• Sidebar (if present) is positioned correctly
• Navigation is displayed in the intended position

Overflow

• Horizontal scrollbar is not unintentionally displayed
• Content does not overflow from parent elements
• Images fit within parent containers
• Tables do not exceed container width
• Code blocks wrap or scroll appropriately

Alignment

• Grid items are evenly distributed
• Flex item alignment is correct
• Text alignment (left/center/right) is consistent
• Icons and text are vertically aligned
• Form labels and input fields are correctly positioned

---

2. Typography Verification

Readability

• Body text font size is sufficient (minimum 16px recommended)
• Line height is appropriate (1.5-1.8 recommended)
• Characters per line is appropriate (40-80 characters recommended)
• Spacing between paragraphs is sufficient
• Heading size hierarchy is clear

Text Handling

• Long words wrap appropriately
• URLs and code are handled properly
• No text clipping occurs
• Ellipsis (...) displays correctly
• Language-specific line breaking rules work correctly

Fonts

• Web fonts load correctly
• Fallback fonts are appropriate
• Font weights are as intended
• Special characters and emoji display correctly

---

3. Color & Contrast Verification

Accessibility (WCAG Standards)

• Body text: Contrast ratio 4.5:1 or higher (AA)
• Large text (18px+ bold or 24px+): 3:1 or higher
• Interactive element borders: 3:1 or higher
• Focus indicators: Sufficient contrast with background

Color Consistency

• Brand colors are unified
• Link colors are consistent
• Error state red is unified
• Success state green is unified
• Hover/active state colors are appropriate

Color Vision Diversity

• Information conveyed by shape and text, not just color
• Charts and diagrams consider color vision diversity
• Error messages don't rely solely on color

---

4. Responsive Verification

Mobile (~640px)

• Content fits within screen width
• Touch targets are 44x44px or larger
• Text is readable size
• No horizontal scrolling occurs
• Navigation is mobile-friendly (hamburger menu, etc.)
• Form inputs are easy to use

Tablet (641px~1024px)

• Layout is optimized for tablet
• Two-column layouts display appropriately
• Image sizes are appropriate
• Sidebar show/hide is appropriate

Desktop (1025px~)

• Maximum width is set and doesn't break on extra-large screens
• Spacing is sufficient
• Multi-column layouts function correctly
• Hover states are implemented

Breakpoint Transitions

• Layout transitions smoothly when screen size changes
• Layout doesn't break at intermediate sizes
• No content disappears or duplicates

---

5. Interactive Element Verification

Buttons

• Default state is clear
• Hover state exists (desktop)
• Focus state is visually clear
• Active (pressed) state exists
• Disabled state is distinguishable
• Loading state (if applicable)

Links

• Links are visually identifiable
• Visited links are distinguishable (if needed)
• Hover state exists
• Focus state is clear

Form Elements

• Input field boundaries are clear
• Placeholder text contrast is appropriate
• Visual feedback on focus
• Error state display
• Required field indication
• Dropdowns function correctly

---

6. Images & Media Verification

Images

• Images display at appropriate size
• Aspect ratio is maintained
• High resolution display support (@2x)
• Display when image fails to load
• Lazy loading behavior works

Video & Embeds

• Videos fit within containers
• Aspect ratio is maintained
• Embedded content is responsive
• iframes don't overflow

---

7. Accessibility Verification

Keyboard Navigation

• All interactive elements accessible via Tab key
• Focus order is logical
• Focus traps are appropriate (modals, etc.)
• Skip to content link exists

Screen Reader Support

• Images have alt text
• Forms have labels
• ARIA labels are appropriately set
• Heading hierarchy is correct (h1→h2→h3...)

Motion

• Animations are not excessive
• prefers-reduced-motion is supported (if possible)

---

8. Performance-related Visual Issues

Loading

• Font FOUT/FOIT is minimal
• No layout shift (CLS) occurs
• No jumping when images load
• Skeleton screens are appropriate (if applicable)

Animation

• Animations are smooth (60fps)
• No performance issues when scrolling
• Transitions are natural

---

Priority Matrix

Priority	Category	Examples
P0 (Critical)	Functionality breaking	Complete element overlap, content disappearance
P1 (High)	Serious UX issues	Unreadable text, inoperable buttons
P2 (Medium)	Moderate issues	Alignment issues, spacing inconsistencies
P3 (Low)	Minor issues	Slight positioning differences, minor color variations

---

Verification Tools

Browser DevTools

• Elements panel: DOM and style inspection
• Lighthouse: Performance and accessibility audits
• Device toolbar: Responsive testing

Accessibility Tools

• axe DevTools
• WAVE
• Color Contrast Analyzer

Automation Tools

• Playwright (screenshot comparison)
• Percy / Chromatic (Visual Regression Testing)