web-dev-qa-db-ja.com

背景色、黒または白のテキストを指定しますか？

背景色（16進値として）を指定して、黒または白のテキストを使用するかどうかを決定する方法を見つけようとしています。誰かがこれに以前に対処したことがありますか？これを行う効果的な方法はありますか？

私の場合、ロジックを実装するためにPHPを使用します（ただし、他の言語でこれを使用した経験は大歓迎です）。

phpcsscolorshex
39
Wilco

このページを見てください： PHPで色のコントラストを計算する

黒と白が唯一の選択肢である場合は、どちらも特にうまく機能しない場合があることに注意してください。

37
ChssPly76

最善の方法はLuminosity Contrastアルゴリズム：

function getContrastColor($hexColor) {

        // hexColor RGB
        $R1 = hexdec(substr($hexColor, 1, 2));
        $G1 = hexdec(substr($hexColor, 3, 2));
        $B1 = hexdec(substr($hexColor, 5, 2));

        // Black RGB
        $blackColor = "#000000";
        $R2BlackColor = hexdec(substr($blackColor, 1, 2));
        $G2BlackColor = hexdec(substr($blackColor, 3, 2));
        $B2BlackColor = hexdec(substr($blackColor, 5, 2));

         // Calc contrast ratio
         $L1 = 0.2126 * pow($R1 / 255, 2.2) +
               0.7152 * pow($G1 / 255, 2.2) +
               0.0722 * pow($B1 / 255, 2.2);

        $L2 = 0.2126 * pow($R2BlackColor / 255, 2.2) +
              0.7152 * pow($G2BlackColor / 255, 2.2) +
              0.0722 * pow($B2BlackColor / 255, 2.2);

        $contrastRatio = 0;
        if ($L1 > $L2) {
            $contrastRatio = (int)(($L1 + 0.05) / ($L2 + 0.05));
        } else {
            $contrastRatio = (int)(($L2 + 0.05) / ($L1 + 0.05));
        }

        // If contrast is more than 5, return black color
        if ($contrastRatio > 5) {
            return '#000000';
        } else { 
            // if not, return white color.
            return '#FFFFFF';
        }
}

// Will return '#FFFFFF'
echo getContrastColor('#FF0000');

いくつかの結果：

 enter image description here

注：フォントの色は前の関数によって決定されます。括弧内の数字はコントラスト比です。


YIQ（と呼ばれるもう1つの最も単純で精度の低い方法は、RGB色空間を [に変換するためです。 〜＃〜] yiq [〜＃〜]）：

public function getContrastColor($hexcolor) {               
    $r = hexdec(substr($hexcolor, 1, 2));
    $g = hexdec(substr($hexcolor, 3, 2));
    $b = hexdec(substr($hexcolor, 5, 2));
    $yiq = (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
    return ($yiq >= 128) ? 'black' : 'white';
}
24
tomloprod
  function getTextColour($hex){
    list($red, $green, $blue) = sscanf($hex, "#%02x%02x%02x");
    $luma = ($red + $green + $blue)/3;

    if ($luma < 128){
      $textcolour = "white";
    }else{
      $textcolour = "black";
    }
    return $textcolour;
  }
7
Vincent

CSSカラーライブラリ をご覧ください。 PHPに実装されており、すべてのハードワークを実行します。

2
DarkBlue

テキストの光度コントラスト比を計算するために使用できるアルゴリズムは次のとおりです。

http://juicystudio.com/services/aertcolourcontrast.php

この式を白と黒の値で使用して、比率を高くし、テキストを読みやすくする計算を行うことができます。

2
Matt Howell

単純ですが完全ではない解決策は、個々のコンポーネント（RGB）を合計し、この値が大きいほど「色が薄くなる」ことです。したがって、値が高い場合は前景として黒を使用し、値が低い場合は白を使用できます。

次に、この方法を改善して、グレースケールカラー（R = G = B）の特定のケースを作成します。これは、非常に暗いグレーを除いて、白いテキストを適切に表示しません。

編集：これはもちろん、16進数値でRGBストレージの形式を知る必要があることを意味します。標準の24bppストレージは8桁の16進数で0x00RRGGBBです。

1
DeusAduro

私はrgbコンポーネントの平均値を計算してから、黒と白のどちらを使用するかを決定します。 0x66までの白

0
knittl