english/.opencode/skills/frontend-design/references/technical-accessibility.md

Accessibility Checks

WCAG compliance and accessibility guidelines for generated assets.

Text Overlay Readability

Color Contrast Ratios

• WCAG AA: 4.5:1 for normal text, 3:1 for large text
• WCAG AAA: 7:1 for normal text, 4.5:1 for large text

Testing Requirements

• Test across image variations
• Consider adding gradient overlays in code
• Add text shadows for increased legibility

Alt Text Guidelines

• Describe the asset's purpose and mood
• Don't repeat visible text
• Keep concise (150 characters max)

CSS Techniques for Accessibility

Gradient Overlay for Text Readability

.hero {
  position: relative;
  background-image: url('hero.webp');
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.3) 0%,
    rgba(0,0,0,0.6) 100%
  );
}

Text Shadow for Contrast

.hero-text {
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

Ensure Minimum Contrast

.hero-cta {
  background: var(--color-primary-600);
  color: white; /* Ensure 4.5:1 contrast */
}

Integration Testing Analysis

Analyze how asset works with UI elements:

python scripts/gemini_batch_process.py \
  --files docs/assets/hero-with-text-overlay.png \
  --task analyze \
  --prompt "Analyze this design asset with UI elements overlaid:

1. Text Readability: Can all text be read clearly?
2. Contrast Issues: Identify any WCAG violations
3. Visual Hierarchy: Do buttons and CTAs stand out?
4. Spacing Problems: Any crowding or poor breathing room?
5. Responsive Concerns: Will this work on mobile at 9:16?

Provide specific recommendations for adjustments." \
  --output docs/assets/integration-analysis.md \
  --model gemini-2.5-flash

Next.js Integration Example

// app/components/Hero.tsx
import Image from 'next/image'

export function Hero() {
  return (
    <section className="relative h-screen">
      {/* Background image with optimization */}
      <Image
        src="/assets/hero-desktop.webp"
        alt="Minimalist desert landscape"
        fill
        priority
        quality={85}
        className="object-cover"
        sizes="100vw"
      />

      {/* Gradient overlay for text readability */}
      <div className="absolute inset-0 bg-gradient-to-b from-black/30 to-black/60" />

      {/* Content */}
      <div className="relative z-10 flex h-full items-center justify-center">
        <h1 className="text-6xl font-bold text-white drop-shadow-lg">
          Your Headline
        </h1>
      </div>
    </section>
  )
}

Common Issues

Issue: Poor Text Overlay Readability

Symptoms: Text hard to read over generated background Solutions:

• Add CSS gradient overlay (see above)
• Regenerate with "clean composition for text overlay" in prompt
• Use darker/lighter areas strategically
• Add text shadows or backdrop-blur