軽い背景畫像に重ねられたウェブサイトで軽いテキストに遭遇したことがありますか？あなたがそれに遭遇した場合、あなたは読むのがどれほど難しいかを知っているでしょう。これを避けるための一般的な方法の1つは、透明なオーバーレイを使用することです。しかし、これは重要な質(zhì)問をもたらします：オーバーレイの透明性はどれほど高くすべきですか？私たちは常に同じフォントのサイズ、厚さ、色を扱うとは限りません。もちろん、異なる寫真も異なるコントラストを生み出します。

ゴブリンゲームをプレイするのと同じように、背景畫像のテキストコントラストが不十分な問題を排除してみてください。推測するのではなく、HTMLを使用してください<canvas></canvas>そして、この問題を解決するためのいくつかの數(shù)學(xué)的方法。

このような：

「問題は解決されました！」と言えます。そして、この記事を終了します。しかし、これの楽しみは何ですか？私があなたに示したいのは、この一般的な問題に対処するための新しい方法を習(xí)得できるように、このツールがどのように機能するかです。

プラン

まず、目標を明確にしましょう。背景畫像に読み取り可能なテキストを表示したいと言いましたが、「読みやすい」とはどういう意味ですか？私たちの目的のために、WCAGのAAレベルの読みやすさの定義を使用します。これは、テキストと背景色の間に十分なコントラストが必要であるため、ある色が他の色よりも4.5倍明るくなるようにします。

テキスト色、背景畫像、オーバーレイの色を出発點として選択しましょう。これらの入力を考えると、畫像を隠すことなくテキストを読みやすくするオーバーレイの不透明度レベルを見つけたいと考えています。物事を少し複雑にするために、暗い色と明るい色の両方の寫真を使用し、オーバーレイがそれを考慮していることを確認します。

最終結(jié)果は、オーバーレイのCSS Opacityプロパティに適用できる値になります。これにより、テキストが背景よりも4.5倍明るくなります。

最適なオーバーレイの不透明度を見つけるために、4つのステップを?qū)g行します。

1. 畫像をHTMLに入れました<canvas></canvas>これにより、寫真の各ピクセルの色を読むことができます。
2. 寫真には、テキストとはほとんど対照的なピクセルがあります。
3. 次に、そのピクセルの色に対する異なる不透明レベルの効果をテストするために使用できる色の混合式を準備します。
4. 最後に、テキストのコントラストが読みやすさの目標に達するまで、オーバーレイの不透明度を調(diào)整します。これはランダムな推測ではありません。バイナリ検索手法を使用してこのプロセスを高速化します。

始めましょう！

ステップ1：キャンバスから畫像の色を読みます

キャンバスを使用すると、畫像に含まれる色を「読み取る」ことができます。これを行うには、畫像を「描く」必要があります<canvas></canvas>要素では、Canvasコンテキスト（CTX）のgetImageData()メソッドを使用して、畫像色のリストを生成します。

 function getImagePixElColorSusingCanvas（畫像、キャンバス）{
  //キャンバスのコンテキスト（通常はCTXとして略される）は、キャンバスを制御するための多くの関數(shù)を含むオブジェクトです
  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（）は、畫像の測定値をキャンバスにマッピングすることで機能します。
    畫像、
    ... sourceimageCoordinates、
    ... DestinationCadCoordinates
  ）;

  // getImagedataは、同じソースまたはクロスオリジンが有効になっている畫像でのみ動作することを忘れないでください。
  // https://developer.mozilla.org/en-us/docs/web/html/cors_enabled_image
  const imagepixelcolors = ctx.getimagedata（... DestinationCanvasCoordinates）;
  ImagePixelColorsを返します。
}

getImageData()メソッドは、各ピクセルの色を表す數(shù)字のリストを提供します。各ピクセルは、赤、緑、青、不透明度（「アルファ」とも呼ばれます。これを知って、ピクセルリストを繰り返して必要な情報を見つけることができます。これは次のステップで非常に役立ちます。

ステップ2：コントラストが最も少ないピクセルを見つけます

その前に、コントラストを計算する方法を知る必要があります。 getContrast()という関數(shù)を書き込み、2色のコントラストのレベルを示す2つの色を取得し、數(shù)値を出力します。數(shù)が高いほど、コントラストが高くなり、読みやすくなります。

このプロジェクトの色の調(diào)査を開始したとき、私は簡単な式を見つけることを期待していました。複數(shù)のステップがあることが判明しました。

