refactor: dynamically adjust text color contrast based on background lightness using HSL and configurable thresholds.

Author: grantiguess

src/NodeCanvas.jsx

@@ -9898,7 +9898,7 @@ function NodeCanvas() {
                                         fontWeight: 'bold',
                                         color: isNodeGroup
                                           ? getTextColor(nodeGroupColor)
-                                          : (getTextColor(strokeColor) === '#262626' ? '#262626' : strokeColor),
+                                          : (hexToHsl(strokeColor).l > 50 ? getTextColor(strokeColor) : strokeColor),
                                         backgroundColor: 'transparent',
                                         border: 'none',
                                         outline: 'none',
@@ -9912,7 +9912,7 @@ function NodeCanvas() {
                                 <text x={labelX + labelWidth / 2} y={labelY + labelHeight * 0.7 - 2} fontFamily="EmOne, sans-serif" fontSize={fontSize}
                                   fill={isNodeGroup
                                     ? getTextColor(nodeGroupColor)
-                                    : (getTextColor(strokeColor) === '#262626' ? '#262626' : strokeColor)
+                                    : (hexToHsl(strokeColor).l > 50 ? getTextColor(strokeColor) : strokeColor)
                                   } fontWeight="bold" stroke={isNodeGroup ? "none" : "#bdb5b5"} strokeWidth={isNodeGroup ? 0 : strokeWidth} paintOrder="stroke fill" textAnchor="middle">{labelText}</text>
                               )}
                             </g>

src/utils/colorUtils.js

@@ -1,6 +1,5 @@
-/**
- * Shared color utility functions for Redstring
- */
+const LIGHTNESS_THRESHOLD = 42;
+const DARK_TEXT_LIGHTNESS = 16;
 
 // Helper function to convert CSS color names to hex
 export const cssColorToHex = (color) => {
@@ -133,11 +132,11 @@ export const getTextColor = (backgroundColor) => {
 
   const { h, s, l } = hexToHsl(backgroundColor);
 
-  // If background is bright (lightness > 35), use dark text with same hue
-  // Threshold 35% provides good contrast for this UI's specific style
-  if (l > 35) {
-    // Use "near black" for better legibility on light backgrounds, as requested
-    return '#262626';
+  // If background is bright, use dark text with same hue
+  if (l > LIGHTNESS_THRESHOLD) {
+    // Create a dark color with the same hue (preserving saturation) but very low lightness
+    // This creates a "near black" that matches the theme of the group/node
+    return hslToHex(h, s, DARK_TEXT_LIGHTNESS);
   } else {
     // Use light text for dark backgrounds
     return '#bdb5b5';