標準のカラーテーブル
echo.cssで使用されている、標準の色名とカラーコードの対応は以下の通りです。
カラーコードは _scss/_config_basic.scss
で変更することができます。
色名 | 強度 | ||||
---|---|---|---|---|---|
normal | strong | mild | milder | fade | |
gray | #333 | #333 | #888 | #bbb | #eee |
first | #1976d2 | #0060c0 | - | - | #e3f0ff |
second | #138420 | #138420 | - | - | #edfbf3 |
third | #ffb510 | #c05900 | - | - | #fff6e3 |
info | #138420 | #138420 | - | - | #edfbf3 |
important | #d20b2a | #d20b2a | - | - | #ffe9f0 |
色名と役割
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フレームワークの性格上、完全な達成は難しくなっています。達成を意識する場合は、以下の点に注意してください。
- カラーテーブルの
third
を、白い文字の背景に使用することは避けてください。オレンジ系は多くのCSSフレームワークで採用されていますが、充分なコントラスト比を確保できません。 - ボタン色に
gray
を使用しないでください。second, important
との識別が難しいことがあります。 - 色変数
$gray-mild
を文字色に使用することは避けてください。 .m-label
を使用するときは、必ず色を変更するサブクラスを併用してください。- 達成基準1.4.6「コントラスト (高度)」を満たす場合は、
.u-text-(color)
を使用する際の文字サイズを大きく(最低18ポイント)してください。