ダークテーマとアクセシビリティの融合したカラートークンの設計

## はじめに
![color pallet.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/98099bbe-3821-2445-76ff-b83f990556d5.png)

みなさんは、カラートークンを設計する時どのようなことを考えながら作成しますか？

色については、配色や色相、彩度、輝度などを考えると思います。
また、デザインシステムとしては、ファイル構造や継承関係などを考えると思います。

それだけでも、ややこしく大変で時間がかかるのに、ダークテーマやアクセシビリティまで考慮すると、どう決めていけばいいかわからなくなると思います。

そのため、この記事ではダークテーマとアクセシビリティを考慮したカラートークンの設計する時に考えたこと、手順をまとめようと思います。

## 前提知識
### ウェブアクセシビリティと色
ウェブアクセシビリティとは、利用者の障害などの有無やその度合い、年齢や利用環境にかかわらず、あらゆる人々がウェブサイトで提供されている情報やサービスを利用できること、またその到達度を意味します。

ウェブアクセシビリティを考慮して色を決めるということは、以下のように **コントラスト比** を考慮する必要があります。

+ **コントラスト比**
    + [WCAG 2.2](https://waic.jp/translations/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)の場合
        + 少なくとも **4.5:1 以上のコントラスト比** が必要
        + 大きい文字(18ポイント以上, 14ポイント以上の太字)の場合は **3:1 以上のコントラスト比** が必要
    + [WCAG 3.0（草案）](https://www.w3.org/TR/wcag-3.0/)の場合
        + [APCA](https://github.com/Myndex/SAPC-APCA)の基準


このように、カラートークンを設計する時は、**コントラスト比** を考慮する必要があります。


### ライトテーマとダークテーマ
ライトテーマとダークテーマを切り替えられるようにすることは、ユーザー体験を向上させるための重要な要素です。
ライトテーマとダークテーマを考慮して色を決める時には、**ライトテーマとダークテーマで、色差が変わる**ことを考慮する必要があります。

例えば、以下の画像のように ライトテーマとダークテーマで同じ色をおいみると、よくわかります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/6379689a-d1c1-f523-5d2f-d5eda788c578.png)

数値としては、①と②の輝度の差と③と④の輝度の差は同じです。
でも、視覚でみると、①と②の輝度の差の方が、③と④の輝度より大きく感じるでしょう。

これは、人は、コントラスト比が低い方組み合わせの方が、色の違いに敏感であるためです。

このように、ライトテーマとダークテーマを考慮したカラートークンを設計する時は、**ライトテーマとダークテーマで、色差が変わる** を考慮する必要があります。


## カラートークンを設計する
これらの前提知識のもと、ダークテーマを考慮したカラートークンを設計して行きましょう！

### カラートークンの設計方針

カラーパレット全体の設計を考にあたって、方針として以下のようなことを決めました。

1. **ブランドカラーをカラーパレットに使わない**
    + Qiitaのブランドカラーは、`#55C500`であり、`#FFFFFF`とのコントラスト比が2.24であるため、コントラスト比の基準を満たすことができないため
2. **両テーマで同じカラーパレットを使う**
    - テーマごとにカラーパレットを管理するのは大変なため

これらも考慮して、カラーパレットを作っていきました。


### カラーパレットを決める
まずは、カラーパレットを決めていきます。

#### スケール数とステップ数
カラーパレットを決めるにあたって、まずは、以下を決める必要があります。

+ **スケール数**
    + 何色でスケールを展開するかを決めます
    + 例）グレースケール、レッドスケールなど
+ **ステップ数**
    + 1つのスケールで何種類くらい色を展開するかを決めます
    + 例）10色など

<br />
Qiitaの場合は以下の通りです。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/8ecb03ba-375a-3fe9-82bb-2172ba094c46.png)

+ **スケール数**：5スケール
    + グレースケール
    + グリーンスケール
    + ブルースケール
    + イエロースケール
    + レッドスケール
+ **ステップ数**
    + グレースケール：12スケール
    + 他のスケール：11スケール

#### 色を作る
Qiitaでは、**HSL色相環** を使って、色を作って行きます。

**◯ 輝度の調整**
まずは、輝度の調整からです。

よくあるのは、輝度が等間隔になるように調整することが多いですが、[前提知識](#前提知識)で書いた通り、輝度を等間隔にしてしまうと、視覚でみると色差が等しくなりません。

そのため、Qiitaでは、色差が同じくらいになるように輝度を 以下のように`ease in out`のようなグラフになるように調整しています。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/85568af5-e79c-79a9-fdc1-22aad975a26d.png)

<br />

**◯ 色相と彩度の調整**
輝度の調整が調整できたら、次は色相と彩度を調整して色を作ります。

色相と彩度を調整時に以下のことを意識していました。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/0b62f33b-122a-52fa-15eb-4dd4ef27eb3b.png)

