はじめに
みなさんは、カラートークンを設計する時どのようなことを考えながら作成しますか？
色については、配色や色相、彩度、輝度などを考えると思います。
また、デザインシステムとしては、ファイル構造や継承関係などを考えると思います。
それだけでも、ややこしく大変で時間がかかるのに、ダークテーマやアクセシビリティまで考慮すると、どう決めていけばいいかわからなくなると思います。
そのため、この記事ではダークテーマとアクセシビリティを考慮したカラートークンの設計する時に考えたこと、手順をまとめようと思います。
前提知識
ウェブアクセシビリティと色
ウェブアクセシビリティとは、利用者の障害などの有無やその度合い、年齢や利用環境にかかわらず、あらゆる人々がウェブサイトで提供されている情報やサービスを利用できること、またその到達度を意味します。
ウェブアクセシビリティを考慮して色を決めるということは、以下のように コントラスト比 を考慮する必要があります。
-
コントラスト比
-
WCAG 2.2の場合
- 少なくとも 4.5:1 以上のコントラスト比 が必要
- 大きい文字(18ポイント以上, 14ポイント以上の太字)の場合は 3:1 以上のコントラスト比 が必要
-
WCAG 3.0（草案）の場合
- APCAの基準
-
WCAG 2.2の場合
このように、カラートークンを設計する時は、コントラスト比 を考慮する必要があります。
ライトテーマとダークテーマ
ライトテーマとダークテーマを切り替えられるようにすることは、ユーザー体験を向上させるための重要な要素です。
ライトテーマとダークテーマを考慮して色を決める時には、ライトテーマとダークテーマで、色差が変わることを考慮する必要があります。
例えば、以下の画像のように ライトテーマとダークテーマで同じ色をおいみると、よくわかります。
数値としては、①と②の輝度の差と③と④の輝度の差は同じです。
でも、視覚でみると、①と②の輝度の差の方が、③と④の輝度より大きく感じるでしょう。
これは、人は、コントラスト比が低い方組み合わせの方が、色の違いに敏感であるためです。
このように、ライトテーマとダークテーマを考慮したカラートークンを設計する時は、ライトテーマとダークテーマで、色差が変わる を考慮する必要があります。
カラートークンを設計する
これらの前提知識のもと、ダークテーマを考慮したカラートークンを設計して行きましょう！
カラートークンの設計方針
カラーパレット全体の設計を考にあたって、方針として以下のようなことを決めました。
-
ブランドカラーをカラーパレットに使わない
- Qiitaのブランドカラーは、
#55C500であり、#FFFFFFとのコントラスト比が2.24であるため、コントラスト比の基準を満たすことができないため
- Qiitaのブランドカラーは、
-
両テーマで同じカラーパレットを使う
- テーマごとにカラーパレットを管理するのは大変なため
これらも考慮して、カラーパレットを作っていきました。
カラーパレットを決める
まずは、カラーパレットを決めていきます。
スケール数とステップ数
カラーパレットを決めるにあたって、まずは、以下を決める必要があります。
-
スケール数
- 何色でスケールを展開するかを決めます
- 例）グレースケール、レッドスケールなど
-
ステップ数
- 1つのスケールで何種類くらい色を展開するかを決めます
- 例）10色など
Qiitaの場合は以下の通りです。
-
スケール数：5スケール
- グレースケール
- グリーンスケール
- ブルースケール
- イエロースケール
- レッドスケール
-
ステップ数
- グレースケール：12スケール
- 他のスケール：11スケール
色を作る
Qiitaでは、HSL色相環 を使って、色を作って行きます。
◯ 輝度の調整
まずは、輝度の調整からです。
よくあるのは、輝度が等間隔になるように調整することが多いですが、前提知識で書いた通り、輝度を等間隔にしてしまうと、視覚でみると色差が等しくなりません。
そのため、Qiitaでは、色差が同じくらいになるように輝度を 以下のようにease in outのようなグラフになるように調整しています。
◯ 色相と彩度の調整
輝度の調整が調整できたら、次は色相と彩度を調整して色を作ります。
色相と彩度を調整時に以下のことを意識していました。
◯ コントラスト比チェック
色相と彩度が調整できたら、コントラスト比のチェックをします。
Qiitaでは、両テーマのSurfaceで使う３色（計６色）でコントラスト比の基準を満たしているかチェックし、各スケールで４色以上がコントラストの基準を満たすように調整しました。
プライマリーカラーを決める
カラーパレットができたら、UIでメインに使うプライマリーカラーを各スケールで１つ決めます。
Qiitaでは、コントラスト比 4.5の基準を満たす色をプライマリーカラーとして定義しました。
カラートークンを設計する
カラーパレットが作成できたら、次はカラートークンを設計します。
UIで使われている色を整理・分類する
カラートークンを設計する時には、現在使われている色を整理します。
Qiitaの色を整理してみると、大体の色は、以下の4種類に分類することができました。
- Base
- Backgroundやsurfaceを定義する色
- Container
- ボタンなどの背景色
- Text
- テキストの色
- Border
- 枠線の色
Qiitaでは、これらの色を Alias Token と定義しました。
ただ、これらの色に定義できない色もあります。
それは、Markdown 内だけでしか使わないといった、特定のコンポーネントでしか使わない色です。
これらの色は、Component Specific Token と定義しました。
トークンを命名する
色を整理・分類するできたら、それぞれの色を名付けます。
Qiitaでは、Alias Tokenの命名規則は、color カラーネーム という形で統一されています。
カラーネームは、色の名前・色を指定する場所・色の種類で構成され、パスカルケースになっています。
また、Component Specific Tokenは、特定のコンポーネント・要素でしか使わない色のため、コンポーネント名Color カラーネーム という形で統一されています。
カラートークンを定義する
デザイン・開発で使えるようにカラートークンを定義しましょう！
Qiitaでは、CSSのカスタムプロパティで色を定義したものをTypeScriptで定義しています。
まとめ
Qiitaでは、このようにダークテーマとアクセシビリティの融合したカラートークンを設計しました。
そのため、Qiitaのカラートークンの特徴は以下の通りです。
- ブランドカラーを使わないカラーパレット
- コントラスト比の基準を満たす色をプライマリーカラーを設定している
- 特定のコンポーネント・要素でしか使わない色をComponent Specific Token として定義することで、拡張性も兼ね備えたカラートークン
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。