diff --git a/assets/css/udoit4-theme.css b/assets/css/udoit4-theme.css
index d3ff6d2a1..d358ad003 100644
--- a/assets/css/udoit4-theme.css
+++ b/assets/css/udoit4-theme.css
@@ -814,6 +814,7 @@ input[type="color"] {
   height: 100%;
   border-radius: 8px;
   border: 2px solid var(--primary-color);
+  background-color: var(--background-color);
 
   &:focus {
     outline: 2px solid var(--focus-color);
@@ -828,6 +829,15 @@ input[type="color"] {
   }
 }
 
+.gradient-row {
+  margin-bottom: 0.75em;
+}
+
+.gradient-note {
+  font-style: italic;
+  color: #666;
+}
+
 .icon-sm {
   width: 16px;
   height: 16px;
diff --git a/assets/js/Components/Forms/ContrastForm.js b/assets/js/Components/Forms/ContrastForm.js
index 064211839..bfbc39cb0 100644
--- a/assets/js/Components/Forms/ContrastForm.js
+++ b/assets/js/Components/Forms/ContrastForm.js
@@ -1,6 +1,8 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import DarkIcon from '../Icons/DarkIcon'
 import LightIcon from '../Icons/LightIcon'
+import CheckIcon from '../Icons/CheckIcon'
+import CloseIcon from '../Icons/CloseIcon'
 import SeverityIssueIcon from '../Icons/SeverityIssueIcon'
 import FixedIcon from '../Icons/FixedIcon'
 import ResolvedIcon from '../Icons/ResolvedIcon'
@@ -9,145 +11,266 @@ import * as Html from '../../Services/Html'
 import * as Contrast from '../../Services/Contrast'
 
 export default function ContrastForm({
-  t,
+  t, 
   settings,
   activeIssue,
   isDisabled,
   handleActiveIssue,
   handleIssueSave,
   markAsReviewed,
-  setMarkAsReviewed
 }) {
+  // Extract color strings from gradients
+  const extractColors = (gradientString) => {
+    const colorRegex = /#(?:[0-9a-fA-F]{3,8})\b|(?:rgba?|hsla?)\([^)]*\)/g
+    return gradientString.match(colorRegex) || []
+  }
 
-  const getBackgroundColor = () => {
-    const issue = activeIssue
-    const metadata = (issue.metadata) ? JSON.parse(issue.metadata) : {}
+  // Get all background colors (including gradients)
+  const getBackgroundColors = () => {
     const html = Html.getIssueHtml(activeIssue)
-    const element = Html.toElement(html)
-
-    if (element?.style?.backgroundColor) {
-      return Contrast.standardizeColor(element.style.backgroundColor)
+    let element = Html.toElement(html)
+    if (!element) return []
+  
+    let tempBackgroundColors = []
+    let current = element
+    let rawStyle = ''
+    let bgMatch = null
+  
+    // Traverse up the DOM to find the first background(-color|-image)
+    while (current) {
+      rawStyle = current.getAttribute && current.getAttribute('style') || ''
+      bgMatch = rawStyle.match(/background(-color|-image)?:\s*([^;]+);?/i)
+      if (bgMatch) break
+      current = current.parentElement
     }
-    else {
-      return (metadata.backgroundColor) ? Contrast.standardizeColor(metadata.backgroundColor) : settings.backgroundColor
+  
+    if (bgMatch) {
+      const styleValue = bgMatch[2]
+      const colors = extractColors(styleValue)
+      colors.forEach(color => {
+        const hsl = Contrast.toHSL(color)
+        if (hsl) {
+          tempBackgroundColors.push({
+            originalString: styleValue,
+            originalColorString: color,
+            hsl
+          })
+        }
+      })
+    }
+    if (tempBackgroundColors.length === 0) {
+      tempBackgroundColors.push({
+        originalString: '',
+        originalColorString: settings.backgroundColor,
+        hsl: Contrast.toHSL(settings.backgroundColor)
+      })
     }
+    return tempBackgroundColors
   }
 
+  // Get initial text color
   const getTextColor = () => {
-    const issue = activeIssue
-    const metadata = (issue.metadata) ? JSON.parse(issue.metadata) : {}
-    const html = Html.getIssueHtml(activeIssue)
-    const element = Html.toElement(html)
+    const metadata = activeIssue.metadata ? JSON.parse(activeIssue.metadata) : {};
+    const html = Html.getIssueHtml(activeIssue);
+    const element = Html.toElement(html);
 
-    if (element.style.color) {
-      return Contrast.standardizeColor(element.style.color)
+    let colorEl = element;
+    if (metadata.textColorXpath && Html.findElementWithXpath) {
+      const found = Html.findElementWithXpath(element, metadata.textColorXpath);
+      if (found) colorEl = found;
     }
-    else {
-      return (metadata.color) ? Contrast.standardizeColor(metadata.color) : settings.textColor
+
+    if (colorEl && colorEl.style && colorEl.style.color) {
+      return Contrast.toHSL(colorEl.style.color);
     }
+    return Contrast.toHSL(settings.textColor);
   }
 
-  const initialBackgroundColor = getBackgroundColor()
-  const initialTextColor = getTextColor()
+  // Heading tags for contrast threshold
   const headingTags = ["H1", "H2", "H3", "H4", "H5", "H6"]
 
-  const [backgroundColor, setBackgroundColor] = useState(initialBackgroundColor)
-  const [textColor, setTextColor] = useState(initialTextColor)
+  // State
+  const [originalBgColors, setOriginalBgColors] = useState([])
+  const [currentBgColors, setCurrentBgColors] = useState([])
+  const [textColor, setTextColor] = useState(null)
   const [contrastRatio, setContrastRatio] = useState(null)
   const [ratioIsValid, setRatioIsValid] = useState(false)
-  
-  const isValidHexColor = (color) => {
-    const hexColorPattern = /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/
-    let outcome = hexColorPattern.test(color)
-    return outcome
-  }
+  const [autoAdjustError, setAutoAdjustError] = useState(false)
+  const [showAllColors, setShowAllColors] = useState(false)
 
-  const processHtml = (html) => {
-    let element = Html.toElement(html)
+  // Generate updated HTML with new colors
+  const processHtml = (html, bgColors) => {
+    let element = Html.toElement(html);
+    if (bgColors.length > 1) {
+      let gradientHtml = originalBgColors[0].originalString;
+      originalBgColors.forEach((bg, idx) => {
+        gradientHtml = gradientHtml.replace(bg.originalColorString, Contrast.hslToHex(bgColors[idx]));
+      });
+      element.style.background = gradientHtml;
+      element.style.backgroundColor = '';
+    } else if (bgColors.length === 1) {
+      element.style.backgroundColor = Contrast.hslToHex(bgColors[0]);
+    } else {
+      element.style.background = '';
+    }
 
-    element.style.backgroundColor = Contrast.convertShortenedHex(backgroundColor)
-    element.style.color = Contrast.convertShortenedHex(textColor)
+    // Set text color on the correct element
+    let textColorXpath = null;
+    try {
+      const metadata = activeIssue.metadata ? JSON.parse(activeIssue.metadata) : {};
+      textColorXpath = metadata.textColorXpath;
+    } catch (e) {}
+    let textEl = element;
+    try {
+      const metadata = activeIssue.metadata ? JSON.parse(activeIssue.metadata) : {};
+      if (metadata.textColorXpath && Html.findElementWithXpath) {
+        const found = Html.findElementWithXpath(element, metadata.textColorXpath);
+        if (found) textEl = found;
+      }
+    } catch (e) {}
+    textEl.style.color = Contrast.hslToHex(textColor);
 
     return Html.toString(element)
   }
 
+  // Update preview and contrast ratio
   const updatePreview = () => {
-    let issue = activeIssue
     const html = Html.getIssueHtml(activeIssue)
-    let contrastRatio = Contrast.contrastRatio(backgroundColor, textColor)
-    let tagName = Html.toElement(html).tagName
-    let ratioIsValid = ratioIsValid
-    
-    if(headingTags.includes(tagName)) {
-      ratioIsValid = (contrastRatio >= 3)
-    } else {
-      ratioIsValid = (contrastRatio >= 4.5)
+    let ratio = 1
+    if (currentBgColors.length > 0 && textColor) {
+      const ratios = currentBgColors.map(bg => Contrast.contrastRatio(
+        Contrast.hslToHex(bg), Contrast.hslToHex(textColor)
+      ))
+      ratio = Math.min(...ratios)
+    }
+    setContrastRatio(ratio)
+    setRatioIsValid(ratio >= minRatio)
+  
+    const newHtml = processHtml(html, currentBgColors)
+    if (activeIssue.newHtml !== newHtml) {
+      activeIssue.newHtml = newHtml
+      handleActiveIssue(activeIssue)
     }
-
-    setContrastRatio(contrastRatio)
-    setRatioIsValid(ratioIsValid)
-
-    issue.newHtml = processHtml(html)
-    handleActiveIssue(issue)
   }
 
+  // Handlers
   const updateText = (event) => {
     const value = event.target.value
-    if(!isValidHexColor(value)) {
-      return
-    }
-    setTextColor(value)
+    const hsl = Contrast.toHSL(value)
+    if (hsl) setTextColor(hsl)
   }
 
-  const updateBackground = (event) => {
-    const value = event.target.value
-    if(!isValidHexColor(value)) {
-      return
-    }
-    setBackgroundColor(value)
-  }
+  // On issue change, extract from original HTML
+  useEffect(() => {
+    const info = getBackgroundColors()
+    setOriginalBgColors(info)
+    setCurrentBgColors(info.map(bg => bg.hsl))
+    setTextColor(getTextColor())
+    setAutoAdjustError(false)
+    setShowAllColors(false)
+  }, [activeIssue])
 
-  const handleLightenText = () => {
-    const newColor = Contrast.changehue(textColor, 'lighten')
-    setTextColor(newColor)
+  const updateBackgroundColor = (idx, value) => {
+    const hsl = Contrast.toHSL(value)
+    setCurrentBgColors(colors =>
+      colors.map((c, i) => i === idx ? hsl : c)
+    )
   }
 
-  const handleDarkenText = () => {
-    const newColor = Contrast.changehue(textColor, 'darken')
-    setTextColor(newColor)
-  }
+  const handleLightenText = () => setTextColor(Contrast.changeLuminance(textColor, 'lighten'))
+  const handleDarkenText = () => setTextColor(Contrast.changeLuminance(textColor, 'darken'))
 
-  const handleLightenBackground = () => {
-    const newColor = Contrast.changehue(backgroundColor, 'lighten')
-    setBackgroundColor(newColor)
+  const handleLightenBackground = idx => {
+    setCurrentBgColors(colors =>
+      colors.map((c, i) => i === idx ? Contrast.changeLuminance(c, 'lighten') : c)
+    )
   }
-
-  const handleDarkenBackground = () => {
-    const newColor = Contrast.changehue(backgroundColor, 'darken')
-    setBackgroundColor(newColor)
+  const handleDarkenBackground = idx => {
+    setCurrentBgColors(colors =>
+      colors.map((c, i) => i === idx ? Contrast.changeLuminance(c, 'darken') : c)
+    )
   }
 
   const handleSubmit = () => {
-    let issue = activeIssue
-    if(ratioIsValid || markAsReviewed) {
-      issue.newHtml = Contrast.convertHtmlRgb2Hex(issue.newHtml)
+    if (ratioIsValid || markAsReviewed) {
+      const issue = { ...activeIssue, newHtml: Contrast.convertHtmlRgb2Hex(activeIssue.newHtml) }
       handleIssueSave(issue)
     }
   }
 
+  const debounceTimer = useRef(null)
+  // Debounced updatePreview
   useEffect(() => {
-    updatePreview()
-  }, [textColor, backgroundColor])
+    if (debounceTimer.current) clearTimeout(debounceTimer.current)
+    debounceTimer.current = setTimeout(() => {
+      updatePreview()
+    }, 150)
+    return () => clearTimeout(debounceTimer.current)
+  }, [textColor, currentBgColors])
 
-  useEffect(() => {
-    setBackgroundColor(getBackgroundColor())
-    setTextColor(getTextColor())
-  }, [activeIssue])
+  const handleAutoAdjustAll = () => {
+    let newBgColors = [...currentBgColors];
+    let changed = false;
+    let failed = false;
+    const element = Html.toElement(Html.getIssueHtml(activeIssue));
+    const minRatio = isLargeText(element) ? 3 : 4.5;
+    for (let i = 0; i < newBgColors.length; i++) {
+      let bg = newBgColors[i];
+      let ratio = Contrast.contrastRatio(bg, textColor);
+      let attempts = 0;
+      while (ratio < minRatio && attempts < 20) {
+        const lighter = Contrast.changeLuminance(bg, 'lighten');
+        const darker = Contrast.changeLuminance(bg, 'darken');
+        const lighterRatio = Contrast.contrastRatio(lighter, textColor);
+        const darkerRatio = Contrast.contrastRatio(darker, textColor);
+        if (lighterRatio > darkerRatio) {
+          bg = lighter;
+          ratio = lighterRatio;
+        } else {
+          bg = darker;
+          ratio = darkerRatio;
+        }
+        attempts++;
+      }
+      if (ratio < minRatio) {
+        failed = true;
+        break;
+      }
+      if (attempts > 0) changed = true;
+      newBgColors[i] = bg;
+    }
+    if (failed) {
+      setCurrentBgColors(originalBgColors.map(bg => bg.hsl));
+      setAutoAdjustError(true);
+    } else if (changed) {
+      setCurrentBgColors(newBgColors);
+      setAutoAdjustError(false);
+    }
+  };
+
+  function isLargeText(element) {
+    if (!element) return false;
+    const style = window.getComputedStyle(element);
+    const fontSizePx = parseFloat(style.fontSize);
+    const fontWeight = style.fontWeight;
+
+    // Convert px to pt (1pt = 1.333px)
+    const fontSizePt = fontSizePx / 1.333;
+
+    // WCAG: large text is >= 18pt (24px) regular or >= 14pt (18.67px) bold
+    const isBold = parseInt(fontWeight, 10) >= 700 || style.fontWeight === 'bold';
+    return (fontSizePt >= 18) || (isBold && fontSizePt >= 14);
+  }
+
+  const maxColorsToShow = 4;
+  const shouldShowExpand = currentBgColors.length > maxColorsToShow;
+  const visibleBgColors = showAllColors ? currentBgColors : currentBgColors.slice(0, maxColorsToShow);
+  const tagName = Html.toElement(Html.getIssueHtml(activeIssue)).tagName;
+  const minRatio = headingTags.includes(tagName) ? 3 : 4.5;
 
   return (
     <>
       <div className="instructions">{t('form.contrast.label.adjust')}</div>
-      
       <div className="mt-2">
         <label htmlFor="textColorInput">{t('form.contrast.replace_text')}</label>
       </div>
@@ -155,13 +278,14 @@ export default function ContrastForm({
         <div className="flex-column justify-content-center">
           <input
             id="textColorInput"
+            type="color"
+            value={Contrast.hslToHex(textColor) || '#000000'}
+            onChange={updateText}
             aria-label={t('form.contrast.label.text.show_color_picker')}
             title={t('form.contrast.label.text.show_color_picker')}
-            type="color"
             tabIndex="0"
             disabled={isDisabled}
-            value={textColor}
-            onChange={updateText} />
+          />
         </div>
         <div className="flex-row gap-1">
           <div className="flex-column justify-content-center">
@@ -170,7 +294,7 @@ export default function ContrastForm({
               tabIndex="0"
               disabled={isDisabled}
               onClick={handleLightenText}>
-              <LightIcon className="icon-md" alt=""/>
+              <LightIcon className="icon-md" alt="" />
               {t('form.contrast.label.lighten')}
             </button>
           </div>
@@ -180,7 +304,7 @@ export default function ContrastForm({
               tabIndex="0"
               disabled={isDisabled}
               onClick={handleDarkenText}>
-              <DarkIcon className="icon-md" alt=""/>
+              <DarkIcon className="icon-md" alt="" />
               {t('form.contrast.label.darken')}
             </button>
           </div>
@@ -188,43 +312,97 @@ export default function ContrastForm({
       </div>
 
       <div className="mt-3">
-        <label htmlFor="backgroundColorInput">{t('form.contrast.replace_background')}</label>
+        <label>{t('form.contrast.replace_background')}</label>
       </div>
-      <div className="flex-row justify-content-between mt-1">
-        <div className="flex-column justify-content-center">
-          <input
-            id="backgroundColorInput"
-            aria-label={t('form.contrast.label.background.show_color_picker')}
-            title={t('form.contrast.label.background.show_color_picker')}
-            type="color"
-            tabIndex="0"
+      {visibleBgColors.map((color, idx) => {
+        let showStatus = currentBgColors.length > 1;
+        let ratio = Contrast.contrastRatio(
+          Contrast.hslToHex(color), Contrast.hslToHex(textColor)
+        );
+        let isValid = ratio >= minRatio;
+
+        return (
+          <div key={idx} className="flex-row justify-content-between mt-1 gradient-row">
+            <div className="flex-row align-items-center">
+              <input
+                id={`backgroundColorInput${idx}`}
+                type="color"
+                value={Contrast.hslToHex(color) || '#ffffff'}
+                onChange={e => updateBackgroundColor(idx, e.target.value)}
+                aria-label={
+                  t('form.contrast.label.background.show_color_picker') +
+                  ' ' +
+                  (isValid
+                    ? t('form.contrast.feedback.valid')
+                    : t('form.contrast.feedback.invalid'))
+                }
+                title={t('form.contrast.label.background.show_color_picker')}
+                disabled={isDisabled}
+              />
+              {showStatus && (
+                isValid ? (
+                  <CheckIcon className="icon-md color-success ms-2" />
+                ) : (
+                  <CloseIcon className="icon-md color-issue ms-2" />
+                )
+              )}
+            </div>
+            <div className="flex-row gap-1">
+              <button
+                tabIndex="0"
+                disabled={isDisabled}
+                onClick={() => handleLightenBackground(idx)}
+                className="btn-small btn-icon-left btn-secondary"
+              >
+                <LightIcon className="icon-md" alt="" />
+                {t('form.contrast.label.lighten')}
+              </button>
+              <button
+                tabIndex="0"
+                disabled={isDisabled}
+                onClick={() => handleDarkenBackground(idx)}
+                className="btn-small btn-icon-left btn-secondary"
+              >
+                <DarkIcon className="icon-md" alt="" />
+                {t('form.contrast.label.darken')}
+              </button>
+            </div>
+          </div>
+        );
+      })}
+
+      {shouldShowExpand && (
+        <div className="flex-column align-items-center mt-2">
+          <button
+            className="btn-small text-center btn-secondary"
+            onClick={() => setShowAllColors(v => !v)}
+            aria-expanded={showAllColors}
+            aria-controls="contrast-bgcolor-list"
+          >
+            {showAllColors ? t('form.contrast.hide') : t('form.contrast.show')}
+          </button>
+        </div>
+      )}
+
+      {currentBgColors.length > 1 && (
+        <div className="flex-row justify-content-end mt-2">
+          <button
+            className="btn-small btn-primary"
             disabled={isDisabled}
-            value={backgroundColor}
-            onChange={updateBackground} />
+            onClick={handleAutoAdjustAll}
+          >
+            {t('form.contrast.label.auto_adjust_all')}
+          </button>
         </div>
-        <div className="flex-row gap-1">
-          <div className="flex-column justify-content-center">
-            <button
-              className="btn-small btn-icon-left btn-secondary"
-              tabIndex="0"
-              disabled={isDisabled}
-              onClick={handleLightenBackground}>
-              <LightIcon className="icon-md" alt=""/>
-              {t('form.contrast.label.lighten')}
-            </button>
-          </div>
-          <div className="flex-column justify-content-center">
-            <button
-              className="btn-small btn-icon-left btn-secondary"
-              tabIndex="0"
-              disabled={isDisabled}
-              onClick={handleDarkenBackground}>
-              <DarkIcon className="icon-md" alt=""/>
-              {t('form.contrast.label.darken')}
-            </button>
+      )}
+
+      {autoAdjustError && (
+        <div className="flex-row justify-content-center">
+          <div className="color-issue mt-2">
+            {t('form.contrast.auto_adjust_error')}
           </div>
         </div>
-      </div>
+      )}
 
       <div className="flex-row justify-content-between mt-4 mb-3">
         <div className="flex-column justify-content-start">
@@ -241,28 +419,50 @@ export default function ContrastForm({
                 )}
               </div>
               <div className="flex-column justify-content-center">
-                <div className="ratio-value">{contrastRatio}</div>  
+                <div className="ratio-value">{contrastRatio?.toFixed(2)}</div>
               </div>
             </div>
             <div className="flex-row justify-content-center">
-              <div className={`ratio-status ${ratioIsValid ? 'valid' : 'invalid'}`}>{ratioIsValid ? t('form.contrast.feedback.valid') : t('form.contrast.feedback.invalid')}</div>
+              <div className={`ratio-status text-center ${ratioIsValid ? 'valid' : 'invalid'}`}>
+                {ratioIsValid
+                  ? t('form.contrast.feedback.valid')
+                  : (
+                      <span>
+                        {t('form.contrast.feedback.minimum', {
+                          required: minRatio
+                        })}
+                      </span>
+                    )
+                }
+              </div>
             </div>
+            {currentBgColors.length > 1 && (
+              <div className="flex-row justify-content-center">
+                <small className="gradient-note">
+                  {t('form.contrast.ratio_note')}
+                </small>
+              </div>
+            )}
           </div>
         </div>
         <div className="flex-column justify-content-start">
           <div className="flex-row justify-content-between gap-1 mt-4">
             <div className="flex-column justify-content-center flex-grow-1 gap-1">
-              { (activeIssue.status === 1 || activeIssue.status === 3) ? (
-                  <div className="flex-row justify-content-end pe-2">
-                    <FixedIcon className="color-success icon-md flex-column align-self-center pe-2"/>
-                    <div className="flex-column align-self-center fw-bolder primary">{t('filter.label.resolution.fixed_single')}</div>
+              {(activeIssue.status === 1 || activeIssue.status === 3) ? (
+                <div className="flex-row justify-content-end pe-2">
+                  <FixedIcon className="color-success icon-md flex-column align-self-center pe-2" />
+                  <div className="flex-column align-self-center fw-bolder primary">
+                    {t('filter.label.resolution.fixed_single')}
                   </div>
-                ) : activeIssue.status === 2 ? (
-                  <div className="flex-row justify-content-end pe-2">
-                    <ResolvedIcon className="color-success icon-md flex-column align-self-center pe-2"/>
-                    <div className="flex-column align-self-center fw-bolder primary">{t('filter.label.resolution.resolved_single')}</div>
+                </div>
+              ) : activeIssue.status === 2 ? (
+                <div className="flex-row justify-content-end pe-2">
+                  <ResolvedIcon className="color-success icon-md flex-column align-self-center pe-2" />
+                  <div className="flex-column align-self-center fw-bolder primary">
+                    {t('filter.label.resolution.resolved_single')}
                   </div>
-                ) : ''}
+                </div>
+              ) : ''}
             </div>
             <button
               className="btn-primary btn-icon-left"
diff --git a/assets/js/Components/Widgets/FixIssuesContentPreview.js b/assets/js/Components/Widgets/FixIssuesContentPreview.js
index f05f794ff..cd7142ff5 100644
--- a/assets/js/Components/Widgets/FixIssuesContentPreview.js
+++ b/assets/js/Components/Widgets/FixIssuesContentPreview.js
@@ -74,6 +74,10 @@ export default function FixIssuesContentPreview({
     formNames.HEADING_STYLE
   ]
 
+  const FOCUS_RELATED = [
+    formNames.CONTRAST
+  ]
+
   const convertErrorHtmlString = (htmlText) => {
     let tempElement = Html.toElement(htmlText)
     if(tempElement){
@@ -190,6 +194,13 @@ export default function FixIssuesContentPreview({
       } else {
         errorElement.replaceWith(convertErrorHtmlElement(errorElement))
       }
+      if (FOCUS_RELATED.includes(formNameFromRule(activeIssue.scanRuleId))) {
+        let metadata = JSON.parse(activeIssue.issueData.metadata)
+        let focusElement = Html.findElementWithXpath(doc, metadata.focusXpath)
+        if (focusElement) {
+          focusElement.replaceWith(convertErrorHtmlElement(focusElement))
+        }
+      }
       setCanShowPreview(true)
       setIsErrorFoundInContent(true)
     }
diff --git a/assets/js/Components/Widgets/UfixitWidget.js b/assets/js/Components/Widgets/UfixitWidget.js
index cb925dc60..53786861f 100644
--- a/assets/js/Components/Widgets/UfixitWidget.js
+++ b/assets/js/Components/Widgets/UfixitWidget.js
@@ -8,6 +8,7 @@ import DisabilityVisualIcon from '../Icons/DisabilityVisualIcon'
 import FormClarification from '../Forms/FormClarification'
 import FileForm from '../Forms/FileForm'
 import { disabilityTypes, disabilitiesFromRule, formFromIssue, formNameFromRule, sharedRuleDescriptions, sharedRuleSummaries } from '../../Services/Ufixit'
+import * as Html from '../../Services/Html'
 import './UfixitWidget.css'
 
 
@@ -137,13 +138,15 @@ export default function UfixitWidget({
     tempIssue.issueData = newIssue
     tempIssue.isModified = newIssue?.isModified || false
     setTempActiveIssue(tempIssue)
-    triggerLiveUpdate()
+    //triggerLiveUpdate()
   }
 
   const interceptIssueSave = (issue) => {
     handleIssueSave(issue, markAsReviewed)
   }
 
+  const fullHtml = activeContentItem?.body
+
   return (
     <>
       {UfixitForm && tempActiveIssue ? 
@@ -203,7 +206,6 @@ export default function UfixitWidget({
                     <UfixitForm
                       t={t}
                       settings={settings}
-
                       activeIssue={tempActiveIssue.issueData}
                       activeContentItem={activeContentItem}
                       addMessage={addMessage}
diff --git a/assets/js/Services/Contrast.js b/assets/js/Services/Contrast.js
index 8095a6c30..e94eb0608 100644
--- a/assets/js/Services/Contrast.js
+++ b/assets/js/Services/Contrast.js
@@ -1,235 +1,42 @@
-export function rgb2hex(rgb) {
-  if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;
+import chroma from "chroma-js";
 
-  rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
-
-  if (!rgb) {
-    return rgb;
-  }
-
-  function hex(x) {
-    return ("0" + parseInt(x).toString(16)).slice(-2);
-  }
-  return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
-}
-
-export function hexToRgb(hex) {
-  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
-  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-  hex = hex.replace(shorthandRegex, (m, r, g, b) => {
-    return r + r + g + g + b + b;
-  });
-
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  return result ? {
-    r: parseInt(result[1], 16),
-    g: parseInt(result[2], 16),
-    b: parseInt(result[3], 16)
-  } : null;
-}
-
-export function changehue(hex, dir) {
-  const color = hex.substring(1)
-  let update
-  let R, G, B
-
-  if (color.length == 3) {
-    R = color.substring(0, 1) + color.substring(0, 1);
-    G = color.substring(1, 2) + color.substring(1, 2);
-    B = color.substring(2, 3) + color.substring(2, 3);
-    update = true;
-  }
-  else if (color.length == 6) {
-    R = color.substring(0, 2);
-    G = color.substring(2, 4);
-    B = color.substring(4, 6);
-    update = true;
-  }
-  else {
-    return '#' + color
-  }
-  R = getRGB(R);
-  G = getRGB(G);
-  B = getRGB(B);
-
-  const HSL = RGBtoHSL(R, G, B);
-  let lightness = HSL[2];
-  if (update == true) {
-    lightness = (dir == "lighten") ? lightness + 6.25 : lightness - 6.25;
-    if (lightness > 100) {
-      lightness = 100;
-    }
-    if (lightness < 0) {
-      lightness = 0;
-    }
-    const RGB = hslToRgb(HSL[0], HSL[1], lightness);
-    R = RGB[0];
-    G = RGB[1];
-    B = RGB[2];
-    if (!(R >= 0) && !(R <= 255)) R = 0
-    if (!(G >= 0) && !(G <= 255)) G = 0
-    if (!(B >= 0) && !(B <= 255)) B = 0
-    R = (R >= 16) ? R.toString(16) : "0" + R.toString(16);
-    G = (G >= 16) ? G.toString(16) : "0" + G.toString(16);
-    B = (B >= 16) ? B.toString(16) : "0" + B.toString(16);
-    R = (R.length == 1) ? R + R : R;
-    G = (G.length == 1) ? G + G : G;
-    B = (B.length == 1) ? B + B : B;
-    return ('#' + R + G + B);
-  }
-}
-
-export function RGBtoHSL(r, g, b) {
-  let Min = 0;
-  let Max = 0;
-  let H, S, L
-  r = (parseInt(r) / 51) * .2;
-  g = (parseInt(g) / 51) * .2;
-  b = (parseInt(b) / 51) * .2;
-
-  if (r >= g)
-    Max = r;
-  else
-    Max = g;
-  if (b > Max)
-    Max = b;
-
-  if (r <= g)
-    Min = r;
-  else
-    Min = g;
-  if (b < Min)
-    Min = b;
-
-  L = (Max + Min) / 2;
-  if (Max == Min) {
-    S = 0;
-    H = 0;
-  }
-  else {
-    if (L < .5)
-      S = (Max - Min) / (Max + Min);
-    if (L >= .5)
-      S = (Max - Min) / (2 - Max - Min);
-    if (r == Max)
-      H = (g - b) / (Max - Min);
-    if (g == Max)
-      H = 2 + ((b - r) / (Max - Min));
-    if (b == Max)
-      H = 4 + ((r - g) / (Max - Min));
-  }
-  H = Math.round(H * 60);
-  if (H < 0) H += 360;
-  if (H >= 360) H -= 360;
-  S = Math.round(S * 100);
-  L = Math.round(L * 100);
-  return [H, S, L];
-}
-
-export function hslToRgb(H, S, L) {
-  let p1, p2;
-  let R, G, B;
-  L /= 100;
-  S /= 100;
-  if (L <= 0.5) p2 = L * (1 + S);
-  else p2 = L + S - (L * S);
-  p1 = 2 * L - p2;
-  if (S == 0) {
-    R = L;
-    G = L;
-    B = L;
-  }
-  else {
-    R = FindRGB(p1, p2, H + 120);
-    G = FindRGB(p1, p2, H);
-    B = FindRGB(p1, p2, H - 120);
+export function toHSL(color) {
+  try {
+    const [h, s, l] = chroma(color).hsl();
+    return { h, s, l };
+  } catch {
+    console.error('Error converting color to HSL:', color);
+    return { h: 0, s: 0, l: 0 };
   }
-  R *= 255;
-  G *= 255;
-  B *= 255;
-  R = Math.round(R);
-  G = Math.round(G);
-  B = Math.round(B);
-
-  return [R, G, B];
 }
 
-export function getRGB(color) {
+export function hslToHex(hsl) {
   try {
-    color = parseInt(color, 16);
+    return chroma.hsl(hsl.h, hsl.s, hsl.l).hex();
+  } catch {
+    console.error('Error converting HSL to hex:', hsl);
+    return null;
   }
-  catch (err) {
-    color = false;
-  }
-  return color;
-}
-
-export function FindRGB(q1, q2, hue) {
-  if (hue > 360) hue = hue - 360;
-  if (hue < 0) hue = hue + 360;
-  if (hue < 60) return (q1 + (q2 - q1) * hue / 60);
-  else if (hue < 180) return (q2);
-  else if (hue < 240) return (q1 + (q2 - q1) * (240 - hue) / 60);
-  else return (q1);
 }
 
-export function contrastRatio(back, fore) {
-  const l1 = relativeLuminance(parseRgb(back));
-  const l2 = relativeLuminance(parseRgb(fore));
-  let ratio = (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
-
-  ratio = Math.round((ratio * 100)) / 100;
-
-  return ratio || 1;
-}
-
-export function relativeLuminance(c) {
-  const lum = [];
-  for (let i = 0; i < 3; i++) {
-    const v = c[i] / 255;
-    lum.push(v < 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4));
+export function changeLuminance(hsl, dir) {
+  if (!hsl || typeof hsl.l !== 'number') return hsl;
+  const step = 0.05;
+  let newL = hsl.l;
+  if (dir === "lighten") {
+    newL = Math.min(1, newL + step);
+  } else {
+    newL = Math.max(0, newL - step);
   }
-  return 0.2126 * lum[0] + 0.7152 * lum[1] + 0.0722 * lum[2];
-}
-
-export function parseRgb(color) {
-  color = convertShortenedHex(color)
-  color = color.substring(1);
-
-  const hex = parseInt(color.toUpperCase(), 16);
-
-  const r = hex >> 16;
-  const g = hex >> 8 & 0xFF;
-  const b = hex & 0xFF;
-  return [r, g, b];
+  return { h: hsl.h, s: hsl.s, l: newL };
 }
 
-export function convertShortenedHex(color) {
-  color = color.substring(1);
-
-  // If the string is too long, cut it off at 6 characters
-  if(color.length > 6) {
-    color = color.substring(0,6)
-  }
-  // If the length is 3, hex shorthand is being used
-  else if (color.length == 3) {
-    color = color[0] + color[0] + color[1] + color[1] + color[2] + color[2];
-  }
-  // If the length is not 3 or 6, pad the end with zeroes
-  else if(color.length != 6) {
-    let padding = '0'.repeat(6 - color.length)
-    color = color + padding;
+export function contrastRatio(back, fore) {
+  try {
+    return Math.round(chroma.contrast(back, fore) * 100) / 100;
+  } catch {
+    return 1;
   }
-
-  return '#' + color
-}
-
-// Accepts HSL, RGB, Hex, color name (eg. red, black) and returns the hex value
-export function standardizeColor(color){
-  const element = document.createElement("canvas").getContext("2d");
-  element.fillStyle = color;
-
-  return element.fillStyle;
 }
 
 export function convertHtmlRgb2Hex(html) {
diff --git a/assets/js/Services/Html.js b/assets/js/Services/Html.js
index 615a9cbc0..8642de4c0 100644
--- a/assets/js/Services/Html.js
+++ b/assets/js/Services/Html.js
@@ -428,6 +428,9 @@ export const findXpathFromElement = (element) => {
 }
 
 export const findElementWithXpath = (content, xpath) => {
+  if (!content || !xpath) {
+    return null
+  }
   
   if(xpath.startsWith('/')) {
     xpath = xpath.substring(1)
diff --git a/assets/js/Services/Report.js b/assets/js/Services/Report.js
index c871e3cb8..0d7cff319 100644
--- a/assets/js/Services/Report.js
+++ b/assets/js/Services/Report.js
@@ -46,13 +46,122 @@ const checkStyleColorMisuse = (issue, element) => {
   return false
 }
 
-const runCustomChecks = (issue, element) => {
+const checkTextContrastSufficient = (issue, element, parsedDocument) => {
+  if (!element || !parsedDocument) {
+    return false;
+  }
+
+  // Helper to get inline style for an element
+  function getInlineStyle(el, property) {
+    if (!el || !el.hasAttribute('style')) return '';
+    const styleAttr = el.getAttribute('style');
+    const regex = new RegExp(`${property}\\s*:\\s*([^;]+)`, 'i');
+    const match = styleAttr.match(regex);
+    return match ? match[1].trim() : '';
+  }
+
+  // Helper to walk up and find the first ancestor with a non-transparent background
+  function findBgAncestor(el) {
+    let current = el;
+    while (current && current.nodeType === 1) {
+      const bgColor = getInlineStyle(current, 'background-color');
+      const bgImage = getInlineStyle(current, 'background-image') || getInlineStyle(current, 'background');
+      if (
+        (bgColor && bgColor !== 'transparent' && bgColor !== 'rgba(0,0,0,0)') ||
+        (bgImage && bgImage !== 'none')
+      ) {
+        return current;
+      }
+      current = current.parentElement;
+    }
+    return null;
+  }
+
+  // Helper to walk up and find the first ancestor with a non-inherited text color
+  function findTextAncestor(el) {
+    let current = el;
+    while (current && current.nodeType === 1) {
+      const color = getInlineStyle(current, 'color');
+      if (color && color !== 'inherit') {
+        return current;
+      }
+      current = current.parentElement;
+    }
+    return null;
+  }
+
+  // Find ancestors
+  const bgAncestor = findBgAncestor(element);
+  const textAncestor = findTextAncestor(element);
+
+  // Set the issue's xpath and sourceHtml to the background color element
+  if (bgAncestor) {
+    issue.xpath = Html.findXpathFromElement(bgAncestor);
+    issue.sourceHtml = Html.toString(bgAncestor); // <-- Set sourceHtml to the correct scope
+  }
+
+  // Store the text color element's xpath in metadata
+  if (textAncestor && bgAncestor) {
+    // Compute relative xpath from bgAncestor to textAncestor
+    function getRelativeXpath(from, to) {
+      let path = [];
+      let current = to;
+      while (current && current !== from) {
+        let tagName = current.tagName.toLowerCase();
+        let siblings = Array.from(current.parentNode.children).filter(
+          sibling => sibling.tagName.toLowerCase() === tagName
+        );
+        let index = siblings.indexOf(current) + 1;
+        path.unshift(`${tagName}[${index}]`);
+        current = current.parentNode;
+      }
+      return path.length ? path.join('/') : '';
+    }
+    // Parse metadata if it's a string
+    if (typeof issue.metadata === 'string') {
+      try {
+        issue.metadata = JSON.parse(issue.metadata);
+      } catch (e) {
+        issue.metadata = {};
+      }
+    }
+    issue.metadata = issue.metadata || {};
+    issue.metadata.textColorXpath = getRelativeXpath(bgAncestor, textAncestor);
+    issue.metadata.focusXpath = Html.findXpathFromElement(element);
+    issue.metadata = JSON.stringify(issue.metadata);
+  }
+  // Return false to indicate this issue should not be ignored
+  return false;
+}
+
+const checkImgAltBackground = (issue, element) => {
+  if (!(element instanceof HTMLElement)) return false;
+
+  // Read inline style safely
+  const styleAttr = element.getAttribute('style') || '';
+  if (!styleAttr) return false;
+
+  // Normalize: lowercase, collapse spaces, strip trailing semicolons, set regex
+  const style = styleAttr.toLowerCase().replace(/\s+/g, ' ').trim();
+  const gradientRegex = /background(?:-image)?\s*:\s*[^;]*(linear|radial|conic|repeating-(?:linear|radial))-gradient\s*\(/;
+
+  // Return true if any gradient type is found
+  return gradientRegex.test(style);
+};
+
+const runCustomChecks = (issue, element, parsedDocument) => {
   if(issue.scanRuleId === 'style_color_misuse') {
     return checkStyleColorMisuse(issue, element)
   }
   else if(issue.scanRuleId === 'text_block_heading') {
     return checkTextBlockHeading(issue, element)
   }
+  else if(issue.scanRuleId === 'text_contrast_sufficient') {
+    return checkTextContrastSufficient(issue, element, parsedDocument)
+  }
+  else if(issue.scanRuleId === 'img_alt_background') {
+    return checkImgAltBackground(issue, element)
+  }
   return false
 } 
 
@@ -122,7 +231,7 @@ export function analyzeReport(report, ISSUE_STATE) {
           }
           
           // For the text_block_heading rule, we need to check if the element is inside a table cell.
-          if(runCustomChecks(issue, element)) {
+          if(runCustomChecks(issue, element, parsedDocument)) {
             issueIgnored = true
           }
         }
diff --git a/package.json b/package.json
index 06bbdcd0f..1951f6420 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "dependencies": {
         "axios": "1.10.0",
         "chart.js": "^4.5.0",
+        "chroma-js": "^3.1.2",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "tinymce": "^7.9.1",
diff --git a/translations/en.json b/translations/en.json
index 1a4822560..12fbb10e4 100644
--- a/translations/en.json
+++ b/translations/en.json
@@ -379,9 +379,14 @@
   "form.contrast.replace_text": "Text Color",
   "form.contrast.replace_background": "Background Color",
   "form.contrast.label.ratio": "Contrast Ratio",
-  "form.contrast.feedback.invalid": "Invalid Ratio",
-  "form.contrast.feedback.valid": "Valid Ratio",
-  "rule.desc.text_contrast_sufficient": "",
+  "form.contrast.label.auto_adjust_all": "Auto-Adjust All Colors",
+  "form.contrast.feedback.invalid": "Insufficient contrast of {current}",
+  "form.contrast.feedback.valid": "Sufficient Contrast",
+  "form.contrast.feedback.minimum": "Minimum: {required}",
+  "form.contrast.auto_adjust_error": "We couldn't auto-adjust your colors, please do so manually.",
+  "form.contrast.ratio_note": "* lowest among all background colors",
+  "form.contrast.show": "Show all colors",
+  "form.contrast.hide": "Hide additional colors",
 
   "form.embedded_content_title.title": "Embedded Content Should Have a Label",
   "form.embedded_content_title.summary": "Embedded content, like videos or interactive elements, should have descriptive labels that help users understand what it is and what it does.",
diff --git a/translations/es.json b/translations/es.json
index e0bae94ae..8ccca9fdc 100644
--- a/translations/es.json
+++ b/translations/es.json
@@ -369,7 +369,9 @@
   "form.contrast.title": "El Texto Debe Tener Suficiente Contraste de Color con el Fondo",
   "form.contrast.summary": "El contraste de color entre el texto y su fondo debe ser lo suficientemente alto para que los usuarios con baja visión o daltonismo puedan leerlo. ",
   "form.contrast.learn_more": "<h3>Contraste de Color</h3><p>Los usuarios con baja visión necesitan suficiente contraste para poder leer. La relación de contraste sigue una fórmula para comparar la luminancia del texto en primer plano con los colores de fondo. Presta atención al contraste especialmente en casos de cambio de tamaño del texto, diseño responsivo y efectos de movimiento como paralaje o fondos animados, cuando la posición del texto sobre su fondo puede cambiar. </p><h3>Mejores Prácticas</h3><ul><li>Asegúrate de que el texto tenga suficiente contraste con su fondo</li><li>Logra el contraste mínimo para todo el texto colocado sobre imágenes o gradientes. </li></ul><h3>Para Más Información </h3><p>WebAIM.org: <a href='https://webaim.org/articles/contrast/' target='_blank'>Accesibilidad de Contraste y Color</a></p><p><a href='https://webaim.org/resources/contrastchecker/' target='_blank'>Verificador de Contraste de Color En Línea</a></p>",
-  "form.contrast.label.show_color_picker": "Mostrar Selector de Color",
+  "form.contrast.label.adjust": "Ajusta los Colores del Texto y/o el Fondo para Mejorar el Contraste",
+  "form.contrast.label.text.show_color_picker": "Selector de Color de Texto",
+  "form.contrast.label.background.show_color_picker": "Selector de Color de Fondo",
   "form.contrast.label.hide_color_picker": "Ocultar Selector de Color",
   "form.contrast.label.lighten": "Aclarar",
   "form.contrast.label.darken": "Oscurecer",
@@ -377,12 +379,15 @@
   "form.contrast.replace_text": "Color del Texto",
   "form.contrast.replace_background": "Color de Fondo",
   "form.contrast.label.ratio": "Relación de Contraste",
-  "form.contrast.feedback.invalid": "Relación Inválida",
-  "form.contrast.feedback.valid": "Relación Válida",
-  "form.contrast.label.bolden_text": "Poner Texto en Negrita",
-  "form.contrast.label.italicize_text": "Poner Texto en Cursiva",
-  "rule.desc.text_contrast_sufficient": "",
-
+  "form.contrast.label.auto_adjust_all": "Ajustar Colores Automáticamente",
+  "form.contrast.feedback.invalid": "Contraste Insuficiente",
+  "form.contrast.feedback.valid": "Contraste Suficiente",
+  "form.contrast.feedback.minimum": "Mínimo: {required}",
+  "form.contrast.auto_adjust_error": "No se pudo ajustar automáticamente el color. Intenta ajustar manualmente los colores.",
+  "form.contrast.ratio_note": "* más bajo entre todos los colores",
+  "form.contrast.show": "Mostrar Colores Adicionales",
+  "form.contrast.hide": "Ocultar Colores Adicionales",
+  
   "form.embedded_content_title.title": "El Contenido Incrustado Debe Tener una Etiqueta",
   "form.embedded_content_title.summary": "El contenido incrustado, como videos o elementos interactivos, debe tener etiquetas descriptivas que ayuden a los usuarios a entender qué son y qué hacen.",
   "form.embedded_content_title.learn_more": "<h3>Etiquetas Descriptivas</h3><p>Para los usuarios con lectores de pantalla, el contenido incrustado requiere que ingresen manualmente y hagan &quot;zoom in&quot; para explorar lo que hay allí. Proporcionar una etiqueta es como tener un cartel en la puerta que describe lo que hay dentro. Con esta información, el usuario puede determinar si desea entrar y explorar en detalle.</p><h3>Mejores Prácticas</h3><ul><li>Cuando incruste contenido, asegúrese de que el código de inserción incluya un atributo <code>title</code> con una etiqueta única que describa su contenido.</li></ul>",