この色の組み合わせを読みやすくするにはどうすればよいですか？

24

私は既存のウェブサイトを改善しようとしていますが、これが私が始めていることです：

<body style='
        background-color: rgb(50,101,152);
        color: red;
        text-decoration-color: red;
        text-decoration-style: solid;
        font-size: 12px;
        font-weight: 700;
        font-family: "Bitstream Vera Sans", Verdana, Lucida, Arial, Helvetica, sans-serif;
        //text-shadow: 0px 0px 15px white;
    '>
    This is hard to read!
</body>

この色の組み合わせは読みにくいと思います。他の人は同意しませんが、コントラスト、明るさ、およびその他の表示プロパティ（視野角さえ）に大きく依存することに同意しました。

ここに画像の説明を入力してください

私はすでにかなりの実験をしている-webkit-text-stroke、text-shadow（上記のコードを参照）が、私は一つのディスプレイ上で物事を改善するよう、それは別の悪くなります。

全体的な配色を維持しながら、これをさまざまなディスプレイでより読みやすくするために他に何ができますか？

color  website-design  color-theory 
— ビール
ソース
22
このコメントをクライアントに自由に見せてください。私は長年の設計経験がありますが、上記の質問の「読みやすい」と思う「他の人」は完全に間違っていることを保証できます:)スキーム全体は修復できないほど壊れているため、変更する必要があります。
— mayersdesign
15
私はデザイナーとして30年以上の経験があります...上記の@mayersdesignからのコメントにはおそらく同意できませんでした。その配色はすぐに拒否されるべきです。
— スコット
6
まず、配色の目的を理解する必要があります。UIのカラースキームでは、原色として中間色を使用するのが理にかなっています。アクセントのある色は控えめにスローする必要があります。たとえば、YouTubeの場合、どんな色が思い浮かびますか？赤と黒ですが、実際のYouTube Webページを見てみましょう。98％は白で明るい灰色です。赤は単にアクセントとして使用されます。
— ハッピーアワーコーディング
全員（回答者を含む）に感謝します！今朝から1つまたは2つのコメントになると予想していたものを見るために、SEを再確認しました。私は多くを学び、いくつかの説得力のある議論を受けました-ありがとう！
— BERを
1
1995と呼ばれます。彼らは彼らの配色を取り戻したい。
— マズラ

回答:

54

クライアントの心を変えます。

コントラストが低すぎるため、特に赤と青がコントラストの色としてうまく機能しないため、青い背景の赤いテキストは読みやすさのために極端に悪い選択であるという事実を修正できるものはありません。

このウェブサイトwebaim.orgは、2色のコントラストが哀れな1.52：1であることを示しています

コントラストは読みやすさのために重要です

テキストのコントラストは、テキストの読みやすさのより重要な側面の1つです。幸いなことに、Webコンテンツアクセシビリティガイドライン（WCAG）2.0はテキストのコントラストに特に対処し、障害者にWebアクセシビリティを提供することを目的とするが、一般的なアドバイスも提供するガイドラインを提供します。

WCAGレベルAAでは、通常のテキストで少なくとも4.5：1、大きなテキストで3：1のコントラスト比が必要です。レベルAAAでは、通常のテキストで少なくとも7：1、大きなテキストで4.5：1のコントラスト比が必要です。

したがって、クライアントのWebサイトは、公開されている専門家のガイドラインと直接矛盾しています。また、審美的な味とも矛盾しています（私の専門的な意見では）

必要に応じて、デザインで赤と青の要素を引き続き使用できます。しかし、青色の背景の上に「コンテンツサイズ」の赤いテキストを配置すると、サイトへの訪問者の大部分が姿を消すことになります。私の意見では、あなたはあなたのクライアントがそれを使わないように説得する専門的な責任を負っています。

うまくいけば、提供されたリンクは、単にと主張よりも堅牢な方法であなたのケースを作るのを助けるかもしれないあなたはそれが難しい読むことを見つけます。実際には証明可能読みにくいです。

クロモステレオプシス

それが十分に説得力がない場合は、これを試してください-Chromostereopsisは（簡単に！）視聴者に被写界深度の問題を引き起こす錯視です。不快です！

— マイヤーズデザイン
ソース
11
明確にするために、W3Cドキュメントのコントラスト比は最小値です。比率が4.5：1または7：1の間であるべきだとは言わないでください。彼らは、あなたがターゲットにしているアクセシビリティのレベルに応じて、少なくともそれらのうちの1つであるべきだと言います。
— エイドリアン・マッカーシー
1
非常に良い点は、私が答えを更新して、特にこれに関する詳細を含めることです。
— mayersdesign
8

決して完璧な（または良い）わけではありませんが、テキストに白い（またはその他の）アウトラインを追加すると読みやすくなります。

ここに画像の説明を入力してください

これは、クライアントが色を維持することを要求する場合に役立ちます。

— グレムリン
ソース
公平を期すと、36ptタイプでのみ機能します。
— user8356
はい、素晴らしいコンセプトです。皮肉ではありません。そして、適用すればするほど、テキストを読みやすくなります。だから、画面の端まで白い輪郭を取ります...ウインク、ウインク。
— マーティン・ザスケ
8

できません。これらの赤と青の色合いはどちらも暗い飽和色であり、実際に互いに振動し、そのテキストは人々の目を出血させます。テキストの読みやすさを気にしない開発者やデザイナーは、ルビーレールで町を走り去るべきです。

