強制カラーモードでも視認できるUIを構築する

公開日:

タグ:

  • #アクセシビリティ

強制カラーモードとは？

OSやブラウザで強制的にテキストや背景色を高コントラストの色に変更する機能のことです。

Windowsのハイコントラストモードが代表例として存在します。

ページ上のすべての色が OS 定義のシステムカラーに置換され、そのユーザーが指定した色に変更しWebサイトを読みやすくする設定が強制カラーモードです。

なぜ強制カラーモードは存在するのか？

強制カラーモードは、主に弱視・ロービジョンの方や視覚過敏、ディスレクシアの方がよく利用している機能です。まぶしい環境下やモニターの影響など、一時的に見にくいという問題で強制カラーモードを使う方もいるかと思います。

ただし、「一時的に見にくい」という問題は、コントラスト比の低いウェブサイトの場合が多く、これは適切なコントラスト比（テキストと背景色の比率が4.5：1以上）を満たすことで基本的には解決可能です。そのため、ここでは強制カラーモードの主な利用者には含まないものとします。

デジタル庁デザインシステムの活用例：よくあるアクセシビリティの課題とその解決策｜デジタル庁ニュースより引用

上記のように、デザイナーがコントラスト比を意識していても、ユーザーによっては見ることが難しいサイトも存在します。そのため強制カラーモードがあるということも理解しておくことが必要です。

強制カラーによって上書きされるもの

強制カラーモードは以下のプロパティの値を強制的に変更します。

  • color
  • background-color
  • text-decoration-color
  • text-emphasis-color
  • border-color
  • outline-color
  • column-rule-color
  • webkit-tap-highlight-color
  • SVG fill 属性
  • SVG stroke 属性

上記のプロパティは タグに合わせて自動的にシステムカラーに変更されます。

強制カラーで使用される システムカラー一覧

システムカラー

用途

Canvas

ページ背景

CanvasText

本文テキスト

ButtonFace

ボタン背景

ButtonText

ボタンテキスト・ボーダー

Highlight

選択状態・アクセントカラー

HighlightText

Highlight 上のテキスト

LinkText

リンクカラー

上記のものがタグなどによって判定されて自動的に色が変更されます。
ここではborder はテキストカラーに変更されることがポイントなので覚えておきましょう。

強制カラーによって特別な動作をするもの

  • box-shadow は none に強制される
  • text-shadow は none に強制される
  • background-image は URL ベースでない値では none に強制される
  • color-scheme は light dark に強制される
  • scrollbar-color は auto に強制される

上記に関しては強制カラーモードでは非表示にされることを念頭においておくことが大切です。

box-shadowやlinear-gradientは消えてしまうので、その際にUIが崩れて見えないか考慮することが必要です。

検証方法について

残念ながらMacではアクセシビリティのコントラストを変更してもこの機能は反映されません。 ですが、Chrome DevTools でエミュレートすることが可能です。

  1. DevTools → ⌘ + ⇧ + P でコマンド検索
  2. Run > "Emulate CSS forced-colors: active"

Windows 実機での確認が最も正確ですが、Chrome DevToolsでも十分に問題を検出できるので試してみてください。

追記）Mac Edgeでも確認が可能でした。

設定＞アクセシビリティ＞ページの色を変更すると強制カラーモードを確認することができます。

実際に強制カラーモードの違いを体験してみる

実際に、強制カラーモードにすることでどのような崩れが生じるかを体験できるデモサイトを作成しました。元のサイトと見比べながら確認してみてください。

デモはこちら

強制カラーモードでも壊れないUIにするには

では強制カラーモードで崩れるパターンと、それを回避する方法を大きく３つ紹介していきます。

重要パターン1：transparent border

/* 通常時: 見えない（透明） */
border: 1px solid transparent;

/* forced-colors 時: colorプロパティを継承して テキストカラーと同じ線が引かれる ✅ */

主にベタ塗りのボタンやセクションの境界などに使用するこでUIを担保することができます。
border に transparent を指定しておくことで通常モードのデザインを壊さず、強制カラーモードでのみ境界線が現れるようになります。

box-shadow だけで境界を表しているコンポーネントなどにも有効ですので境界線には見えない線を追加してください。

重要パターン2：currentColor

<svg stroke="currentColor" aria-hidden="true">
  <path d="M6 3l5 5-5 5" />
</svg>

SVGのfillや stroke、 background-colorに currentColorを使用することで、アイコンが背景色と同化してしまうのを防ぐことができます。

よくあるパターンとしてはボタンの中に含まれているアイコンなどです。

currentColor で設定すると colorプロパティを継承するため、背景と同化しなくなります。

重要パターン3: @media (forced-colors: active)

@media (forced-colors: active) {
  background-color: CanvasText;
}

どうしてもシステムカラーをこちらで指定しなければいけない場合は@media (forced-colors: active) を使用してください。

指定する色はシステムカラーで設定をしてください。なるべく機能に合わせたシステムカラーも選びましょう。

注意： forced-color-adjust: none;

.box {
  background: rgb(83, 202, 36);
  forced-color-adjust: none;
}

forced-color-adjust: none を使用すると強制カラーモードでも色の置換をしないようにできます。

ただし、強制カラーモードの機能を壊す可能性があります。ユーザーの選択を尊重しないような使用はすべきではありません。

forced-color-adjust: none が必要になるのは、例えば商品のカラーパレットなどその色として見えることに価値がある情報です。

情報として色が必要なものにはforced-color-adjust: none を指定し、それ以外に関しては使用は控えましょう。

まとめ

border: N solid transparent

効果: 影・背景色の代替として境界線を残す
使用: ✅ OK

アイコンに currentColorを使用する

効果: colorプロパティを継承して背景色との同化を避ける
使用: ✅ OK

@media (forced-colors: active)

効果: 必要に応じてシステムカラーで上書きする
使用: ⚠️ 用途に合わせて使用

forced-color-adjust: none;

効果: 強制カラーモードでも色の置換をしないようにする
使用: 🚨 必要な時以外は指定しない

基本原則として色だけに頼らず、境界線・アウトライン・形状で情報を伝えることが重要となります。対応に迷った際は上記を参考にしつつ、よりアクセシビリティを考慮したサイトを制作しましょう。

参考サイト

一覧へ戻る