From c68187e9422edad085d5078669c3f75466a7a011 Mon Sep 17 00:00:00 2001 From: Josh at WLTechBlog Date: Tue, 9 Dec 2025 14:25:47 -0700 Subject: [PATCH] bump --- GRADIENT_CONTRAST_FIX.md | 50 ++++++++++++++++++++++++++++++++++++---- daemon/daemon.go | 25 +++++++++++++++++--- 2 files changed, 67 insertions(+), 8 deletions(-) diff --git a/GRADIENT_CONTRAST_FIX.md b/GRADIENT_CONTRAST_FIX.md index 90198ac..e765a6a 100644 --- a/GRADIENT_CONTRAST_FIX.md +++ b/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:** `` element with `color: blue` containing `` with `color: rgb(12, 90, 201)` +- **Reported:** Used the ``'s color +- **Reality:** The visible text uses the ``'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) diff --git a/daemon/daemon.go b/daemon/daemon.go index 6b5fd2e..07764b0 100644 --- a/daemon/daemon.go +++ b/daemon/daemon.go @@ -9298,9 +9298,28 @@ func (d *Daemon) checkContrast(tabID string, selector string, timeout int) (*Con } } - const fgColor = style.color; - const fontSize = style.fontSize; - const fontWeight = style.fontWeight; + // Get the actual text-bearing element for accurate color detection + // If the element has child elements with text, use the first visible child's color + 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;