赤いA LOTを軽くしてみてください。ピンクに見えますが、より読みやすくなります。または、その背景に白または淡黄色を使用します。暗い背景は読みやすさで有名です。同じ一般的な色（緑がかった青）を使用できますが、より明るくすることができます。しかし、真っ赤なテキストも読みやすいものではないため、テキストの配色を破棄します。

— user8356
ソース
7

指摘されているように、それは恐ろしい色のコントラストです。また、色覚異常者にとっては悪いパレットです（赤青の色覚異常では、コントラスト比は1：1に近い値に低下しますが、これは完全に判読できません）。

ここでの最善の策は、クライアントに色付きのテキストと背景を混在させないように説得することです。テキストまたは背景のいずれか、両方ではありません。モックアップをツールにロードして、色盲の知覚をシミュレートし（いくつかの適切なオプションをオンラインで見つけることができます）、クライアントに結果を表示してみてください。

それがオプションではない場合、読みやすさを改善するために試みることができる他のものは下記のものを含んでいます（これらはどれも色覚異常の問題を解決しないことに注意してください。

  • 等幅フォントを使用します。馬鹿げているように聞こえますが、これは実際、ほとんどの人がテキストを読みやすくするのに役立ちます。明らかにCourier Newではなく、Bitstream Vera Sans Mono（またはDroid Sans Monoのようなものでさえ）はまだまともに見えるはずで、多少読みやすくなります。
  • フォントの太さ、おそらくサイズも少し大きくします。コントラストに関係なく、大きくて太いテキストは読みやすくなります。
  • カラースキームを交換します（つまり、明るい赤の背景に濃い青のテキストにします）。簡単に聞こえますが、ほとんどの人は一般的に、逆に比べて明るい青に濃い青を用意する方が簡単です。
  • オフセットを使用して、コントラストの高い狭いドロップシャドウをテキストに追加します。ここで必要なのは、背景へのブレンドではなく、良好なコントラストを提供するハードエッジです。影のオフセットもこれに役立ちます。特に、単純な斜めのオフセットが役立ちます。また、ここでは白ではなく黒を使用します（背景ではなくテキストを強調したいので、テキストとのコントラストを高めます）。全体として、線に沿ったものtext-shadow: 2px 2px 4px black;はおそらくまともな出発点です。
  • 赤を大幅に明るくします。現在、を使用していrgb(255,0,0)ます。私はrgb(255,204,204)最初に（または、おそらくもっと軽い）のようなものを試し、そこから調整します。
  • 青を暗くします。近いものrgb(25,51,77)はほぼ同じ色相ですが、テキストを読みやすくするために十分に暗い必要があります。

色覚異常の問題に役立つもう1つのオプション：

  • 青い背景の彩度を下げます。最良のオプションではありませんが（配色が多少ゆがみます）、これは私がリストした他のどのアイテムよりも読みやすくするのに役立ちます。rgb(82,102,122)出発点として、約30％低い彩度（つまり）を試します。
— オースティン・ヘメルガーン
ソース
6

すでにテキストシャドウを試した場合、同じ色を維持する唯一の可能性は、テキストスパンを作成することだと思います

ここに画像の説明を入力してください

<div> <span0>This is hard to read!</span></div><br>
<div> <span1>This is hard to read!</span></div><br>
<div> <span2>This is hard to read!</span></div><br>

スタイル

span0 {text-shadow: 0px 2px 1px black;
}

span1 {padding:0 4px;
background-color: rgba(255,255,255,0.25);
position:relative;
display:inline-block;
}

span2 {padding:0 4px;
background-color: rgba(0,0,0,0.35);
position:relative;
display:inline-block;
}
— ダニエリロ
ソース
1
あるいはハード真っ白ですより良い
— aloisdgが復活モニカ言う
1
それらは私のために、まだ読みにくいです...
— ハッピーアワーコーディング
@Dylanについて、あなたはどう思いますかjsfiddle.net/bersbers/xdkj76L3
— BERを
2
読みやすい。良い考えだとは思いません。しかし、それは読むことができます。
— ハッピーアワーコーディング
— yunzen
5

背景とテキスト（フォアグラウンドのオブジェクト）の間のコントラスト比は、4.5：1の最小コントラスト比で読みやすくする必要があります。 https://www.oss-usa.com/color-check-ada-image-complianceは、背景と前景が近すぎて読めないことを示しています。

読みやすさの要件を満たすために、配色を完全に保存することはできず、修正する必要があることをクライアントに伝える必要がある場合があります。明らかに、テキストを明るい色に反転すると、暗い背景に対して十分なコントラストが得られます。

— マックス・トックマン
ソース
3

「どのようにしてテキストを読みやすくしますか？」要するに、あなたはしません！色の組み合わせはWebアクセシビリティガイドラインに適合していないため、使用しないでください。別の前景色または背景色を使用する必要があります。想定しているターゲットオーディエンスが誰であっても、視覚障害を持つ人々に対応することを常に目標とすべきであり、これは簡単な修正です。

あなたの色の組み合わせのコントラスト比はここで見ることができます... https://snook.ca/technical/colour_contrast/colour.html#fg=FF0000,bg=326598

— アンドリュー
ソース
2

（コメントするのに十分なポイントではありません）

テキストにストロークを追加してみてください。私は、フォトショップの意味で「ストローク」という用語を使用しています。基本的には、テキストの境界線/輪郭の色をコントラストとして使用します。黒/白は問題ないはずです（特にストロークの太さで遊ぶ場合）が、赤/青の特定の色合いもうまくいくと思います。

— すべての
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.