Accessible Paletteで色階調を作るときの要点

色を選ぶ前に、階調の用途を決める

Accessible Paletteは、ブランドカラーから「なんとなく明暗を並べたパレット」を作る道具ではなく、各shadeの明るさとcontrastを揃えるための設計ツールとして使うのがよい。

起点色を入れたら、brand、accent、success、warning、danger、neutralのような列を作り、50/100は淡い背景、200/300は境界線やhover背景、500はアイコンや見出し、600/700は白背景上のリンクや本文、というように用途を先に割り当てる。

Before

hex値を見た目で増やし、使い分けが曖昧になる。

After

shadeごとに背景、文字、境界線の役割が決まる。

lightnessを揃えてからcontrastで線引きする

CIELAB/LChで見た目の重さを揃える

Accessible Paletteの説明では、CIELABとLCh color modelsを使い、consistent lightnessとWCAG contrast ratiosを持つcolor systemを作るためのツールとされている。hex値だけでなく、lightness、chroma、hueを分けて調整できるのが強みだ。

同じshade番号では、色相が違っても近い明るさに見えることが重要になる。青だけ暗い、黄色だけ薄い、赤だけ強すぎるといったズレは、lightnessとchromaを見ながら直す。

WCAG contrastで本文に使える色を決める

W3CのWCAG 2.2 Understanding docsでは、通常のテキストと画像化されたテキストは4.5:1以上、大きいテキストは3:1以上のcontrast ratioが必要と説明されている。Accessible PaletteのWCAG 2表示は、この線引きの早見表として使える。

実務では、「白背景で本文に使えるshadeは600以上」「淡色背景に乗せる文字は900だけ」「500はアイコンや装飾に限定」のように、色ごとではなく用途ごとにルール化する。

パレット生成は最終検査ではない

WCAG contrastは実際の前景色と背景色の組み合わせで決まる。完成後の画面、hover、focus、disabled、グラフ、ボーダー、アイコンは別途確認する必要がある。

文字色、背景色、境界線色のtokenを分ける。
状態を色だけで伝えず、ラベル、アイコン、文言も使う。
生成した色は実画面でcontrast checkerやブラウザの検査でも確認する。

Accessible Paletteは、色を増やすためではなく、使える色を減らして役割を明確にするためのツールとして扱う。

Sources

Source	Use
Accessible Palette	ツールの目的、CIELAB/LCh、lightness、WCAG contrast表示の確認。
W3C WAI: Contrast (Minimum)	通常テキスト4.5:1、大きいテキスト3:1の基準確認。