web-dev-qa-db-ja.com

特定の背景色に最適なテキスト色を決定する

JavaScriptを使用して、コントラストが良好で目に心地よいテキスト(つまり、白、灰色、または黒)に最適な色を決定する最良の方法は何ですか?色は16進数で表示されます。

2

使用するのに最適なグレーの色合いを見つける必要があると誤解しないでください。

背景色が与えられると、最高のコントラスト比を提供する前景色は白または黒のいずれかであり、中間のグレーの濃淡ではありません。

とは言っても、純粋な黒または白は、目に対して少し厳しく、あまり心地よく見えない可能性があります。コントラストが多すぎると、一部のユーザーの気を散らす可能性があります。したがって、この答えの目的のために、黒はオフブラック(たとえば#101010)を意味し、白はオフホワイト(たとえば#f0f0f0)を意味すると仮定すると、質問は「黒または白の方が私の背景色に適している」でしょうか。

別の回答で詳しく説明します で、背景の範囲によってコントラスト比がどのように変化するかを示す良いスクリーンショットの例をいくつか示します。

要約すると、与えられた2つの色に対して、コントラスト比の式があります。

コントラスト比 は、(L1 + 0.05)/(L2 + 0.05)として計算されます。

L1は次のとおりです。 相対輝度 より明るい色の

L2は、暗い色の相対的な輝度です。

あなたの場合、白とあなたのbgカラーのコントラスト比を計算するだけです。そして再び黒とあなたのbgカラーについて、そして最高のコントラスト比に応じて黒か白を選びます。

2
Roger Attrill

「目に心地よい」は非常に主観的です。

しかし、 http://leaverou.github.io/contrast-ratio/https://contrastchecker.com のような、考慮に入れる多くのコントラストツールがあります。明度コントラストと色相コントラスト。これらのツールの多くはWCAGガイドラインに基づいており、結果としてかなり標準化されているため、広く使用され受け入れられています。

3
PixelSnader