テキストやボーダーや背景に使うグレーを効果的に、ニュートラルなカラーを使いこなすためのテクニック

Webデザインで大切なカラーはベースカラーやアクセントカラー、そしてブランドのカラーがありますが、テキストやボーダーや背景などのコンポーネントに使うニュートラルなカラーも非常に重要です。

明るいニュートラルなカラー、暗いニュートラルなカラーをWebデザインで使いこなすためのテクニックを紹介します。

Light & Dark Color Systems

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• 明るいカラーと暗いカラーを使用する準備
• 明るいカラーと暗いカラーを理解する
• 明るいカラーと暗いカラーをカラーパレットで使う時の注意点

明るいカラーと暗いカラーを使用する準備

コンポーネントで使用するニュートラルカラー

カラーを選ぶ前に大切なのは、すでに使用しているニュートラルなカラーを調べることです。実際に一部のライブラリでは、すでに少数のカラー（8色・10色・12色など）に制限されています。
下図の下のようにニュートラルなカラーを豊富に用意しても、実際は区別がつきません。

ニュートラルなカラーをまとめたパレット

カラーを選択する基準はHEX値がはっきりと異なるカラーをライトからダークに順序づけ、重複させずに、調和の取れた組み合わせを準備します。

次に、コンポーネントで使用するカラーを調べて、テキスト、背景、ボーダーのカラーとしてニュートラルカラーがどのように適用されるかを理解しておきます。特に、パターンと不一致は調和が取れているかが重要です。

本文に3, 4種類のニュートラルカラーを使用していませんか？ カラーを多様化するのは、使い分けが複雑になることより大切なメリットがありますか？

背景を使用してコンポーネントのデザインを調整する

下記はSketchを使用して、基本的なコンポーネントを積み重ねて配置したものです。システムが推奨する背景色ごとに、コンポーネントを複製しました。

基本的なコンポーネントを異なる背景色に配置

背景のカラーを変化させると、デザインされたコンポーネントが効果的に機能するか確認することができます。

明るいカラーと暗いカラーを理解する

ライトとダーク、明暗のシステムを作成するには、背景やテキストをはじめ、ボーダー、レイヤーなど、使用するCSSのプロパティの範囲を理解しておく必要があります。

背景のカラー: 単に明るい暗いの指定だけでなく、ほかにも

あなたはいくつの異なる明るい、暗いカラーが必要ですか？
多くのデザイナーはシンプルな結論を出します。明るいカラーはピュアホワイト「#FFFFFF」、暗いカラーはブラックキャンバス「#222222」を選びます。

ライト、ダーク

また、別のデザイナーはニュートラルな背景の範囲を広げています。
例えば、明るいグレーや暗いグレーをオーバーレイさせたり、チャコールの暗い背景とは異なるピュアブラックを選択するかもしれません。ポイントは、明るさと暗さのそれぞれに一対のカラーを持たせるとことです。

ホワイト、ライト、ダーク、ブラック

もう一歩進めた洗練されたカラー パレットをつくるには、ホワイトとブラックの間際から始まり、暗いライトグレイと明るいチャコールの連続したレイヤーを作成します。

ライト、ダーク

カラーの最適化とメンテナンスの選択肢は、たくさんあります。しかし私はシンプルであることを好むので、例えば主題の背景にオレンジやブルーやグリーンを使うのではなく、ライトとダークで解決できないか試します。

テキストのカラー: 文字は読みやすく

ライブラリで、テキストのカラーのシンプルなデモがないことがあります。その代わりに、カードやラベルやボタンやフォームなど、他のコンポーネントのテキストは任意にカラーが使用されているかもしれません。

テキストのカラーは、本文のテキストから始めて、体系的に決めるのがベストです。

• primary text: 本文用の主要なテキストのカラー、ラベルなどにも使用。
• secondary text: フォームの小さい文字、キャプション、テーブルの見出しなど。
• interactive text: リンクなど。
• inlineerror text: コントロールに隣接されたテキスト。
• disabled text: フォームのコントロールやボタン。

「tertiary text」というのもあり、それはアクセスできないコントラストになる傾向で、「secondary text」との区別に欠けます。また、アイコンの塗りつぶし/テキストのカラーも含めることができます。すでに使用しているprimary, secondary, interactiveのカラーで、アイコンにカラーを付けることもできます。

上記の5つのアイテムに基づいて、背景ごとにテキストのカラーを選択してみます。

テキストのカラーを異なる背景色ごとに選択

