??? ?? ???? ??? ? ????? ??? ???? ?? ?? ????? ??? ??? ?????, ??? ??? ??? ??? ???? ?? ? ????. ?? ??? ???? ?? ? ??? ??? ????? ???? ????. ??? ??? ??? ??? ?????. ????? ???? ??? ??????? ??? ?? ?? ?? ??, ?? ? ??? ???? ??? ?? ?? ??? ?? ??? ?????.

??? ????? ??? ?? ????? ??? ??? ??? ??? ??????. ????? HTML? ??????<canvas></canvas> ? ??? ?????? ? ?? ??? ??.

?? ??:

??? "??? ???????!"?? ?? ? ????. ?? ??? ??? ?????. ??? ??? ??? ?????? ?? ???? ?? ??? ??? ??? ?????? ???? ??? ?? ? ??? ??? ??? ??? ? ? ????.

??

?? ??? ????????. ??? ?? ???? ?? ??? ???? ???? ??? ???? "?? ??"? ??? ??? ?????? ??? ??? ??, ??? AA ??? ???? ?? WCAG? ??? ??? ????. ?? ???? ?? ?? ??? ??? ??? ???? ? ??? ?? ??? 4.5 ? ? ????.

????? ??? ??, ?? ??? ? ???? ??? ?????. ??? ??? ??? ? ???? ?? ?? ??? ?? ???? ?? ? ??? ???? ???? ??? ?? ????. ??? ?? ?????? ?? ??? ?? ??? ??? ???? ??????? ???????.

??? ?? ??? ????? CSS ???? ??? ?? ? ??? ?? ? ???, ?? ???? ???? 4.5 ? ? ?? ????.

??? ???? ????? ???? 4 ??? ?????.

1. ??? ???? HTML? ?????<canvas></canvas> ?? ?? ???? ? ??? ??? ?? ? ????.
2. ??? ???? ?? ???? ???? ??? ?? ????.
3. ????, ??? ?? ??? ??? ?? ?? ???? ??? ??? ????? ? ??? ??? ?? ?? ??? ?????.
4. ????? ??? ??? ??? ??? ?? ? ??? ????? ????? ?????. ??? ??? ??? ????. ?? ?? ??? ?? ??? ???? ??? ?? ????.

?????!

1 ?? : ????? ??? ??? ?????

???? ???? ???? ?? ? ??? "??"? ? ????. ?? ???? ????<canvas></canvas> ???? ??? ???? (CTX)? getImageData() ???? ???? ??? ?? ??? ??????.

 ?? getImagePixelColorsUsUsingCanvas (???, ???) {
  // ???? ???? (????? CTX? ??)? ???? ?????? ?? ??? ???? ?????.
  const ctx = canvas.getContext ( '2d');

  // ??? ?? ? ? ???? ?? ??? ????? ??? ?? ? ??? ? ?? ???? ??? ?? ??? 500? ??????.
  Canvas.width = 500;

  // ???? ??? ???? ???? ????? ?????? .Height = (image.height / image.width) * canvas.width;

  // ??? ? ???? ?? ?? ?? ? ??? ?? ???? ??? ? ??? sourceimagecoordinates = [0, 0, image.width, image.height];
  Const DestinationCanvasCoordinates = [0, 0, Canvas.Width, Canvas.Height];

  // CANVAS 'DrawImage ()? ???? ?? ?? ctx.DrawImage? ???? ???? ???? ???? ?????.
    ??,
    ... SourceImageCoordinates,
    ... DestinationCanvasCoordinates
  );

  // getImagedata? ??? ?? ?? ???-???? ??? ? ?????? ????? ?? ??????.
  // https://developer.mozilla.org/en-us/docs/web/html/cors_enabled_image
  const imagepixelcolors = ctx.getImageData (... DestinationCanvasCoordinates);
  ImagePixelColors ??;
}

