カラーテーブル

標準のカラーテーブル

echo.cssで使用されている、色名とカラーコードの対応は以下の通りです。

色名と役割

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 はコントラストが不足しています。以下のいずれかの修正を行ってください。
  1. 文字色を $body-color にする
  2. 背景色を $body-bg にする
  3. テキストを太字にする
• .echo-nav, .echo-pager のhover時のスタイルは、コントラストが不足しています。サイトデザインに応じて、色に依存しないスタイルに変更してください。
• .echo-label を重要なリンクに使用しないでください。
• .echo-bg-info, .echo-bg-important を広い範囲に使用することは避けてください。