標準のカラーテーブル
echo.cssで使用されている、色名とカラーコードの対応は以下の通りです。
強度 | ||||
---|---|---|---|---|
normal | strong | fade | ||
色名 | default | #333 | #000 | #eee |
info | #1976d2 | #0057af | #e3f0ff | |
important | #d20b2a | #d20b2a | #ffe9f0 | |
inverse | #fff | #fff | rgba( 255,255,255,.15 ) |
色名と役割
echo.cssでは、4種類のシステムカラーを定義しています。
default
ウェブサイトの文字色を指定します。グレースケール、もしくは彩度が低い色を想定しています。ナビゲーション、フォームなどのユーザーインターフェースにも使用されています。
info
弱い注目色を指定します。通常のテキストリンクに使用されています。ウェブサイトのフォームなどで、ポジティブな情報を提供する際にも使用されます。ウェブサイトにおけるブランドカラーが望ましく、echo.cssでは青を使用しています。
important
ウェブサイトの強い注目色に使用される色を指定します。フォームなどで、ネガティブな情報を提供する際にも使用されます。日本語圏では赤が一般に使用されます。
inverse
背景が暗色だったときの色を指定します。一般に、defaultの反転色が使用されます。
デザインカラーの廃止について
Version 2.x までのecho.cssには、装飾目的のデザインカラー $first, $second, $third
が定義されていましたが、以下の理由から廃止し、システムカラーのみとなりました。
- アクセシビリティ達成基準(コントラスト比、色覚障害者への対応など)を満たすことが難しいため
- 装飾目的の色名はデザイナーの方針により決定され、エンジニアが定義するものではないため
- CMSで構築されたウェブサイトの場合、装飾用のクラス名はシステム側で決められているため(WordPressのGutenberg等)
- ラベルのサブクラスは色名ではなく、ラベルを生成するシステムのカテゴリー名が反映されることが多いため
色の強度と役割
それぞれの色は、強度で分類され、適切なオブジェクトで使用されることを想定しています。
light, dark
などの明度を表す単語を使用していないのは、暗色背景のウェブサイトに使用した場合の矛盾を防ぐためです。
コントラスト比を確保できない問題があるため、中間の強度(ライトグレー)は使用していません。
normal
塗りつぶしやアウトラインの基本色です。ボタンやラベルなど、大半のオブジェクトで使用されています。
strong
小さな文字の色など、高いコントラスト比を確保すべき箇所に指定します。normalが充分なコントラスト比を持っている場合は、同じカラーコードを使用しても構いません。
fade
弱い背景色を前提として使用されている強度です。 .echo-alert, .echo-box
などに使用されています。基本の文字色(default + normal)に対して、充分なコントラスト比を確保している必要があります。
色を変更する
Sassを使用する場合
プロジェクト内の _scss/_config_basic.scss
の $default
以降の任意の色変数を変更したうえでビルドしてください。
下記の例では info
が緑系、 important
がオレンジ系になります。
$info: #182 !default;
$info-strong: #182 !default;
$info-fade: #e9f6f3 !default;
$important: #ec7e00 !default;
$important-strong: #dc6300 !default;
$important-fade: #fff6e6 !default;
Sassを使用しない場合
css/echo-color.css
は、色の指定のみをまとめたCSSファイルです。
このファイルを直接編集(置換)することで、カラーテーブルを変更したり、 .echo-bg-first
等の独自のクラスを追加できます。
以下のとおり echo.min.css
よりも後に読み込んで使用してください。
<link rel="stylesheet" href="/css/echo.min.css">
<link rel="stylesheet" href="/css/echo-color.css">
アクセシビリティ
echo.cssのカラーテーブルは、WCAG 2.1の達成基準と、多くの視覚障害者・色覚障害者の識別に配慮しています。
しかしCSSフレームワークの性格上、達成基準1.4.6「コントラスト (高度)」を満たすことは難しくなっています。達成を意識する場合は、以下の点に注意してください。
.echo-alert-info, .echo-alert-important
はコントラストが不足しています。以下のいずれかの修正を行ってください。- 文字色を
$body-color
にする - 背景色を
$body-bg
にする - テキストを太字にする
- 文字色を
.echo-nav, .echo-pager
のhover時のスタイルは、コントラストが不足しています。サイトデザインに応じて、色に依存しないスタイルに変更してください。.echo-label
を重要なリンクに使用しないでください。.echo-bg-info, .echo-bg-important
を広い範囲に使用することは避けてください。