黒と白の両方のテキストに適した背景色

Question

私のWebページにはテクスチャ背景が黒で、フォアグラウンドには水色、白、灰色、黄色のテキストが表示されています。背景が黒色でない色は表示されません。誰かが私に黒と白の前景テキストの色に合う背景色を提案できますか？

kdbanman · Accepted Answer

フォアグラウンドのライトブルー、ホワイト、グレー、イエローのテキストが存在します。背景が黒色でない色は表示されません。

実際に画像またはデザインへのリンクが表示されるまで、私は判断を控えさせていただきますが、すでに油と水を混ぜようとしているようです。その問題を解決するための背景色はおそらくないので、もっと興味深い質問に取り組みましょう...

あなたが求める

黒と白の両方の前景テキストの色に合う背景色。

適切なオレンジ（および他の多くの色相）は、それを引き離すことができます。このパレットを参照し、重いフォントでそれを想像してください：

白と黒のテキストは、（少なくとも私には）許容できる程度に読める。しかし、ページ全体の背景としてのその色は圧倒されます。少し彩度を下げた同じパレットを次に示します。

uglyに見えると思いますが、黒/白のテキストはまだかなり読みやすくなっています。彩度を下げてほぼ灰色にします。

暖かみのあるグレーになり、見た目は悪くありません。しかし、私たちは eccの答えが言及している問題に直面し始めています。完全に彩度を下げて、私の意味を見てみましょう。

彩度がなければ、白と黒のテキストは背景に似すぎているため、読みにくく、面倒です。

IMO、2番目のバージョン（少し彩度が低い）は圧倒的ではなく、テキストのコントラストは許容範囲です。 Grasshopper嘔吐のように見えます。

最後に、上記のバージョンのanyは、特定の種類の色覚異常（色覚異常および色覚異常）でグレースケールバージョンに非常に近く見えることに注意してください。これがこの原則の理由の1つです。

背景色とテキスト色はvalueコントラストが高い必要があります。これは、hueと彩度のコントラストは、個人の知覚とモニター/プリンターの表現に依存しすぎています。

白（値== 255）および黒（値== 0）のテキストを使用することで、背景とのコントラストが最大127（中央）に制限されます。その範囲の）。ほとんどのデバイスでほとんどの人が読みやすくするために、暗い背景に明るいテキスト、または明るい背景に暗いテキストを選択する必要があります。同じページに明るいテキストと暗いテキストを使用できますが、背景が異なることを確認してください。