您是否遇到過網(wǎng)站上淺色文本疊加在淺色背景圖片上的情況？如果遇到過，您就會(huì)知道這有多難閱讀。避免這種情況的一種常用方法是使用透明疊加層。但這引出一個(gè)重要問題：疊加層的透明度究竟應(yīng)該有多高？我們並非總是處理相同的字體大小、粗細(xì)和顏色，當(dāng)然，不同的圖片也會(huì)產(chǎn)生不同的對(duì)比度。

嘗試消除背景圖片上文本對(duì)比度差的問題，就像玩打地鼠遊戲一樣。與其猜測(cè)，不如使用HTML<canvas></canvas>和一些數(shù)學(xué)方法來解決這個(gè)問題。

就像這樣：

我們可以說“問題解決了！”，然後就此結(jié)束這篇文章。但這有什麼樂趣呢？我想向您展示的是這個(gè)工具的工作原理，以便您掌握一種處理這種常見問題的新方法。

計(jì)劃

首先，讓我們明確我們的目標(biāo)。我們說過，我們想要在背景圖片上顯示可讀的文本，但“可讀”究竟意味著什麼？就我們的目的而言，我們將使用WCAG對(duì)AA級(jí)可讀性的定義，該定義指出文本和背景顏色之間需要足夠的對(duì)比度，以便一種顏色比另一種顏色亮4.5倍。

讓我們選擇一種文本顏色、一張背景圖片和一種疊加顏色作為起點(diǎn)。給定這些輸入，我們想要找到使文本可讀的疊加不透明度級(jí)別，而不會(huì)使圖片隱藏太多，以至於圖片也難以看到。為了使事情複雜化一點(diǎn)，我們將使用一張既有深色空間又有淺色空間的圖片，並確保疊加層考慮到了這一點(diǎn)。

我們的最終結(jié)果將是一個(gè)值，我們可以將其應(yīng)用於疊加層的CSS不透明度屬性，該屬性使文本比背景亮4.5倍。

為了找到最佳疊加不透明度，我們將執(zhí)行四個(gè)步驟：

1. 我們將圖片放入HTML<canvas></canvas>中，這將使我們能夠讀取圖片中每個(gè)像素的顏色。
2. 我們將找到圖片中與文本對(duì)比度最小的像素。
3. 接下來，我們將準(zhǔn)備一個(gè)顏色混合公式，我們可以使用它來測(cè)試不同不透明度級(jí)別對(duì)該像素顏色的影響。
4. 最後，我們將調(diào)整疊加層的不透明度，直到文本對(duì)比度達(dá)到可讀性目標(biāo)。這不會(huì)是隨機(jī)猜測(cè)——我們將使用二分查找技術(shù)來加快此過程。

讓我們開始吧！

步驟1：從畫布讀取圖像顏色

Canvas允許我們“讀取”圖像中包含的顏色。為此，我們需要將圖像“繪製”到<canvas></canvas>元素上，然後使用canvas上下文(ctx)的getImageData()方法生成圖像顏色的列表。

 function getImagePixelColorsUsingCanvas(image, canvas) {
  // canvas的上下文(通?？s寫為ctx)是一個(gè)包含許多函數(shù)的對(duì)象，用於控制你的canvas
  const ctx = canvas.getContext('2d');

  // 寬度可以是任何值，所以我選擇500，因?yàn)樗銐虼?，可以捕捉?xì)節(jié)，但又足夠小，可以使計(jì)算速度加快。
  canvas.width = 500;

  // 確保canvas與我們圖像的比例匹配canvas.height = (image.height / image.width) * canvas.width;

  // 獲取圖像和canvas的測(cè)量值，以便我們可以在下一步中使用它們const sourceImageCoordinates = [0, 0, image.width, image.height];
  const destinationCanvasCoordinates = [0, 0, canvas.width, canvas.height];

  // Canvas的drawImage()的工作原理是將我們圖像的測(cè)量值映射到我們想要繪製它的canvas上ctx.drawImage(
    image,
    ...sourceImageCoordinates,
    ...destinationCanvasCoordinates
  );

  // 請(qǐng)記住，getImageData僅適用於相同來源或啟用跨源的圖像。
  // https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
  const imagePixelColors = ctx.getImageData(...destinationCanvasCoordinates);
  return imagePixelColors;
}

getImageData()方法為我們提供了一個(gè)表示每個(gè)像素顏色的數(shù)字列表。每個(gè)像素由四個(gè)數(shù)字表示：紅色、綠色、藍(lán)色和不透明度（也稱為“alpha”）。了解這一點(diǎn)，我們可以遍歷像素列表並找到我們需要的任何信息。這在下一步中將非常有用。

