テキストを任意の背景色と一致させる

あなたは色を生成したカードの中にテキストを使用する必要がありますか?ユーザーにナババーのようなテキストを含むコンポーネントのために彼ら自身の色を選ぶ能力を与えます?これらは、テキストが現在の背景色に適応する必要がある状況です.それぞれの色を作るテキストは退屈でスケーラブルになります.輝度とコントラスト比を使用することによって、アクセス可能なコントラストを保証している間、テキストが暗いか明るいかどうか決定することができます.

コントラスト比
背景とテキストの目標は、それは簡単に適度に低い視力とそれらを含むユーザーによって読み取ることができるということです.テキストが読みやすいかどうか理解するために、最初に、我々はコントラスト比が何であるかについて理解しなければなりません.コントラスト比は、最も暗い色(白)の輝度(光量)によって定義されるプロパティである.W 3 Cによると、式は(L1 + 0.05) / (L2 + 0.05) , どこ

L 1は、色のライターの相対輝度であり、

L 2は、色のより暗いの相対的な輝度です.

輝度スケールは0から0 . 0から行くことができます.黒0.0と白1.0です.場合は、スケールの間隔の極端との比率を計算することに注意することがあります(1.0 + 0.05) / (0.0 + 0.05) 私たちは21を得ます、そして、両方が0.0であるならば、我々は1を得ます.これは、比が1から21の範囲であることを意味する.一般的に1:1〜21:1と表記する.
テキストと背景の間の推奨コントラスト比は少なくとも4.5 : 1でなければなりません.

動的にテキストの色を決定する
今我々はどのようなコントラスト比を知っている必要があります知っている.我々が使用する色を決定することができるように、式を見つける時間です.
マークランサムによると、我々は暗いまたは明るい色を必要とするかどうかを判断するには、我々は、白と黒の背景色のコントラストを比較する必要があります.黒のコントラストが高いならば、我々は黒を使います、さもなければ、我々は白を使います.JavaScriptで次のように表現できます:

if ((L + 0.05) / (0.0 + 0.05) > (1.0 + 0.05) / (L + 0.05)){
    use #000000
} else {
  use #ffffff
}

簡単に言えば:

if (L > Math.sqrt(1.05 * 0.05) - 0.05){
    use #000000
} else {
  use #ffffff
}

今、すべてが残っているの輝度を計算している!

輝度の計算
あなたがRGBカラーを持っているならば、輝度を得ることは非常に簡単です.W 3 Cによると、輝度のための公式はそうですL = 0.2126 * R + 0.7152 * G + 0.0722 * B ここでR、G、Bを定義する.

を返します.
その後、
else R = ((RsRGB+0.055)/1.055) ^ 2.4

を返します.
then G = GsRGB/12.92
else G = ((GsRGB+0.055)/1.055) ^ 2.4

を返します.
その後、
else B = ((BsRGB+0.055)/1.055) ^ 2.4

JavaScriptでは以下のようになります.

/*
    If color has the following format: 
    const rgbColor = {
        r: 100,
        g: 100, 
        b: 100
    }
*/

// Extracted from Polished
// Code is licensed with an MIT license
function getLuminance(rgbColor){
 const [r, g, b] = Object.keys(rgbColor).map(key => {
    // Our color numbers represent a 8bit channel. 
        // The formula requires a sRGB channel which is defined by 
        // ColorChannelIn8bit / 255
    const channel = rgbColor[key] / 255
    return channel <= 0.03928
      ? channel / 12.92
      : ((channel + 0.055) / 1.055) ** 2.4
  })
  return parseFloat((0.2126 * r + 0.7152 * g + 0.0722 * b).toFixed(3))
} 

頻繁に、我々はRGBで色を持っていないが、16進数または色の名前です.だから私はチェックアウトをお勧めしますpolished を公開するライブラリgetLuminance 関数を返します.

一緒にすべてをもたらす
我々は、その輝度を使用して色の値を決定し、コントラスト比を比較する方法を知っているので、我々はアプリにそれを適用する準備が整いました.このポストのために、私は速いシナリオをすることでこれをする方法を示します.我々は、ユーザーがカラーピッカーで背景色を変更することができますカードがあります.私たちの仕事は、アクセス可能なすべてのユーザーに見えるテキストの色を選択することです.
完成品のサンドボックスです.それをいじるために自由に感じなさい!

結論
バックグラウンドにマッチするテキスト色を調整することは、ダイナミックなUISを開発するとき、非常に一般的です.4.5 : 1のコントラスト比は、テキストと背景の間にアクセス可能なコントラストを保証するために不可欠です.背景色の輝度を用いて白と黒のコントラスト比を比較することにより、効率的にバックグラウンドで使用されるテキスト色を決定することが可能である.
より最新のウェブ開発内容のために、私に続いてください!読書ありがとう!😎

参考文献

https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color

https://www.w3.org/TR/WCAG20/

私はニュースレターを知っていましたか?📬
あなたが私が新しいブログ柱を公表して、ウェブ開発において前に滞在するものすごい毎週の資源を受け取るとき、あなたが通知されたいならばhttps://jfelix.info/newsletter .