bump

GRADIENT_CONTRAST_FIX.md

@@ -1,8 +1,8 @@
-# Gradient Contrast Detection Fix
+# Contrast Detection Fixes
 
-## Problem
+## Problems
 
-The contrast checking tool was reporting false positives for text on gradient backgrounds. Two specific issues were identified:
+The contrast checking tool had three issues that caused false positives and incorrect reporting:
 
 ### Issue 1: White-on-White False Positives
 **Example:** Vision Leadership sponsor page (https://visionleadership.org/sponsor-opportunities/)
@@ -18,13 +18,21 @@ After the initial fix, the tool became too aggressive:
 - **Reality:** Those elements were on light gray `rgb(252, 252, 252)` background
 - **Root Cause:** Gradient detection walked up the tree but didn't stop when it encountered solid backgrounds
 
-## Solution
+### Issue 3: Wrong Text Color for Elements with Child Spans
+The tool used parent element colors instead of actual visible text colors:
+- **Example:** `<a>` element with `color: blue` containing `<span>` with `color: rgb(12, 90, 201)`
+- **Reported:** Used the `<a>`'s color
+- **Reality:** The visible text uses the `<span>`'s color
+- **Root Cause:** Tool only checked the matched element's color, not child elements that contain the actual text
 
-Modified the gradient detection logic in `daemon/daemon.go` to:
+## Solutions
+
+Modified the contrast detection logic in `daemon/daemon.go` to:
 
 1. **Walk up the DOM tree** to find gradient backgrounds on parent elements
 2. **Stop at solid backgrounds** - if a solid background color is found before a gradient, use the solid color
 3. **Only apply gradients** when no solid background exists between the element and the gradient
+4. **Check child elements for text color** - if an element has visible child elements with text, use the first child's color instead of the parent's color
 
 ### Code Changes
 
@@ -126,8 +134,40 @@ After deploying the fix, test on:
 3. Restart the cremote daemon (deployment-specific process)
 4. Restart the MCP server or Augment extension to pick up changes
 
+#### 3. Enhanced Text Color Detection (Lines 9257-9322)
+
+**Before:** Always used the matched element's text color
+
+**After:**
+- Checks if the element has visible child elements with text
+- If child elements exist, uses the first child's color
+- This ensures we get the actual visible text color, not the parent container's color
+
+```javascript
+// Get the actual text-bearing element for accurate color detection
+let textElement = element;
+let textStyle = style;
+
+// Check if element has child elements (not just text nodes)
+const childElements = Array.from(element.children).filter(child => {
+    const childText = child.textContent.trim();
+    if (!childText) return false;
+    const childStyle = window.getComputedStyle(child);
+    return childStyle.display !== 'none' && childStyle.visibility !== 'hidden';
+});
+
+// If there are visible child elements with text, use the first one's color
+if (childElements.length > 0) {
+    textElement = childElements[0];
+    textStyle = window.getComputedStyle(textElement);
+}
+
+const fgColor = textStyle.color;
+```
+
 ## Files Modified
 
 - `daemon/daemon.go` - Lines 9152-9220 (gradient analysis function)
 - `daemon/daemon.go` - Lines 9305-9340 (background detection logic)
+- `daemon/daemon.go` - Lines 9257-9322 (text color detection enhancement)