配色ロジック：なぜ、UIの「黒」は黒ではないのか

WebサイトやアプリケーションのUIをデザインする際、テキストの色や背景色にどのような「黒」を使っていますか？

CSSでとりあえず color: #000000; や color: black; と指定しているエンジニアの方も多いかもしれません。しかし、多くのサービスでは、テキストや背景に「完全な黒（#000000）」が使われていません。黒に近いグレーが使われています。

一見すると些細な違いに思えますが、実はこの「黒の選び方」には、人間の視覚や画面の特性に基づいたロジックが存在します。

今回は、なぜUIデザインにおいて「真っ黒」を避けるのか、その論理的な理由と、「良い黒」の作り方、そして例外的な使われ方を解説します。

理由1：コントラストが強すぎると目が疲れる

紙に印刷された黒い文字を読むのとは異なり、私たちが普段見ているPCやスマートフォンのディスプレイは「発光体」です。

真っ白な背景（#FFFFFF）に真っ黒なテキスト（#000000）を配置すると、画面の輝度の最大値（100%の光）と最小値（0%の光）が隣り合うことになります。この極端なコントラストは、目に対して強い刺激を与えます。

アクセシビリティの観点から「コントラスト比は高い方が良い」とされていますが、高ければ高いほど良いというわけではありません。視覚過敏を持つユーザーや、乱視のユーザーにとっても、100%のコントラストは逆に可読性を下げてしまうのです。

理由2：現実世界に「純粋な黒」はほとんど存在しない

色彩心理学や物理学の観点からも、#000000 は特異な色です。

現実世界を見渡してみてください。アスファルト、カラスの羽、黒いスマートフォンケース……私たちが日常で「黒」と認識しているもののほとんどは、光をわずかに反射しており、環境光の影響を受けてかすかに色味を持っています。光の反射率が完全に0%の「純粋な黒」は、光吸収素材のような特殊な状況にしか存在しません。

そのため、人間の脳は画面上の #000000 を見たとき、無意識に「不自然さ」や「重苦しさ」、あるいは画面に穴が空いているような「圧迫感」を感じ取ります。

UIデザインが目指すのは、現実世界の物理法則に寄り添った自然な認知です。自然界に存在しない完全な黒を避けることで、UI全体から人工的な違和感を取り除くことができます。

理由3：ダークモードで「奥行き」が表現できなくなる

近年標準となった「ダークモード」の設計において、背景を #000000 にすることはUIに制約が発生する恐れがあります。

UIデザインは、ボタンやカードなどの要素に「ドロップシャドウ（影）」をつけることで、要素が重なり合っている「Z軸（奥行き）」を表現します。手前にある要素ほど影が大きく、背景から浮き上がって見えます。

しかし、背景色が #000000（これ以上暗くならない色）の場合、その上に要素を置いて影をつけても、背景と同化してしまい影が見えません。結果として、どの要素が手前で、どれがクリック可能なのかといった階層構造（エレベーション）を視覚的に伝えることが難しくなります。

UIの「黒」の作り方

では、実際にコーディングやデザインをする際、どのような「黒」を使えばよいのでしょうか。

1. 無彩色のダークグレー

最もシンプルで失敗がないのは、明度を10パーセント程度上げたダークグレーです。

2. ブランドカラーを混ぜた「リッチブラック」

純粋なグレー（RGBの値がすべて同じ色）ではなく、ブランドのメインカラー（プライマリーカラー）をわずかに混ぜた黒、通称「リッチブラック」を使用する方法です。

例えば、上記の「Jira」のようにプライマリーカラーが「青」のサービスなら、黒にも少しだけ青味を足します。

これにより、画面全体の色調が馴染み、統一感と高級感が生まれます。

あえて「完全な黒（#000000）」を利用するケース

ここまで「使うべきではない」と解説してきましたが、あえて #000000 を利用するケースも存在します。

OLED（有機EL）ディスプレイ機器でのバッテリー節約
有機ELディスプレイは、黒を表示する際に「そのピクセルの発光を完全にオフにする」という仕組みを持っています。例えばスマートフォンアプリにて背景色を#000000とすれば、該当の端末でバッテリー消費を抑えることができます。
ハイコントラストで世界観を伝える
ブランドのコンセプトとして、意図的にエッジを効かせ、強烈なコントラストで強い印象を与えたい際に、あえて純粋な黒と白をぶつける場合があります。
アクセシビリティ要件（ハイコントラストモード）
視覚障害を持つユーザー向けにOSレベルで提供される「ハイコントラストモード」では、視認性を最優先するため、#000000 と #FFFFFF の組み合わせが意図的に使用されます。