步驟2：找到對(duì)比度最小的像素

在此之前，我們需要知道如何計(jì)算對(duì)比度。我們將編寫一個(gè)名為getContrast()的函數(shù)，該函數(shù)接收兩種顏色並輸出一個(gè)數(shù)字，表示這兩種顏色之間的對(duì)比度級(jí)別。數(shù)字越高，對(duì)比度越好，可讀性也越好。

當(dāng)我開始研究這個(gè)項(xiàng)目的顏色時(shí)，我期望找到一個(gè)簡(jiǎn)單的公式。結(jié)果發(fā)現(xiàn)有多個(gè)步驟。

要計(jì)算兩種顏色之間的對(duì)比度，我們需要知道它們的亮度級(jí)別，這本質(zhì)上就是亮度（Stacie Arellano對(duì)亮度進(jìn)行了深入探討，值得一看）。

感謝W3C，我們知道使用亮度計(jì)算對(duì)比度的公式：

 const contrast = (lighterColorLuminance 0.05) / (darkerColorLuminance 0.05);

獲取顏色的亮度意味著我們必須將顏色從網(wǎng)絡(luò)上使用的常規(guī)8位RGB值（其中每種顏色為0-255）轉(zhuǎn)換為所謂的線性RGB。我們需要這樣做是因?yàn)榱炼炔粫?huì)隨著顏色的變化而均勻增加。我們需要將顏色轉(zhuǎn)換為亮度隨顏色變化均勻變化的格式。這使我們能夠正確計(jì)算亮度。同樣，W3C在這裡也提供了幫助：

 const luminance = (0.2126 * getLinearRGB(r) 0.7152 * getLinearRGB(g) 0.0722 * getLinearRGB(b));

但是，等等，還有更多！為了將8位RGB（0到255）轉(zhuǎn)換為線性RGB，我們需要經(jīng)歷所謂的標(biāo)準(zhǔn)RGB（也稱為sRGB），其比例為0到1。

因此，過程如下：

 <code>8位RGB → 標(biāo)準(zhǔn)RGB → 線性RGB → 亮度</code>

一旦我們有了想要比較的兩種顏色的亮度，我們就可以將亮度值代入公式中，得到它們各自顏色之間的對(duì)比度。

 // getContrast是我們唯一需要直接交互的函數(shù)。
// 其餘函數(shù)是中間輔助步驟。
function getContrast(color1, color2) {
  const color1_luminance = getLuminance(color1);
  const color2_luminance = getLuminance(color2);
  const lighterColorLuminance = Math.max(color1_luminance, color2_luminance);
  const darkerColorLuminance = Math.min(color1_luminance, color2_luminance);
  const contrast = (lighterColorLuminance 0.05) / (darkerColorLuminance 0.05);
  return contrast;
}

