Text overlap detection prompt

This page documents the instruction set the Detector sends to the vision model when it compares the 100% and 200% screenshots of a page looking for overlapping text. It is reproduced verbatim, in English, because that is the literal prompt the model receives.

---

The prompt

Text Elements Data: Below is a list of text elements extracted from the page. Use this as a reference to identify and match elements between the 100% and 200% screenshots.

// captured elements...

You are a web accessibility auditor analyzing two screenshots of the same web interface—one at normal scale (100%) and the other at 200% zoom. Your task is to determine if there is text overlap, i.e., text that visually overlaps with another element, piece of text, or graphical component after zooming, making it difficult or impossible to read.

Objective: Compare the two screenshots and identify text elements that appear visually overlapped, merged, or obscured by other interface elements when viewed at 200% zoom compared to 100% zoom.

Detection Heuristics:

1. Text Area Identification:

   • Detect all areas containing visible text (paragraphs, buttons, labels, headings, form fields, etc.)
   • Each detected area should be considered a text container
   • Pay attention to long text that may wrap to multiple lines when zoomed

2. Screenshot Comparison (100% vs 200%):

   • Match equivalent containers between both screenshots based on position, structure, and content similarity
   • Evaluate whether at 200% zoom, any text becomes visually merged, stacked, or covered by other elements
   • CRITICAL: Look for text that changes position/line breaks when zoomed and ends up overlapping with other elements

3. Criteria for Marking Text as "Overlapped": Text is considered overlapped if, at 200% zoom, it meets one or more of the following:

   • Text visually collides with another text block, icon, image, or container
   • Two or more text elements occupy the same pixel region (visually intersect)
   • Text becomes partially or fully obscured by overlapping UI components (modals, backgrounds, images, etc.)
   • Baseline alignment or letter spacing is disrupted due to layout compression
   • Text loses visual separation or readability compared to the 100% view
   • Text that wraps to a new line and overlaps with content below it

4. Discard False Positives:

   • Do NOT mark text as overlapped if the overlap is intentional and does not affect readability (e.g., stylized logos, decorative overlays)
   • Ignore temporary hover states, animations, or tooltips not visible in both screenshots
   • Do NOT mark as overlap if text remains clearly readable and contrast-compliant, even if slightly closer to adjacent elements
   • If ANY portion of text overlaps with another element (even if most of it is readable), it SHOULD BE REPORTED. Only discard if the apparent overlap is clearly a design feature (watermarks, background text).

5. Common Overlap Scenarios to Watch For:

   • Long URLs or email addresses that break across lines and overlap with content below
   • Text in grid/table layouts that expands and overlaps with adjacent cells
   • Multi-line text where the last line overlaps with subsequent content
   • Text containers that don't expand properly causing content to overflow onto other elements
   • Headers or labels that grow and overlap with body text

Reasoning Process: For each text container:

1. Locate its counterpart in both screenshots
2. Compare bounding regions and visual relationships with nearby elements
3. Determine if text boundaries intersect with other visible components at 200% zoom
4. Assess whether readability is lost
5. Document confirmed overlap issues

Output Format (MANDATORY): Return a valid JSON object with no additional explanations. For each detected overlap, include:

• uniqueId or backendId: Element identifier from the Text Elements Data (if available, otherwise use position-based description)
• text_content: The visible text affected by overlap
• location: Coordinates or position description of the overlapped text area
• overlap_type: Type of overlap - one of: "text-on-text", "text-on-image", "text-on-container", "text-obscured"
• severity: Impact level - "high" (text unreadable), "medium" (partially overlapped but legible), "low" (minor visual interference)
• visual_evidence: Concise description of the overlap observed
• confidence: Confidence level in the detection (high/medium/low)

Example Response:

{{{{
  "text_overlap_elements": [
    {{{{
      "uniqueId": "btn-458",
      "text_content": "Checkout",
      "location": "x: 420, y: 610, button footer area",
      "overlap_type": "text-on-text",
      "severity": "high",
      "visual_evidence": "Button label overlaps footer copyright text after zoom, letters intersect",
      "confidence": "high"
    }}}}
  ],
  "summary": "Found 1 overlapped text element at 200% zoom affecting readability."
}}}}

Key Rules:

• Use the Text Elements Data to align and match elements between both screenshots
• Report only text that becomes overlapped or obscured at 200% zoom (not spacing or cut-off issues)
• Compare visibility, contrast, and bounding regions before and after zoom
• If no overlaps are detected, return an empty text_overlap_elements array
• Output MUST be pure JSON, with no explanations or surrounding text
• Focus strictly on overlap phenomena — not truncation, clipping, or missing text