軽いテキストと背景画像の完全なコントラストを釘付けにする

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

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

このような：

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

プラン

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

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

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

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

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

始めましょう！

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

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

 function getImagePixElColorSusingCanvas（画像、キャンバス）{
  //キャンバスのコンテキスト（通常は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（）は、画像の測定値をキャンバスにマッピングすることで機能します。
    画像、
    ... sourceimageCoordinates、
    ... DestinationCadCoordinates
  ）;

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

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

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

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

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

2色のコントラストを計算するには、本質的に明るさである明るさのレベルを知る必要があります（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は、直接対話する必要がある唯一の関数です。
//残りの関数は中間補助手順です。
関数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）;
  コントラストを返す;
}

関数getlunance（{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から線形RGBに変換して、それを使用して明るさを計算できるようにしますPrimaryColor_rgb_linear = convert_standard_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）{
  最悪のコロリニメージをしましょう。
  最悪のコントラスト= 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 id="ステップ-オーバーレイの不透明度をテストするために-色混合式を準備する">ステップ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">関数ミックスコラー（ベースカラー、オーバーレイカラー、オーバーレイパシティ）{
  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を返します。
}

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

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

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

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

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

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

 <code>- 在中间猜测。 - 如果猜测过高，我们将消除答案的上半部分。太低了吗？我们将改为消除下半部分。 - 在新的范围中间猜测。 - 重复此过程，直到我们得到一个值。我碰巧有一个工具可以展示它是如何工作的：在这种情况下，我们试图猜测一个介于0和1之间的不透明度值。因此，我们将从中间猜测，测试结果对比度是太高还是太低，消除一半的选项，然后再次猜测。如果我们将二分查找限制为八次猜测，我们将立即得到一个精确的答案。在我们开始搜索之前，我们需要一种方法来检查是否根本需要叠加层。我们根本不需要优化我们不需要的叠加层！ ```javascript function isOverlayNecessary(textColor, worstContrastColorInImage, desiredContrast) { const contrastWithoutOverlay = getContrast(textColor, worstContrastColorInImage); return contrastWithoutOverlay </code>

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

関数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;

  //このループは、結果が得られるまで推測を繰り返し絞り込みます（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>

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

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

改善と制限

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

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

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

途中で何かを学びました

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

 <code>- **明确目标非常有帮助！**我们从一个模糊的目标开始，即想要在图像上显示可读的文本，最终得到了一个我们可以努力达到的特定对比度级别。 - **明确术语非常重要。**例如，标准RGB并非我所期望的。我了解到，我认为的“常规”RGB（0到255）正式称为8位RGB。此外，我认为我研究的方程式中的“L”表示“亮度”，但它实际上表示“亮度”，这不能与“光度”混淆。澄清术语有助于我们编写代码以及讨论最终结果。 - **复杂并不意味着无法解决。**听起来很困难的问题可以分解成更小、更容易管理的部分。 - **当你走过这条路时，你会发现捷径。**对于白色文本在黑色透明叠加层上的常见情况，您永远不需要超过0.54的不透明度即可达到WCAG AA级可读性。 ### 总结…您现在有了一种方法可以在背景图像上使文本可读，而不会牺牲过多的图像。如果您已经读到这里，我希望我已经能够让您大致了解其工作原理。我最初开始这个项目是因为我看到（并制作了）太多网站横幅，其中文本在背景图像上难以阅读，或者背景图像被叠加层过度遮挡。我想做些什么，我想给其他人提供一种同样的方法。我写这篇文章是为了希望你们能够更好地理解网络上的可读性。我希望你们也学习了一些很酷的canvas技巧。如果您在可读性或canvas方面做了一些有趣的事情，我很乐意在评论中听到您的想法！</code>

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