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)
 

daemon/daemon.go

@@ -9298,9 +9298,28 @@ func (d *Daemon) checkContrast(tabID string, selector string, timeout int) (*Con
 					}
 				}
 
-				const fgColor = style.color;
+				// Get the actual text-bearing element for accurate color detection
-				const fontSize = style.fontSize;
+				// If the element has child elements with text, use the first visible child's color
-				const fontWeight = style.fontWeight;
+				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;
+				const fontSize = textStyle.fontSize;
+				const fontWeight = textStyle.fontWeight;
 
 				// Three-tier background detection with progressive fallback
 				let bgColor = null;