getImageData() ???? ? ??? ??? ???? ?? ??? ?????. ? ??? ???, ??, ??? ? ???? ( "??"??????. ??? ??, ??? ?? ??? ?? ???? ??? ??? ?? ? ????. ??? ?? ???? ?? ?????.

2 ?? : ??? ?? ?? ??? ?????

? ??? ??? ???? ??? ??????. getContrast() ?? ??? ???? ? ?? ??? ???? ? ?? ?? ??? ?? ??? ???? ??? ?????. ??? ???? ??? ???? ???? ????.

? ????? ??? ???? ???? ? ??? ??? ?? ??? ???????. ?? ??? ???? ?? ??????.

? ?? ??? ??? ????? ?? ??? ??????. ?? ????? ????? (Stacie Arellano? ??? ???? ?? ? ??? ????).

W3C ??? ??? ???? ??? ?????? ??? ?? ????.

 const contrast = (lightercolorluminance 0.05) / (Darkercolorluminance 0.05);

??? ??? ?? ?? ?????? ???? ?? 8 ?? RGB ? (? ??? 0-255 ? ??)?? ?? RGB???? ??? ??????? ?? ?????. ?? ??? ?? ??? ??? ???? ?? ???? ??? ???????. ??? ??? ???? ??? ??? ???? ???????. ?? ?? ??? ???? ??? ? ????. ????? W3C? ???? ??? ?????.

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

??? ??, ? ?? ?? ????! 8 ?? RGB (0 ~ 255)? ?? RGB? ????? 0 ~ 1? ??? ?? ?? RGB (SRGB??? ?)???? ?? ?? ?????.

??? ????? ??? ????.

 <code>8位RGB → 標準RGB → 線性RGB → 亮度</code>

????? ? ?? ??? ??? ??? ?? ?? ???? ???? ?? ?? ??? ??? ?? ? ????.

 // getContrast? ?? ?? ?? ???? ??? ?????.
// ??? ??? ?? ?? ?????.
?? 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);
  ?? ??;
}