2色のコントラストを計算するには、本質(zhì)的に明るさである明るさのレベルを知る必要があります（Stacie Arellanoは明るさを詳細に見ていますが、これは見る価値があります）。

W3Cのおかげで、明るさを使用してコントラストを計算するための式を知っています。

 const contrast =（Lightercolorluminance 0.05） /（darkercolorluminance 0.05）;

色の明るさを取得するということは、ネットワークで使用されている通常の8ビットRGB値（各色が0-255）からリニアRGBと呼ばれるものに色を変換する必要があることを意味します。色の変化とともに明るさが均等に増加しないため、これを行う必要があります。色を色とともに均等に変化させる形式に色を変換する必要があります。これにより、明るさを正しく計算できます。同様に、W3Cはここでヘルプを提供します。

 const luminance =（0.2126 * getlinearrgb（r）0.7152 * getlinearrgb（g）0.0722 * getlinearrgb（b））;

しかし、待って、もっとあります！ 8ビットRGB（0?255）を線形RGBに変換するには、0?1の比率の標準RGB（SRGBとも呼ばれる）と呼ばれるものを通過する必要があります。

したがって、プロセスは次のとおりです。

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

比較したい2つの色の明るさが得られたら、輝度値を式に置き換えて、それぞれの色のコントラストを得ることができます。

 // getContrastは、直接対話する必要がある唯一の関數(shù)です。
//殘りの関數(shù)は中間補助手順です。
関數(shù)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）;
  コントラストを返す;
}

