AI Skill Report Card
Evaluating Visual Hierarchy
Visual Hierarchy Evaluation Using CONTRAST System
Quick Start15 / 15
Input a design description or image, get scored evaluation:
Design: Homepage hero with:
- H1: "Welcome" (24px, #333)
- Subtitle: "Best products" (20px, #666)
- Body: "Lorem ipsum..." (16px, #999)
- CTA button: "Shop Now" (16px, white on #007ACC)
Output:
- Typography: 6/10 (1.2× jump insufficient, needs 1.5× minimum)
- Color: 4/10 (Body text #999 fails WCAG AA at 2.8:1)
- Weight: 8/10 (Good bold usage on CTA)
- Spatial: 7/10 (Adequate grouping)
- Figure-ground: 9/10 (Strong button contrast)
Recommendation▾
Add specific CONTRAST system definition/acronym breakdown early since it's referenced in description
Workflow14 / 15
Step 1: Typography Scale Analysis
- Measure size ratios between hierarchy levels
- Flag ratios below 1.5× as insufficient
- Recommend scale: 16px → 24px → 36px → 54px
Step 2: Color Contrast Audit
- Test all text/background combinations
- Body text: minimum 4.5:1 ratio (WCAG AA)
- Large text (18pt+): minimum 3:1 ratio
- Use WebAIM contrast checker values
Step 3: Weight Contrast Review
- Regular for body text
- Bold for emphasis (sparingly)
- Heavy/Black for primary headers only
Step 4: Spatial Relationships
- Related items: <8px spacing
- Separate sections: >24px spacing
- Consistent margin/padding systems
Step 5: Figure-Ground Assessment
- Background simplicity
- Subject isolation techniques
- Depth through layering
Recommendation▾
Include template scoring rubric or checklist format that can be copy-pasted for quick evaluation
Examples18 / 20
Example 1: Input: Newsletter layout with header (18px), subheads (16px), body (14px) Output: Typography 3/10 - Insufficient contrast. Header needs 21px minimum (1.5× from body). Subheads need 18px.
Example 2: Input: Dark theme app with white text on #2A2A2A background Output: Color 9/10 - Excellent 12.6:1 contrast ratio, exceeds WCAG AAA standards.
Example 3: Input: Product card with title, price, description crammed together Output: Spatial 4/10 - Elements competing. Add 16px between title/price, 8px between price/description.
Recommendation▾
Provide more concrete bad vs good visual examples with specific measurements rather than just descriptions
Best Practices
- Typography: Use modular scale (1.5×, 1.618×, or 2×)
- Color: Test with actual hex values, not assumptions
- Weight: Maximum 3 weights per design
- Spatial: Establish 8px baseline grid system
- Figure-ground: 60-30-10 color rule for balance
Common Pitfalls
- Using 1.2× or smaller typography jumps (creates muddy hierarchy)
- Trusting color perception over measured contrast ratios
- Overusing bold weights (destroys emphasis)
- Inconsistent spacing systems
- Busy backgrounds competing with content
- Applying only one contrast type instead of layering multiple