WEB ACCESSIBILITY · FORCED COLORS
Forced Colors Pattern Lab
強制カラーモードでも、UIの状態が伝える。
LIVE COLOR OVERRIDE TEST
色を消して、UIの意味を見る
REAL MODE: OFFMEANING LOST
色だけで示した状態は、色が置き換わると区別できません。
FORCED / DARKPROJECTS / 2026
Selected work.
RECENT PROJECTS
Project board
PROJECTOWNERSTATUS
Orbit SystemsAya✓完了
Soft SignalRen→進行中
Field NotesMio!保留
これは仕様に基づく比較用プレビューです。実際の強制カラーモードはOS・ブラウザ側で有効にしてください。
WHAT CHANGES
置き換わるものを知る
color、背景色、枠線、SVGのfillなどが利用者のパレットへ置き換わります。
box-shadow と text-shadow は none になります。現在地を影だけで表さないようにします。
グラデーションなど、url() を含まない background-image は消えます。
TEST THE REAL MODE
最後は、実際の設定で確認する
このブラウザの現在値forced-colors: none
- OSの強制カラー／コントラストテーマを有効にする
- ページを再読み込みし、上の表示が
activeになることを確認 - 選択・フォーカス・状態・アイコンを、キーボード操作も含めて試す
@media (forced-colors: active) {
.focus-ring:focus-visible {
outline: 3px solid Highlight;
}
}プレビューを、実機確認の代わりにしない。
このデモのDARK／LIGHTは、仕様に定義された自動テスト用パレットを使った比較です。利用者は色をカスタマイズでき、ブラウザの調整も一律ではありません。ページ内プレビューで問題を見つけ、最後は実際の強制カラーモードで確認してください。
forced-color-adjust: none は作者の色を維持できますが、利用者の選んだ配色を無効にします。ロゴや色見本など、色そのものを保つ必要があり、その要素側で可読性を担保できる場合に限定します。