Contrast Bookmarklet

(function () {
  // Toggle off if already running
  var oldPanel = document.getElementById('lb-contrast-panel');
  if (oldPanel) {
    oldPanel.remove();
    document.querySelectorAll('[data-lb-contrast]').forEach(function (el) {
      el.style.outline = el.dataset.lbOutlineOriginal || '';
      el.style.outlineOffset = el.dataset.lbOffsetOriginal || '';
      el.removeAttribute('data-lb-contrast');
    });
    return;
  }

  function parseRgb(s) {
    var m = s && s.match(/rgba?\(([\d.]+),\s*([\d.]+),\s*([\d.]+)(?:,\s*([\d.]+))?\)/);
    if (!m) return null;
    return [+m[1], +m[2], +m[3], m[4] ? +m[4] : 1];
  }

  function blend(fg, bg) {
    var a = fg[3];
    return [fg[0]*a + bg[0]*(1-a), fg[1]*a + bg[1]*(1-a), fg[2]*a + bg[2]*(1-a), 1];
  }

  function relLum(rgb) {
    var c = rgb.slice(0, 3).map(function (v) {
      v /= 255;
      return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
    });
    return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
  }

  function ratio(a, b) {
    var l1 = relLum(a), l2 = relLum(b);
    return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
  }

  function effectiveBg(el) {
    var hasImage = false;
    var bg = [255, 255, 255, 1];
    var node = el;
    var stacked = [];
    while (node && node !== document.documentElement) {
      var cs = getComputedStyle(node);
      if (cs.backgroundImage && cs.backgroundImage !== 'none') hasImage = true;
      var c = parseRgb(cs.backgroundColor);
      if (c && c[3] > 0) {
        if (c[3] === 1) {
          // Opaque ancestor — apply any partials we collected on top
          var resolved = c;
          for (var i = stacked.length - 1; i >= 0; i--) resolved = blend(stacked[i], resolved);
          return { color: resolved, hasImage: hasImage };
        }
        stacked.push(c);
      }
      node = node.parentElement;
    }
    // No opaque ancestor — assume page bg is white
    var resolved2 = bg;
    for (var j = stacked.length - 1; j >= 0; j--) resolved2 = blend(stacked[j], resolved2);
    return { color: resolved2, hasImage: hasImage };
  }

  function isLargeText(cs) {
    var sz = parseFloat(cs.fontSize);
    var weight = parseInt(cs.fontWeight, 10) || 400;
    if (sz >= 24) return true;            // ~18pt regular
    if (sz >= 18.66 && weight >= 700) return true; // ~14pt bold
    return false;
  }

  // Walk every element that directly contains text
  var fails = [];
  var nodes = document.querySelectorAll('body *');
  for (var i = 0; i < nodes.length; i++) {
    var el = nodes[i];
    if (el.closest('script,style,noscript')) continue;
    var hasDirectText = false;
    for (var n = el.firstChild; n; n = n.nextSibling) {
      if (n.nodeType === 3 && n.nodeValue.trim()) { hasDirectText = true; break; }
    }
    if (!hasDirectText) continue;

    var cs = getComputedStyle(el);
    if (cs.visibility === 'hidden' || cs.display === 'none') continue;
    var fg = parseRgb(cs.color);
    if (!fg || fg[3] === 0) continue;

    var bg = effectiveBg(el);
    var fgFlat = fg[3] === 1 ? fg : blend(fg, bg.color);
    var r = ratio(fgFlat, bg.color);
    var threshold = isLargeText(cs) ? 3 : 4.5;

    if (r < threshold) {
      fails.push({
        el: el, ratio: r, threshold: threshold,
        text: (el.innerText || '').slice(0, 80),
        hasImage: bg.hasImage, large: threshold === 3
      });
      el.dataset.lbOutlineOriginal = el.style.outline || '';
      el.dataset.lbOffsetOriginal = el.style.outlineOffset || '';
      el.style.outline = '2px solid #ef4444';
      el.style.outlineOffset = '2px';
      el.setAttribute('data-lb-contrast', '1');
    }
  }

  // Build the floating panel
  var panel = document.createElement('div');
  panel.id = 'lb-contrast-panel';
  Object.assign(panel.style, {
    position: 'fixed', top: '16px', right: '16px', width: '360px',
    maxHeight: '80vh', display: 'flex', flexDirection: 'column',
    background: '#0c111a', color: '#e5e7eb', borderRadius: '12px',
    boxShadow: '0 10px 30px rgba(0,0,0,0.4)', zIndex: '2147483647',
    fontFamily: 'system-ui,-apple-system,sans-serif', fontSize: '13px',
    border: '1px solid #1f2937', overflow: 'hidden'
  });

  var header = document.createElement('div');
  Object.assign(header.style, {
    padding: '14px 16px', borderBottom: '1px solid #1f2937',
    display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: '12px'
  });
  header.innerHTML = '<div><strong style="display:block;font-size:14px;color:white">Contrast scan</strong>'
    + '<span style="opacity:0.6;font-size:11px">' + fails.length + ' issue'
    + (fails.length === 1 ? '' : 's')
    + ' below WCAG AA</span></div>'
    + '<button id="lb-contrast-close" aria-label="Close" '
    + 'style="background:none;border:0;color:#9ca3af;cursor:pointer;font-size:20px;line-height:1;padding:0">×</button>';
  panel.appendChild(header);

  var body = document.createElement('div');
  Object.assign(body.style, { padding: '8px 0', overflow: 'auto', flex: '1' });

  if (fails.length === 0) {
    body.innerHTML = '<p style="padding:24px 16px;text-align:center;color:#9ca3af;line-height:1.5">'
      + 'No AA contrast issues found.<br>'
      + "That doesn't mean the page is fully accessible — try a screen reader and keyboard nav too.</p>";
  } else {
    fails.forEach(function (f, idx) {
      var item = document.createElement('button');
      Object.assign(item.style, {
        display: 'block', width: '100%', textAlign: 'left',
        padding: '10px 16px', border: '0', background: 'transparent', color: 'inherit',
        cursor: 'pointer', fontSize: '12.5px',
        borderBottom: idx < fails.length - 1 ? '1px solid #1f2937' : 'none'
      });
      item.onmouseenter = function () { item.style.background = '#111827'; };
      item.onmouseleave = function () { item.style.background = 'transparent'; };
      item.onclick = function () {
        f.el.scrollIntoView({ behavior: 'smooth', block: 'center' });
        f.el.style.outline = '4px solid #ef4444';
        setTimeout(function () { f.el.style.outline = '2px solid #ef4444'; }, 800);
      };
      var ratioColor = f.ratio < 2 ? '#ef4444' : f.ratio < 3 ? '#f59e0b' : '#fbbf24';
      var label = f.large ? 'Large text · ≥3:1' : 'Body text · ≥4.5:1';
      var note = f.hasImage
        ? '<br><span style="opacity:0.5">⚠ Background image — score may be approximate</span>'
        : '';
      item.innerHTML = '<div style="display:flex;justify-content:space-between;gap:8px;margin-bottom:4px">'
        + '<span style="opacity:0.6">' + label + '</span>'
        + '<strong style="color:' + ratioColor + ';font-variant-numeric:tabular-nums">'
        + f.ratio.toFixed(2) + ':1</strong></div>'
        + '<div style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">'
        + (f.text || '<em>(empty)</em>') + '</div>' + note;
      body.appendChild(item);
    });
  }
  panel.appendChild(body);

  var footer = document.createElement('div');
  Object.assign(footer.style, {
    padding: '10px 16px', borderTop: '1px solid #1f2937', fontSize: '11px', opacity: '0.5'
  });
  footer.textContent = 'LearnBuilder contrast bookmarklet — click an issue to jump to it';
  panel.appendChild(footer);

  document.body.appendChild(panel);
  document.getElementById('lb-contrast-close').onclick = function () {
    panel.remove();
    document.querySelectorAll('[data-lb-contrast]').forEach(function (el) {
      el.style.outline = el.dataset.lbOutlineOriginal || '';
      el.style.outlineOffset = el.dataset.lbOffsetOriginal || '';
      el.removeAttribute('data-lb-contrast');
    });
  };
})();