<br />

**◯ コントラスト比チェック**
色相と彩度が調整できたら、コントラスト比のチェックをします。

Qiitaでは、両テーマのSurfaceで使う３色（計６色）でコントラスト比の基準を満たしているかチェックし、各スケールで４色以上がコントラストの基準を満たすように調整しました。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/07fdd028-9218-7c59-835d-d6c770ca5f43.png)


#### プライマリーカラーを決める
カラーパレットができたら、UIでメインに使うプライマリーカラーを各スケールで１つ決めます。
Qiitaでは、コントラスト比 4.5の基準を満たす色をプライマリーカラーとして定義しました。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/4fba2a15-5a0c-cb98-b187-56f26359c61d.png)

### カラートークンを設計する
カラーパレットが作成できたら、次はカラートークンを設計します。

#### UIで使われている色を整理・分類する
カラートークンを設計する時には、現在使われている色を整理します。

Qiitaの色を整理してみると、大体の色は、以下の4種類に分類することができました。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/c455e9d5-3d1d-acf4-5b09-724cd443aa42.png)

+ Base
    + Backgroundやsurfaceを定義する色
+ Container
    + ボタンなどの背景色
+ Text
    + テキストの色
+ Border
    + 枠線の色

Qiitaでは、これらの色を **Alias Token** と定義しました。

<br />

ただ、これらの色に定義できない色もあります。
それは、**Markdown 内だけでしか使わないといった、特定のコンポーネントでしか使わない色**です。

これらの色は、**Component Specific Token** と定義しました。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/903bcea7-d0a3-ef0c-3cf4-66b3bf51b49c.png)


#### トークンを命名する
色を整理・分類するできたら、それぞれの色を名付けます。


Qiitaでは、Alias Tokenの命名規則は、`color カラーネーム` という形で統一されています。
カラーネームは、色の名前・色を指定する場所・色の種類で構成され、パスカルケースになっています。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/43ca3476-f04b-8c41-545e-9cea096cd9d4.png)

また、Component Specific Tokenは、特定のコンポーネント・要素でしか使わない色のため、`コンポーネント名Color カラーネーム` という形で統一されています。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/1213bb8a-088a-e8e6-d47a-747c8e6c2900.png)


#### カラートークンを定義する

デザイン・開発で使えるようにカラートークンを定義しましょう！

Qiitaでは、CSSのカスタムプロパティで色を定義したものをTypeScriptで定義しています。


## まとめ
Qiitaでは、このようにダークテーマとアクセシビリティの融合したカラートークンを設計しました。


そのため、Qiitaのカラートークンの特徴は以下の通りです。

+ ブランドカラーを使わないカラーパレット
+ コントラスト比の基準を満たす色をプライマリーカラーを設定している
+ 特定のコンポーネント・要素でしか使わない色をComponent Specific Token として定義することで、拡張性も兼ね備えたカラートークン

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。

https://twitter.com/degudegu2510