function getLuminance({r,g,b}) {
  return (0.2126 * getLinearRGB(r) 0.7152 * getLinearRGB(g) 0.0722 * getLinearRGB(b));
}
function getLinearRGB(primaryColor_8bit) {
  // 首先從8位rgb(0-255)轉(zhuǎn)換為標(biāo)準(zhǔn)RGB(0-1)
  const primaryColor_sRGB = convert_8bit_RGB_to_standard_RGB(primaryColor_8bit);

  // 然後從sRGB轉(zhuǎn)換為線性RGB，以便我們可以使用它來計(jì)算亮度const primaryColor_RGB_linear = convert_standard_RGB_to_linear_RGB(primaryColor_sRGB);
  return primaryColor_RGB_linear;
}
function convert_8bit_RGB_to_standard_RGB(primaryColor_8bit) {
  return primaryColor_8bit / 255;
}
function convert_standard_RGB_to_linear_RGB(primaryColor_sRGB) {
  const primaryColor_linear = primaryColor_sRGB <p>現(xiàn)在我們可以計(jì)算對(duì)比度了，我們需要查看上一步中的圖像，並遍歷每個(gè)像素，比較該像素的顏色與前景文本顏色之間的對(duì)比度。當(dāng)我們遍歷圖像的像素時(shí)，我們將跟蹤到目前為止最差（最低）的對(duì)比度，當(dāng)我們到達(dá)循環(huán)的末尾時(shí)，我們將知道圖像中對(duì)比度最差的顏色。</p><pre class="brush:php;toolbar:false"> function getWorstContrastColorInImage(textColor, imagePixelColors) {
  let worstContrastColorInImage;
  let worstContrast = Infinity; // 這保證我們不會(huì)從太低的值開始for (let i = 0; i <p></p><h3>步驟3：準(zhǔn)備顏色混合公式來測(cè)試疊加不透明度級(jí)別</h3><p></p><p>現(xiàn)在我們知道了圖像中對(duì)比度最差的顏色，下一步是確定疊加層的透明度應(yīng)該有多高，並查看這將如何改變與文本的對(duì)比度。</p><p></p><p>當(dāng)我第一次實(shí)現(xiàn)這一點(diǎn)時(shí)，我使用了單獨(dú)的畫布來混合顏色並讀取結(jié)果。但是，感謝Ana Tudor關(guān)於透明度的文章，我現(xiàn)在知道有一個(gè)方便的公式可以計(jì)算將基本顏色與透明疊加層混合後的結(jié)果顏色。</p><p></p><p>對(duì)於每個(gè)顏色通道（紅色、綠色和藍(lán)色），我們將應(yīng)用此公式來獲取混合顏色：</p><p>混合顏色= 基本顏色(疊加顏色- 基本顏色) * 疊加不透明度</p><p></p><p>因此，在代碼中，這將如下所示：</p><pre class="brush:php;toolbar:false"> function mixColors(baseColor, overlayColor, overlayOpacity) {
  const mixedColor = {
    r: baseColor.r (overlayColor.r - baseColor.r) * overlayOpacity,
    g: baseColor.g (overlayColor.g - baseColor.g) * overlayOpacity,
    b: baseColor.b (overlayColor.b - baseColor.b) * overlayOpacity,
  }
  return mixedColor;
}

現(xiàn)在我們可以混合顏色了，我們可以測(cè)試應(yīng)用疊加不透明度值時(shí)的對(duì)比度。

 function getTextContrastWithImagePlusOverlay({textColor, overlayColor, imagePixelColor, overlayOpacity}) {
  const colorOfImagePixelPlusOverlay = mixColors(imagePixelColor, overlayColor, overlayOpacity);
  const contrast = getContrast(textColor, colorOfImagePixelPlusOverlay);
  return contrast;
}

有了這個(gè)，我們就擁有了找到最佳疊加不透明度所需的所有工具！

步驟4：找到達(dá)到對(duì)比度目標(biāo)的疊加不透明度

我們可以測(cè)試疊加層的不透明度，並查看這將如何影響文本和圖像之間的對(duì)比度。我們將嘗試許多不同的不透明度級(jí)別，直到我們找到達(dá)到目標(biāo)對(duì)比度的值，其中文本比背景亮4.5倍。這聽起來可能很瘋狂，但別擔(dān)心；我們不會(huì)隨機(jī)猜測(cè)。我們將使用二分查找，這是一個(gè)讓我們能夠快速縮小可能的答案集直到得到精確結(jié)果的過程。

以下是二分查找的工作原理：

 <code>- 在中間猜測(cè)。 - 如果猜測(cè)過高，我們將消除答案的上半部分。太低了嗎？我們將改為消除下半部分。 - 在新的范圍中間猜測(cè)。 - 重復(fù)此過程，直到我們得到一個(gè)值。我碰巧有一個(gè)工具可以展示它是如何工作的：在這種情況下，我們?cè)噲D猜測(cè)一個(gè)介于0和1之間的不透明度值。因此，我們將從中間猜測(cè)，測(cè)試結(jié)果對(duì)比度是太高還是太低，消除一半的選項(xiàng)，然后再次猜測(cè)。如果我們將二分查找限制為八次猜測(cè)，我們將立即得到一個(gè)精確的答案。在我們開始搜索之前，我們需要一種方法來檢查是否根本需要疊加層。我們根本不需要優(yōu)化我們不需要的疊加層！ ```javascript function isOverlayNecessary(textColor, worstContrastColorInImage, desiredContrast) { const contrastWithoutOverlay = getContrast(textColor, worstContrastColorInImage); return contrastWithoutOverlay </code>

現(xiàn)在我們可以使用二分查找來查找最佳疊加不透明度：

 function findOptimalOverlayOpacity(textColor, overlayColor, worstContrastColorInImage, desiredContrast) {
  // 如果對(duì)比度已經(jīng)足夠好，我們不需要疊加層，
  // 因此我們可以跳過其餘部分。
  const isOverlayNecessary = isOverlayNecessary(textColor, worstContrastColorInImage, desiredContrast);
  if (!isOverlayNecessary) {
    return 0;
  }

  const opacityGuessRange = {
    lowerBound: 0,
    midpoint: 0.5,
    upperBound: 1,
  };
  let numberOfGuesses = 0;
  const maxGuesses = 8;

  // 如果沒有解決方案，不透明度猜測(cè)將接近1，
  // 因此我們可以將其作為上限來檢查無(wú)解的情況。
  const opacityLimit = 0.99;

  // 此循環(huán)重複縮小我們的猜測(cè)，直到我們得到結(jié)果while (numberOfGuesses  desiredContrast;

    if (isGuessTooLow) {
      opacityGuessRange.lowerBound = currentGuess;
    }
    else if (isGuessTooHigh) {
      opacityGuessRange.upperBound = currentGuess;
    }

    const newMidpoint = ((opacityGuessRange.upperBound - opacityGuessRange.lowerBound) / 2) opacityGuessRange.lowerBound;
    opacityGuessRange.midpoint = newMidpoint;
  }

  const optimalOpacity = opacityGuessRange.midpoint;
  const hasNoSolution = optimalOpacity > opacityLimit;

  if (hasNoSolution) {
    console.log('No solution'); // 根據(jù)需要處理無(wú)解的情況return opacityLimit;
  }
  return optimalOpacity;
}

實(shí)驗(yàn)完成後，我們現(xiàn)在確切地知道疊加層的透明度需要多高才能使文本可讀，而不會(huì)隱藏過多的背景圖像。

我們做到了！

改進(jìn)和局限性

我們介紹的方法只有在文本顏色和疊加顏色本身俱有足夠的對(duì)比度時(shí)才有效。例如，如果您選擇與疊加層相同的文本顏色，除非圖像根本不需要疊加層，否則將不會(huì)有最佳解決方案。

此外，即使對(duì)比度在數(shù)學(xué)上是可以接受的，但這並不總是保證它看起來很棒。對(duì)於具有淺色疊加層和繁忙背景圖像的深色文本尤其如此。圖像的各個(gè)部分可能會(huì)分散對(duì)文本的注意力，即使對(duì)比度在數(shù)值上很好，也可能難以閱讀。這就是為什麼流行的建議是在深色背景上使用淺色文本。

我們也沒有考慮像素的位置或每種顏色的像素?cái)?shù)量。這樣做的一個(gè)缺點(diǎn)是，角落中的像素可能會(huì)對(duì)結(jié)果產(chǎn)生過大的影響。但是，好處是，我們不必?fù)?dān)心圖像的顏色是如何分佈的或文本在哪裡，因?yàn)橹灰覀兲幚砹藢?duì)比度最少的地方，我們就可以在其他任何地方都安全。

我在此過程中學(xué)習(xí)到了一些東西

在這個(gè)實(shí)驗(yàn)之後，我有一些收穫，我想與你們分享：

 <code>- **明確目標(biāo)非常有幫助！**我們從一個(gè)模糊的目標(biāo)開始，即想要在圖像上顯示可讀的文本，最終得到了一個(gè)我們可以努力達(dá)到的特定對(duì)比度級(jí)別。 - **明確術(shù)語(yǔ)非常重要。**例如，標(biāo)準(zhǔn)RGB并非我所期望的。我了解到，我認(rèn)為的“常規(guī)”RGB（0到255）正式稱為8位RGB。此外，我認(rèn)為我研究的方程式中的“L”表示“亮度”，但它實(shí)際上表示“亮度”，這不能與“光度”混淆。澄清術(shù)語(yǔ)有助于我們編寫代碼以及討論最終結(jié)果。 - **復(fù)雜并不意味著無(wú)法解決。**聽起來很困難的問題可以分解成更小、更容易管理的部分。 - **當(dāng)你走過這條路時(shí)，你會(huì)發(fā)現(xiàn)捷徑。**對(duì)于白色文本在黑色透明疊加層上的常見情況，您永遠(yuǎn)不需要超過0.54的不透明度即可達(dá)到WCAG AA級(jí)可讀性。 ### 總結(jié)…您現(xiàn)在有了一種方法可以在背景圖像上使文本可讀，而不會(huì)犧牲過多的圖像。如果您已經(jīng)讀到這里，我希望我已經(jīng)能夠讓您大致了解其工作原理。我最初開始這個(gè)項(xiàng)目是因?yàn)槲铱吹剑ú⒅谱髁耍┨嗑W(wǎng)站橫幅，其中文本在背景圖像上難以閱讀，或者背景圖像被疊加層過度遮擋。我想做些什么，我想給其他人提供一種同樣的方法。我寫這篇文章是為了希望你們能夠更好地理解網(wǎng)絡(luò)上的可讀性。我希望你們也學(xué)習(xí)了一些很酷的canvas技巧。如果您在可讀性或canvas方面做了一些有趣的事情，我很樂意在評(píng)論中聽到您的想法！</code>

以上是釘在光文和背景圖像之間的完美對(duì)比度的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！