関數(shù)getlunance（{r、g、b}）{
  return（0.2126 * getlinearrgb（r）0.7152 * getlinearrgb（g）0.0722 * getlinearrgb（b））;
}
関數(shù)getlinearrgb（primarycolor_8bit）{
  //最初に8ビットRGB（0-255）から標準RGB（0-1）に変換
  const primarycolor_srgb = convert_8bit_rgb_to_standard_rgb（primarycolor_8bit）;

  //次に、SRGBから線形RGBに変換して、それを使用して明るさを計算できるようにしますPrimaryColor_rgb_linear = convert_standard_rgb_to_linear_rgb（primarycolor_srgb）;
  PrimaryColor_rgb_linearを返します。
}
関數(shù)convert_8bit_rgb_to_standard_rgb（primarycolor_8bit）{
  PrimaryColor_8bit / 255を返します。
}
関數(shù)convert_standard_rgb_to_linear_rgb（primarycolor_srgb）{
  const primarycolor_linear = primarycolor_srgb <p>コントラストを計算できるようになったので、前のステップで畫像を調(diào)べ、各ピクセルを反復(fù)して、そのピクセルの色と前景テキストの色のコントラストを比較する必要があります。畫像のピクセルを橫斷すると、これまでのところ最悪の（最低）コントラストを追跡し、ループの終わりに到達すると、畫像の最悪のコントラストを持つ色がわかります。</p><pre class="brush:php;toolbar:false">関數(shù)getWorstContrastColorInimage（TextColor、ImagePixelColors）{
  最悪のコロリニメージをしましょう。
  最悪のコントラスト= Infinityとします。 //これにより、低すぎる値から開始しないことが保証されます（i = 0; i <imagepixelcolors.data.length i="4）{" const r="imagepixelcolors.data" g="imagepixelcolors.data" b="imagepixelcolors.data" imagepixelcolor="{r、g、b};" contrast="getContrast（TextColor、ImagePixelColor）;" if wortcontrastcolorinimage="ImagePixelColor;"><p></p>
<h3>ステップ3：オーバーレイの不透明度をテストするために、色混合式を準備する</h3>
<p></p>
<p>畫像に最悪のコントラストがある色がわかったので、次のステップは、オーバーレイの透明性がどれほど高いかを判斷し、これがテキストとのコントラストをどのように変えるかを確認することです。</p>
<p></p>
<p>私がこれを最初に実裝したとき、私は別のキャンバスを使用して色を混ぜて結(jié)果を読みました。ただし、透明性に関するAna Tudorの記事のおかげで、基本色と透明なオーバーレイを混合した後、結(jié)果の色を計算する便利な式があることがわかりました。</p>
<p></p>
<p>各カラーチャネル（赤、緑、青）について、この式を適用してブレンド色を取得します。</p>
<p>混合色=基本色（重複色 - 基本色） *重複する不透明</p>
<p></p>
<p>したがって、コードでは、これは次のようになります。</p>
<pre class="brush:php;toolbar:false">関數(shù)ミックスコラー（ベースカラー、オーバーレイカラー、オーバーレイパシティ）{
  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、
  }
  MixedColorを返します。
}

色を混合できるようになったので、オーバーレイの不透明な値を適用するときにコントラストをテストできます。

関數(shù)getTextContrastWithimagePlusOverLay（{textColor、overlayColor、ImagePixelColor、anoverlayopacity}）{
  const colorofimagepixelplusoverlay = mixcolors（imagepixelcolor、overlaycolor、overlayopacity）;
  const contrast = getContrast（textColor、colorOfImagePixElPlusOverLay）;
  コントラストを返す;
}

これにより、最高のオーバーレイの不透明度を見つけるために必要なすべてのツールがあります！

ステップ4：コントラストターゲットに到達するオーバーレイの不透明度を見つける

オーバーレイの不透明度をテストし、これがテキストと畫像のコントラストにどのように影響するかを確認できます。テキストが背景の4.5倍明るいターゲットコントラストに到達する値を見つけるまで、さまざまな不透明度レベルを試します。これはクレイジーに聞こえるかもしれませんが、心配しないでください。ランダムに推測しません。バイナリ検索を使用します。これは、正確な結(jié)果が得られるまで、可能な回答セットをすばやく絞り込むことができるプロセスを使用します。

バイナリ検索の仕組みは次のとおりです。

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

これで、バイナリ検索を使用して、最適なオーバーレイの不透明度を見つけることができます。

関數(shù)FindOpTimalOverLayopacity（TextColor、OverlayColor、最悪のコロリニメージ、希望するコントラスト）{
  //コントラストが十分である場合は、オーバーレイする必要はありません。
  //殘りをスキップできます。
  const isoverlayn decessary = isoverlayn diseversery（textcolor、quartcontrastcolorinimage、希望するコントラスト）;
  if（！isoverlaynebersaer）{
    0を返します。
  }

  const ofacityguessrange = {
    低い境界：0、
    ミッドポイント：0.5、
    上限：1、
  };
  numberofguesses = 0;
  const maxguesses = 8;

  //解決策がない場合、不透明な推測は1に近くなります。
  //それを上限として使用して、解決策のない狀況を確認できます。
  const opacitylimit = 0.99;

  //このループは、結(jié)果が得られるまで推測を繰り返し絞り込みます（numberofguesses <maxguesses numberofguesses const currentguess="opacityguessrange.midpoint;" contrast="getTextContrastWithimagePlusOverLay（{textColor、overlayColor、ImagePixElColor：wortContrastColorinimage、overlayopacity：currentGuess}）;" isguesstoolow="contrast" isguesstoohigh="contrast">希望するcontrast;

    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'）; //必要に応じて解決できない狀況を処理してください。
  }
  optimalopacityを返します。
}</maxguesses>

実験が完了したら、背景畫像をあまりにも多く隠すことなく、テキストを読みやすくするためにオーバーレイがどれほど透明になるかを正確に知っています。

私たちはそれをしました！

改善と制限

紹介する方法は、テキストの色とオーバーレイの色自體が十分なコントラストを持っている場合にのみ効果的です。たとえば、オーバーレイと同じテキスト色を選択した場合、畫像がオーバーレイをまったく必要としない限り、最適なソリューションはありません。

また、コントラストは數(shù)學(xué)的に受け入れられるにもかかわらず、これは必ずしも見栄えを保証するとは限りません。これは、明るいオーバーレイと忙しい背景畫像を備えた暗いテキストに特に當てはまります。畫像の一部はテキストから気を散らす可能性があり、コントラストが數(shù)値的に良好であっても読むのが難しい場合があります。そのため、人気のあるアドバイスは、暗い背景に明るいテキストを使用することです。

また、ピクセルの位置または色あたりのピクセル數(shù)を考慮しませんでした。これの1つの欠點は、コーナーのピクセルが結(jié)果に過度に影響を與える可能性があることです。しかし、利點は、畫像の色がどのように分散されているか、またはテキストがどこにあるかを心配する必要がないことです。

途中で何かを?qū)Wびました

この実験の後、私は何かを手に入れました、そして私はあなたとそれを共有したいです：

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

以上が軽いテキストと背景畫像の完全なコントラストを釘付けにするの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。