一つ確かなことは、アクセシブルで調和のとれた暗いカラーでは、リンクとエラーのテキストのカラーを決めるのは難しいです。デザイナーの多くは背景が暗い時、ホワイトを使います。

暗い背景に、ブルーやレッドはアクセシビリティで問題がある

少なくとも、primary, secondary, interactive, inlineerrorのテキストを含むカラーは分類できるようにします。tertiaryやアイコン用のカラーは注意深く考慮する必要があります。

コントロールのボーダーのカラー: ストロークは十分に強く

コントロールとはフォームの入力ボックス、ラジオボタンなどで、視認性とユーザビリティのために強いコントラストが必要です。コントロールのボーダーのカラーは大きな役割を担っており、背景は入れ替えても入れ替えなくても機能します。フォーカス時やエラー時にボーダーのカラーで注目を与えるのも効果的です。

コントロールのボーダーのカラー

通常時とフォーカス時で見分けがつくか、確認が必要です。

区切りとしてのボーダーのカラー: 太線・細線のヘアラインが必要ですか？

デザイナーは細いライン（ヘアライン）を使用して、セクション、データテーブルの行、リストグループ内のアイテムをデザインすることができます。

区切りとしてのボーダーのカラー

ヘアラインが太線でも細線でも、ヘアライン自体を調整すると、背景の単純なプロパティの定義と類似した構造の恩恵を受けることができます。

不透明度で調整

ボタン、タブ、リスト、リンクを選択したなど、hover, activeのようなインタラクティブな状態にもニュートラルなカラーは使用されます。

UIのインタラクティブな状態

通常は普通のカラーと同様に、5%暗くしたり、80%不透明度を加えるとうまく機能します。そして、背景ごとに見た目の調整が必要です。

背景に重ねた背景のカラー: レイヤーの関係を明確に

カードのようなコンポーネントがニュートラルな背景を持ち、それ自体が別のニュートラルな背景に配置されていると、面白いことになります。つまり、背景の上の背景の上でテキストのカラーを決める必要があります。すべての背景と背景の組み合わせがうまくいくかがポイントです。

背景と背景の組み合わせ

カードの背景とページの背景のコントラストが微妙な時は、box-shadowを与えるとうまくいきます。

明るいカラーと暗いカラーをカラーパレットで使う時の注意点

アクセシビリティ: リアルタイムで調整する

カラーの組み合わせを選択するときは、アクセシビリティが重要です。おそらく、あなたはニュートラルを調整し、カラーをニュートラルに合わせるでしょう。調整する際には、コントラストを十分に保つようにしてください。

下記のContrast Gridでは、テキストと背景のさまざまな組み合わせを視覚化し、アクセシブルかどうかスコアを表示します。

Contrast Grid

このツールは各組み合わせをグリッドで視覚化することで、それぞれを比較したり、調整したり、適切なニュートラルカラーを選択することができます。

ニュートラルのパレットの調整

カラーシステムを最適化するには、変更することを見込んでおきます。プロジェクトによっては、パレット全体を変更するのを避けることはできませんが、グレーに青みを加えたスレートやチャコールに変更して、クールで穏やかな印象を与えることができます。

Material Designのカラーパレット

ほかにも、ニュートラルなカラーを1つだけ追加したり、中間のカラーを置き換えて、失敗したアクセシビリティのテストに合格する必要があります。

38を削除して、42を追加

ニュートラルなカラーを追加、調整、削除することで、カラーパレットに十分なオプションを確保できます。

トークン化の選択肢

すべての構造において、実装を容易にするべきです。デザイントークンは意思決定をドキュメント化し、他の人（デザイナーとデベロッパーを問わず）とのコミュニケーションを円滑にするための優れた方法です。

システムとライブラリのコンポーネントで使用されるトークン化された変数の一覧を作成するとよいでしょう。

1ページ内に明るいカラーと暗いカラーの両方を使う時のCSSのメソッド

明るい部分と暗い部分を一緒に同じページで使用すると、CSSの競合が起こります。1つの大きな「明るい」コンテナには、「明るい」コンポーネントを持つ別の「暗い」コンテナ自体を含めることができます。CSSの長すぎるセレクタは面倒な作業になり、一番上のコンテナにクラスを適用すると問題が発生します。

こういった問題を解決するために、例えばbodyタグに明るい用のclassや暗い用のclassを加えればよいでしょうか？ ページ全体のインターフェイスが一つであれば、それで解決します。しかし、同じページで一緒に使用する場合は、それぞれのコンポーネントで管理する方法が最適です。