自动调整文本对比度的脚本

wen 实用脚本 2026-07-31 184
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">✨ 自动对比度 · 智能文本调整</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    }
    body {
      min-height: 100vh;
      background: #0f0f1c;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 2rem 1rem;
    }
    .card {
      max-width: 1100px;
      width: 100%;
      background: rgba(255, 255, 255, 0.04);
      backdrop-filter: blur(4px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 2rem;
      padding: 2rem 1.8rem 2.2rem;
      box-shadow: 0 18px 40px rgba(0,0,0,0.6);
    }
    h1 {
      font-size: 1.9rem;
      font-weight: 600;
      letter-spacing: 1px;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 0.5rem;
      border-bottom: 1px solid rgba(255,255,255,0.15);
      padding-bottom: 0.8rem;
    }
    h1 span {
      background: #7cffb0;
      color: #00110a;
      font-size: 0.9rem;
      padding: 4px 12px;
      border-radius: 40px;
      font-weight: 600;
      letter-spacing: 0.3px;
    }
    .sub {
      color: #b7c0cf;
      font-size: 0.95rem;
      margin-top: -0.2rem;
      margin-bottom: 1.8rem;
    }
    .grid {
      display: grid;
      grid-template-columns: 1.6fr 0.9fr 1.6fr;
      gap: 1.5rem;
      align-items: center;
    }
    @media (max-width: 760px) {
      .grid {
        grid-template-columns: 1fr;
        gap: 1rem;
      }
    }
    .preview-area {
      background: #151522;
      border-radius: 1.8rem;
      padding: 0.8rem;
      border: 1px solid #2d2d3f;
      transition: all 0.1s;
    }
    .preview-box {
      background: var(--bg-color, #3498db);
      padding: 2.2rem 1.5rem;
      border-radius: 1.5rem;
      box-shadow: inset 0 2px 8px rgba(0,0,0,0.15);
      transition: background-color 0.15s;
      min-height: 200px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      border: 2px solid rgba(255,255,255,0.1);
    }
    .preview-title {
      font-size: 2.3rem;
      font-weight: 700;
      line-height: 1.3;
      color: var(--text-color, #fff);
      text-shadow: 0 2px 6px rgba(0,0,0,0.2);
      transition: color 0.15s;
      word-break: break-word;
    }
    .preview-sub {
      font-size: 1.1rem;
      font-weight: 400;
      margin-top: 0.65rem;
      color: var(--text-color, #fff);
      opacity: 0.85;
      transition: color 0.15s;
    }
    .chip {
      background: rgba(0,0,0,0.3);
      backdrop-filter: blur(4px);
      padding: 0.25rem 0.8rem;
      border-radius: 40px;
      font-size: 0.8rem;
      border: 1px solid rgba(255,255,255,0.2);
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .control-panel {
      background: #1b1b2a;
      padding: 1.5rem 1.3rem;
      border-radius: 1.8rem;
      box-shadow: 0 4px 12px rgba(0,0,0,0.4);
      border: 1px solid #2c2c40;
    }
    .control-panel h3 {
      color: #dde3ef;
      font-weight: 500;
      font-size: 1.1rem;
      margin-bottom: 1.2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .color-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1.2rem;
      gap: 12px;
      flex-wrap: wrap;
    }
    .color-row label {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #b3c0d6;
      font-weight: 500;
      font-size: 0.95rem;
    }
    input[type="color"] {
      width: 48px;
      height: 48px;
      border: 1px solid rgba(255,255,255,0.3);
      border-radius: 16px;
      background: transparent;
      cursor: pointer;
      padding: 4px;
    }
    input[type="color"]::-webkit-color-swatch-wrapper {
      padding: 0;
    }
    input[type="color"]::-webkit-color-swatch {
      border: none;
      border-radius: 12px;
    }
    .color-hex {
      background: #00000020;
      padding: 0.3rem 0.9rem;
      border-radius: 40px;
      font-family: 'Fira Mono', monospace;
      font-size: 0.85rem;
      border: 1px solid #3f3f58;
      color: #e6eaf5;
    }
    .divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, #3d3d5a, transparent);
      margin: 1.2rem 0;
    }
    .auto-badge {
      background: #00c2a8;
      color: #00110d;
      padding: 0.2rem 1rem;
      border-radius: 40px;
      font-size: 0.8rem;
      font-weight: 600;
    }
    .result-info {
      margin-top: 1rem;
      background: #0000002c;
      border-radius: 1.2rem;
      padding: 0.8rem 1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border: 1px solid #34344b;
    }
    .result-item {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .result-item small {
      color: #8f9ab0;
      font-size: 0.7rem;
      text-transform: uppercase;
    }
    .result-item strong {
      color: #fff;
      font-size: 1.3rem;
      font-weight: 600;
      letter-spacing: 0.5px;
    }
    .result-item .contrast {
      background: #2c2c42;
      padding: 0.2rem 0.8rem;
      border-radius: 80px;
    }
    .toggle-manual {
      background: #22223b;
      border: 1px solid #3e3e5b;
      border-radius: 60px;
      padding: 0.25rem 0.25rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 0.8rem;
    }
    .toggle-manual button {
      flex: 1;
      background: transparent;
      border: none;
      padding: 0.6rem 0.3rem;
      border-radius: 40px;
      color: #aeb8d0;
      font-weight: 500;
      cursor: pointer;
      transition: 0.15s;
    }
    .toggle-manual button.active {
      background: #00b896;
      color: #0a1f1b;
      font-weight: 600;
      box-shadow: 0 2px 6px rgba(0,200,160,0.2);
    }
    .manual-colors {
      display: flex;
      gap: 1rem;
      justify-content: center;
      margin-top: 1rem;
    }
    .manual-colors input {
      width: 60px;
      height: 40px;
      border-radius: 12px;
    }
    .footnote {
      margin-top: 2rem;
      color: #8593aa;
      display: flex;
      justify-content: flex-start;
      gap: 18px;
      flex-wrap: wrap;
      font-size: 0.85rem;
      border-top: 1px dashed #3a3a52;
      padding-top: 1.2rem;
    }
    .footnote span {
      background: #232338;
      padding: 0.3rem 1rem;
      border-radius: 50px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
  </style>
</head>
<body>
<div class="card">
  <h1>
    🌈 自动对比度
    <span>LUM</span>
  </h1>
  <div class="sub">W3C 相对亮度公式 · 自动黑/白文本</div>
  <div class="grid">
    <!-- 预览区 -->
    <div class="preview-area">
      <div class="preview-box" id="previewBox">
        <div class="preview-title" id="displayText">对比文本</div>
        <div class="preview-sub" id="displaySub">背景 · 自动适配</div>
        <div style="margin-top: 16px; display: flex; gap: 8px; justify-content: center;">
          <span class="chip" id="bgChip"></span>
          <span class="chip" id="fgChip"></span>
        </div>
      </div>
    </div>
    <!-- 控制区 -->
    <div class="control-panel">
      <h3>
        🎨 背景色
        <span class="auto-badge">自动文本</span>
      </h3>
      <div class="color-row">
        <label> 
          <input type="color" id="bgColorPicker" value="#3498db">
        </label>
        <span class="color-hex" id="bgHexDisplay">#3498DB</span>
      </div>
      <div class="divider"></div>
      <h3 style="margin-bottom: 10px;">🧠 文本颜色模式</h3>
      <div class="toggle-manual">
        <button id="autoBtn" class="active" >⚡ 自动 (黑/白)</button>
        <button id="manualBtn">🖌️ 手动</button>
      </div>
      <div id="manualControls" style="display: none;">
        <div class="manual-colors">
          <div>
            <input type="color" id="manualFgColor" value="#ffffff" disabled>
          </div>
          <div>
            <input type="color" id="manualBgOverride" value="#333333" disabled>
          </div>
        </div>
        <div style="display: flex; justify-content: space-between; color: #8492a8; font-size: 0.8rem; padding: 0 0.8rem;">
          <span>文字色</span>
          <span>备用背景(不生效)</span>
        </div>
      </div>
      <div class="result-info">
        <div class="result-item">
          <small>背景亮度</small>
          <strong id="bgLuminance">0.20</strong>
        </div>
        <div class="result-item">
          <small>文本颜色</small>
          <strong id="resolvedTextColor" style="color: #fff;">#FFFFFF</strong>
        </div>
        <div class="result-item">
          <small>对比度</small>
          <strong><span id="contrastRatio" class="contrast">9.8</span></strong>
        </div>
      </div>
    </div>
    <!-- 附加信息 / 快速预设 -->
    <div style="background: #161624; border-radius: 1.8rem; padding: 1.2rem; border: 1px solid #2b2b40;">
      <h3 style="color: #d9e3f5; margin-bottom: 1.2rem; font-weight: 500;">🎯 预设背景</h3>
      <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1rem;">
        <button class="preset-btn" style="background:#3498db" data-color="#3498db">蓝</button>
        <button class="preset-btn" style="background:#e74c3c" data-color="#e74c3c">红</button>
        <button class="preset-btn" style="background:#2ecc71" data-color="#2ecc71">绿</button>
        <button class="preset-btn" style="background:#f1c40f" data-color="#f1c40f">黄</button>
        <button class="preset-btn" style="background:#9b59b6" data-color="#9b59b6">紫</button>
        <button class="preset-btn" style="background:#1abc9c" data-color="#1abc9c">青</button>
        <button class="preset-btn" style="background:#000000; border:1px solid #34343f" data-color="#000000">黑</button>
        <button class="preset-btn" style="background:#ffffff; color: black; border:1px solid #888;" data-color="#ffffff">白</button>
      </div>
      <p style="color:#a2adc2; font-size:0.9rem; line-height:1.5;">
        ⚡ <strong>自动对比规则</strong> · 计算背景相对亮度(Y)，使用 WCAG 阈值 
        <span style="background:#2c2c44; padding:2px 10px; border-radius: 30px;">Y > 0.35 ✔ 文本用黑色</span>
      </p>
      <div style="background: #1d1d31; border-radius: 16px; padding: 0.6rem 1rem; margin-top: 0.6rem;">
        <span style="color: #b7c9ea;">亮度公式: 0.2126R' + 0.7152G' + 0.0722B'</span>
      </div>
    </div>
  </div>
  <div class="footnote">
    <span>📐 对比度 ≥ 4.5:1 (AA)</span>
    <span>🧪 手动模式保留你的选择</span>
    <span>💡 实时计算</span>
  </div>
</div>
<script>
  (function(){
    // DOM 元素
    const bgColorPicker = document.getElementById('bgColorPicker');
    const bgHexDisplay = document.getElementById('bgHexDisplay');
    const previewBox = document.getElementById('previewBox');
    const displayText = document.getElementById('displayText');
    const displaySub = document.getElementById('displaySub');
    const bgChip = document.getElementById('bgChip');
    const fgChip = document.getElementById('fgChip');
    const bgLuminanceEl = document.getElementById('bgLuminance');
    const contrastSpan = document.getElementById('contrastRatio');
    const resolvedTextColorEl = document.getElementById('resolvedTextColor');
    // 手动控件
    const autoBtn = document.getElementById('autoBtn');
    const manualBtn = document.getElementById('manualBtn');
    const manualControls = document.getElementById('manualControls');
    const manualFgColor = document.getElementById('manualFgColor');
    const manualBgOverride = document.getElementById('manualBgOverride'); // 保留但禁用
    let currentMode = 'auto';   // 'auto' 或 'manual'
    let manualFg = '#ffffff';   // 手动文本色
    // 预设按钮
    const presetButtons = document.querySelectorAll('.preset-btn');
    // ---------- 工具函数 ----------
    // 将 #rgb / #rrggbb 转为 {r,g,b} 0-255
    function parseHex(hex) {
      if (hex.startsWith('#')) hex = hex.slice(1);
      if (hex.length === 3) {
        return {
          r: parseInt(hex[0] + hex[0], 16),
          g: parseInt(hex[1] + hex[1], 16),
          b: parseInt(hex[2] + hex[2], 16)
        };
      }
      return {
        r: parseInt(hex.substr(0, 2), 16),
        g: parseInt(hex.substr(2, 2), 16),
        b: parseInt(hex.substr(4, 2), 16)
      };
    }
    // 线性化通道
    function linearizeChannel(c) {
      let s = c / 255;
      if (s <= 0.04045) {
        return s / 12.92;
      } else {
        return Math.pow((s + 0.055) / 1.055, 2.4);
      }
    }
    // 计算相对亮度 (YC)
    function relativeLuminance(r, g, b) {
      return 0.2126 * linearizeChannel(r) + 0.7152 * linearizeChannel(g) + 0.0722 * linearizeChannel(b);
    }
    // 计算对比度 (WCAG)
    function contrastRatio(l1, l2) {
      const lighter = Math.max(l1, l2);
      const darker = Math.min(l1, l2);
      return (lighter + 0.05) / (darker + 0.05);
    }
    // 转为两位hex大写
    function toHex2(n) {
      return n.toString(16).padStart(2, '0').toUpperCase();
    }
    function rgbToHex(r, g, b) {
      return `#${toHex2(r)}${toHex2(g)}${toHex2(b)}`;
    }
    // 根据背景亮度 Y 自动选择黑色或白色 (阈值 0.35)
    function autoTextColor(bgLum) {
      return bgLum > 0.35 ? '#000000' : '#ffffff';
    }
    // 更新预览样式
    function applyUpdate() {
      // 获取背景色 hex
      const bgHex = bgColorPicker.value;
      const bgRGB = parseHex(bgHex);
      const bgLum = relativeLuminance(bgRGB.r, bgRGB.g, bgRGB.b);
      // 解析最终文本颜色
      let textColorHex;
      if (currentMode === 'auto') {
        textColorHex = autoTextColor(bgLum);
      } else {
        // 手动模式: 使用手动文本色，并简单应用
        textColorHex = manualFg;
      }
      // 文本色 rgb
      const fgRGB = parseHex(textColorHex);
      const fgLum = relativeLuminance(fgRGB.r, fgRGB.g, fgRGB.b);
      const cr = contrastRatio(bgLum, fgLum);
      // 更新预览变量
      previewBox.style.setProperty('--bg-color', bgHex);
      previewBox.style.setProperty('--text-color', textColorHex);
      // 更新文本内容 (显示对比度彩蛋)
      displayText.textContent = '对比文本';
      const modeLabel = currentMode === 'auto' ? '⚡ 自动' : '🖌️ 手动';
      displaySub.textContent = `${bgHex} · ${textColorHex}`;
      // 更新 hex 显示
      bgHexDisplay.textContent = bgHex.toUpperCase();
      // 更新 chip
      bgChip.textContent = `BG ${bgHex.toUpperCase()}`;
      fgChip.textContent = `TEXT ${textColorHex.toUpperCase()}`;
      // 更新数据展示
      bgLuminanceEl.textContent = bgLum.toFixed(3);
      contrastSpan.textContent = cr.toFixed(2);
      resolvedTextColorEl.textContent = textColorHex.toUpperCase();
      resolvedTextColorEl.style.color = textColorHex;
      // 手动界面禁用bg override 忽略 (我们只使用手动文本色，背景没有变化)
      // 控制台不需要额外操作
    }
    // 重置手动按钮状态
    function setMode(mode) {
      currentMode = mode;
      if (mode === 'auto') {
        autoBtn.classList.add('active');
        manualBtn.classList.remove('active');
        manualControls.style.display = 'none';
        // 禁用手动颜色选择器
        manualFgColor.disabled = true;
        manualBgOverride.disabled = true;
      } else {
        manualBtn.classList.add('active');
        autoBtn.classList.remove('active');
        manualControls.style.display = 'block';
        manualFgColor.disabled = false;
        manualBgOverride.disabled = true;  // 无效果只是摆设
        // 如果当前没有手动色值，从当前文本色获取
        if (!manualFg) manualFg = '#ffffff';
      }
      applyUpdate();
    }
    // 监听背景颜色变化
    bgColorPicker.addEventListener('input', function(e) {
      applyUpdate();
    });
    // 模式切换
    autoBtn.addEventListener('click', function() {
      setMode('auto');
    });
    manualBtn.addEventListener('click', function() {
      setMode('manual');
    });
    // 手动颜色变化
    manualFgColor.addEventListener('input', function(e) {
      manualFg = e.target.value;
      applyUpdate();
    });
    // 预设按钮
    presetButtons.forEach(btn => {
      btn.addEventListener('click', function() {
        const color = this.dataset.color;
        bgColorPicker.value = color;
        applyUpdate();
      });
    });
    // 手动模式下当更改背景时也为手动的颜色显示 (没有影响但保留)
    // 额外: 切换预设时同时保留手动模式的颜色
    // 初始化
    function init() {
      // 设定初始背景色
      bgColorPicker.value = '#3498db';
      manualFg = '#ffffff';
      manualBgOverride.value = '#333333'; // 无实际作用，占位
      setMode('auto');
      applyUpdate();
    }
    init();
  })();
</script>
</body>
</html>
核心机制与操作说明

您可以通过调整背景色或选择预设，直观地看到文本颜色的智能变化，其核心逻辑基于 WCAG 标准。
自动调整文本对比度的脚本
自动对比度算法：脚本使用 WCAG 规定的相对亮度公式（0.2126R‘ + 0.7152G’ + 0.0722B‘）计算背景色亮度，当背景亮度高于阈值（Y > 0.35）时，自动选用黑色文本；否则选用白色文本，以确保足够的对比度（通常达到 AA 级别）。
双模式切换：您可以在“自动”和“手动”模式间切换，自动模式完全由算法决定文本颜色；手动模式则允许您通过颜色选择器自由指定文本颜色，但同时会显示该手动颜色与背景的实际对比度,方便您自行判断。
实时反馈与预设：所有调整（背景色、模式、手动颜色）都会立即反映在预览卡片上，并同步更新背景亮度、文本颜色和对比度数值，页面右侧提供了多种预设背景色按钮,方便您快速测试不同颜色方案的效果。
本文地址： https://www.bmjup.com/post/35079.html