はじめに
セマンティックカラーの一つとしてデザインシステムに記載されることも多いWarning。
弊社でもデザインする際はカラーパレットの一つとして登録しているのですが、コントラスト比の関係で見えづらくなりがちです。
なのでWarningのデザインを行う際にアクセシビリティにどう対応するか考えてみました。
白背景に黄字は見えづらい…
そもそもセマンティックカラーって？
デジタル庁によると、
セマンティックカラーは、デザインスタイルやUIの種別を問わず特定のセマンティクス（意味や目的）が割り当てられたカラーです。
これらのカラーは特定の情報や文脈で意味を伝えるために使用され、情報伝達上の機能的な役割を持っています。
以下のようなセマンティックカラーが設定されていることが多いです。
-
Success
- 成功、安全、完了などを意味するカラー
-
Error
- 失敗やエラーのほか、危険情報や制約条件の提示など注意喚起を意味するカラー
-
Warning
- 警告や禁止事項などを意味するカラー
基本的にSuccess: 緑、Error: 赤、Warning: 黄のことが多い
どう対応してる？
さて本題ですが、上の画像を見ても分かる通り黄色は特に見えづらいので、デザインシステム、事例を見ながらどのようにアクセシビリティに対応しているか確認してみましょう。
僕が確認した範囲内では、以下の3パターンの対応が見られました。
色を工夫するパターン
コントラスト比を意識した黄色に近い色に設定するパターンです。
デジタル庁、PayPay、freeeのデザインシステムvibesでこのような工夫が見られました。
コントラスト比を意識した色の例
形を工夫するパターン
色だけでなく、アイコンなどを配置して形でもWarningであることを伝えるパターンです。
デザインシステムに明記されていることは少ないですが、コンポーネントライブラリなどはこのような対応が取られているものがよく見られます。
例を上げると、Zennのmessage、MUIのAlert Componentなどです。
そもそも使わないパターン
そもそもWarningという色を設定しないパターンです。
このパターンのものは意外と多く、ユーザベースのデザインシステム「FALCON」、LINE、Ubieなどがこれに該当しました。
このパターンはどうWarningを表現するのかという話ですが、特定の行為には一貫した色を使うという、より大きなルールをデザインシステム内で設定しているようです。
また、デザインシステムには明記されていませんが、UX(画面遷移やモーダル等)でWarningが出る場面を吸収している、というような対応もできそうです。
さいごに
デザインシステムを作っていく予定のある方、カラーパレット作成時に悩んでいる方の参考になれば幸いです。
参考記事、デザインシステムなど
Discussion