?? getLuminance ({r, g, b}) {
  return (0.2126 * getlinearrgb (r) 0.7152 * getlinearrgb (g) 0.0722 * getlinearrgb (b));
}
?? getLineArrgb (PrimaryColor_8bit) {
  // ? ?? 8 ?? RGB (0-255)?? ?? RGB (0-1)? ??
  const primarycolor_srgb = convert_8bit_rgb_to_standard_rgb (primarycolor_8bit);

  // ?? ?? SRGB?? Linear RGB? ???? ??? ???? Const PrimaryColor_RGB_LINEAR = CONVERT_STANDERD_RGB_TO_LINEAR_RGB (PrimaryColor_SRGB);
  PrimaryColor_RGB_LINEAR? ?????.
}
?? convert_8bit_rgb_to_standard_rgb (PrimaryColor_8bit) {
  PrimaryColor_8bit / 255? ?????.
}
?? convert_standard_rgb_to_linear_rgb (primarycolor_srgb) {
  const primarycolor_linear = primarycolor_srgb <p> ?? ??? ??? ? ???? ?? ???? ?????? ? ??? ???? ?? ??? ??? ?? ???? ?? ?? ??? ???????. ???? ??? ?? ?? ???? ??? (?? ??) ??? ?? ? ???, ??? ?? ???? ????? ??? ????? ??? ?? ? ????.</p><pre class="brush:php;toolbar:false"> ?? getworstContrastColorinimage (TextColor, ImagePixelColors) {
  ??? ?? ?? ?? ?????;
  ??? ?? = ???; // ??? ?? ?? ??? ???? ?????? (i = 0; i <imagepixelcolors.data.length i="4)" const r="ImagePixelColors.Data" g="ImagePixelColors.Data" b="ImagePixelColors.Data" imagepixelcolor="{r," contrast="getContrast" if><p></p>
<h3> 3 ?? : ???? ???? ??? ????? ?? ?? ?? ?? ??</h3>
<p></p>
<p> ?? ??? ????? ??? ??? ?? ??? ????? ?? ??? ????? ???? ??? ?????? ???? ??? ????? ??? ??? ??? ? ???? ????.</p>
<p></p>
<p> ?? ??? ?? ???? ? ?? ??? ???? ???? ??? ???? ??? ?????. ??? ???? ?? Ana Tudor? ?? ??? ?? ??? ??? ????? ?? ? ? ?? ??? ???? ??? ??? ??? ?? ?? ????.</p>
<p></p>
<p> ? ?? ?? (???, ?? ? ???) ??? ??? ???? ?? ??? ????.</p>
<p> ?? ?? = ?? ?? (?? ?? - ?? ??) * ??? ????</p>
<p></p>
<p> ??? ????? ??? ????.</p>
<pre class="brush:php;toolbar:false"> ?? mixcolors (basecolor, ???? ??, ???? ??) {
  const mixedColor = {
    R : BaseColor.r (???? ?? -r- basecolor.r) * ???? ??,
    G : BaseColor.g (???? ?? .g- basecolor.g) * ???? ??,
    B : BaseColor.B (???? ?? .B- BaseColor.B) * ???? ??,
  }
  MixedColor? ??????.
}

?? ??? ?? ? ? ???? ???? ???? ?? ?? ? ? ??? ??? ? ? ????.

 ?? getTextContrastWithImagePlusOverLay ({TextColor, OrdayColor, ImagePixelColor, OrdayOpacity}) {
  const colorfimagepixelplusoverlay = mixcolors (ImagePixelColor, OverlayColor, OverlayOpacity);
  const contrast = getContrast (TextColor, ColorOfImagePixElplusOverLay);
  ?? ??;
}

???? ??? ??? ???? ????? ?? ? ??? ?? ??? ??? ????!

4 ?? : ?? ??? ???? ???? ???? ??

????? ????? ????? ??? ???? ???? ??? ?? ??? ???? ??? ? ????. ???? ???? 4.5 ? ? ?? ?? ??? ???? ?? ?? ??? ??? ???? ??? ?????. ??? ??? ??? ???? ???? ????. ??? ???? ???? ?? ????. ??? ??? ??? ?? ??? ??? ?? ??? ??? ?? ??? ???? ? Binary Search? ?????.

?? ??? ?? ??? ??? ????.

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

?? ?? ??? ???? ?? ?? ???? ????? ?? ? ????.

 ?? findOpTimalOverLayOpacity (TextColor, OverlayColor, ??? CollastColorinimage, ??? ??) {
  // ??? ???? ???? ? ??? ????.
  // ??? ???? ?? ? ? ????.
  const isoverlaynecessary = isoverlaynecessary (TextColor, ??? ?? ??? -, ??? ??);
  if (! isoverlaynecessary) {
    ?? 0;
  }

  const exacitygeessrange = {
    Lowerbound : 0,
    ?? ? : 0.5,
    ?? ??? : 1,
  };
  numberofguesses = 0???;
  Const MaxGuesses = 8;

  // ???? ??? ???? ??? 1? ?????.
  // ????? ??? ???? ?? ???? ??? ? ????.
  const opcacityLimit = 0.99;

  //? ??? ??? ?? ??? ??? ????? ? ???.
    ??;
    const currentguess = irsacitygeessrange.midpoint;
    const contrast = getTextContrastWithImagePlusOverLay ({TextColor, OverlayColor, ImagePixelColor : ??? ?? ?? ???, ???? ?? : currentGuess});
    const isguesstoolow = contrast <destiredcontrast const isguesstoohigh="contrast"> desired contrast;

    if (isguesstoolow) {
      ??? GuessRange.lowerBound = CurrentGuess;
    }
    else if (isguesstoohigh) {
      ??? GuessRange.upperbound = currentguess;
    }

    const newmidpoint = ((epacityGuessRange.upperBound -OpacityGuessRange.LowerBound) / 2) ??? GuessRange.LowerBound;
    ??? GuessRange.midpoint = NewMidPoint;
  }

  const OptimalOpacity = irsacityGuessRange.midpoint;
  const hasnosolution = OptimalOpacity> ????;

  if (hasnosolution) {
    Console.log ( '??? ??'); // ??? ??? ??? ??? ?? ?? ? ??? ??? ?????.
  }
  ??? ??;
}</destiredcontrast>

??? ???? ?? ?? ?? ?? ???? ??? ?? ????? ???? ?? ? ????? ? ??? ?? ????? ??? ? ? ????.

??? ?????!

?? ? ??

??? ???? ??? ??? ??? ???? ?? ??? ??? ???? ???? ??????. ?? ??, ????? ??? ??? ??? ???? ???? ????? ???? ??? ??? ???? ????.

?? ??? ????? ????? ?? ??? ??? ?? ????. ??? ??? ????? ?? ?? ?????? ??? ???? ?? ?????. ???? ??? ????? ??? ? ? ??? ??? ?? ??? ???? ??? ??? ? ????. ??? ??? ???? ??? ??? ???? ??? ???? ???? ????.

??? ?? ?? ?? ?? ?? ? ?? ?? ???? ?????. ??? ?? ? ??? ???? ??? ??? ??? ??? ? ? ??? ????. ??? ??? ???? ??? ??? ????? ?? ???? ??? ?? ??? ??? ??? ????. ??? ?? ?? ?? ??? ? ?? ??? ?? ? ? ?? ?????.

?? ?? ?? ???? ???

? ?? ?, ?? ???? ??? ??? ???? ????.

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

? ??? ??? ???? ?? ??? ??? ??? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!