カラーテーブル

標準のカラーテーブル

echo.cssで使用されている、標準の色名とカラーコードの対応は以下の通りです。
カラーコードは _scss/_config_basic.scss で変更することができます。

色名と役割

echo.cssではグレースケールの他に、3種類のデザインカラーと、2種類のシステムカラーを定義しています。デザインカラーはすべて使用しなくても構いません。適切なルールに基づいていれば、gray と first のみでもサイトを成立させることができます。

色名を primary, secondary... にせず、単純な番号にしているのは、非英語圏のコーダーや、デザインの知識が少ないプログラマでも矛盾なく利用できるようにするためです。

デザインカラー

gray

グレースケール、もしくはグレースケールに限りなく近い彩度の色を指定します。ウェブサイトのルートの文字色や、ユーザーインターフェースの色に使用されています。

first

ウェブサイトにおけるブランドカラー、もしくは主要な色（プライマリカラー）を指定します。基本のリンク色、チェックボックス、ラジオボタンのアイコン色に使用されています。

second

ウェブサイトにおける補助色（セカンダリカラー）を指定します。この色はオブジェクトの基本色には含まれておらず、別途サブクラスを指定して有効にします。

third

ウェブサイトにおける強調色（アクセントカラー）を指定します。明度が高い色を想定しているため、 .m-btn-third, .u-bg-third などでは、内包する文字の色が $body-color = $gray-strong となります。また、デフォルトのカラーテーブルでは $third-strong はかなり濃い色となります。この色はオブジェクトの基本色には含まれておらず、別途サブクラスを指定して有効にします。

システムカラー

info

ウェブサイトのフォームなどで、ポジティブな情報を提供する際に使用される色を指定します。デフォルトでは second と同一となっています。

important

ウェブサイトの特別な強調色に使用される色、もしくはフォームなどで、ネガティブな情報を提供する際に使用される色を指定します。日本語圏では赤（red）が一般に使用されます。

色の強度と役割

それぞれの色は、強度で分類され、適切なモジュールで使用されることを想定しています。
light, dark などの明度を表す単語を使用していないのは、暗色背景のウェブサイトに使用した場合に矛盾が生じるのを防ぐためです。
gray のみ5段階となっていますが、 first, second ... の色段階を増やすために mild, milder を追加しても構いません。

normal

塗りつぶしとボーダーの基本色です。ボタン、ナビゲーションなどさまざまなモジュールで使用されています。

strong

小さな文字のテキストカラーなど、高いコントラスト比を確保すべき箇所に使用します。 normal が充分なコントラスト比を持っている場合は、同じカラーコードを使用しても構いません。

mild

gray に使用されている強度です。WordPress用の画像キャプションに使用されていますが、この色は充分なコントラスト比を確保するのが困難なため、echo.cssでは変数の定義のみとしています。後述のアクセシビリティ達成基準を意識する場合は注意してください。

milder

gray に使用されている強度です。 .m-imput, .m-table-bordered などの、多くのボーダー色に使用されています。ボーダーを見やすくしたい場合は、変数 $border-color を $mild に変更してください。

fade

背景色を前提として使用されている強度です。 .c-alert, .c-box などに使用されています。 ルートの文字色が上に重なっても、充分なコントラスト比を確保できる色である必要があります。

アクセシビリティ

echo.cssのカラーテーブルは、WCAG 2.1の達成基準1.4.3「コントラスト (最低限)」と、多くの視覚障害者・色覚障害者の色識別に配慮しています。
しかしCSSフレームワークの性格上、完全な達成は難しくなっています。達成を意識する場合は、以下の点に注意してください。

1. カラーテーブルの third を、白い文字の背景に使用することは避けてください。オレンジ系は多くのCSSフレームワークで採用されていますが、充分なコントラスト比を確保できません。
2. ボタン色に gray を使用しないでください。 second, important との識別が難しいことがあります。
3. 色変数 $gray-mild を文字色に使用することは避けてください。
4. .m-label を使用するときは、必ず色を変更するサブクラスを併用してください。
5. 達成基準1.4.6「コントラスト (高度)」を満たす場合は、 .u-text-(color) を使用する際の文字サイズを大きく（最低18ポイント）してください。