ハイコントラストモードとは？

Webコンテンツがさまざまなハイコントラスト設定でどう見えるかをテストするツールです。HTMLやスクリーンショットを貼り付けて、Windowsハイコントラスト・色反転・カスタムテーマなど、WCAG準拠のコントラストモードでプレビューできます。

Windowsハイコントラスト、色反転、黄色×黒などのプリセットから選ぶか、前景色と背景色を自分で指定できます。コントラスト比はリアルタイムで更新され、その組み合わせがWCAGのどのレベル(AA、AAA、通常テキスト、大きいテキスト)を満たすかも表示されます。プレビュー中のHTMLはインラインスタイルを適用した状態で書き出せます。

使い方

1. ステップ1 — エディタにHTMLまたはプレーンテキストを貼り付けます。
2. ステップ2 — プリセットからコントラストモードを選択します。Windowsハイコントラスト（黒/白）・反転・黒地に黄色・カスタムカラーなどが選べます。
3. ステップ3 — ライブプレビューで視認性を確認します。コントラスト比チェッカーで、テキスト要素のWCAG AA/AAAへの適合を検証できます。

使用するタイミング

• マーケティング施策の公開前にランディングページのWCAG AAをチェックしたい場面。
• Windowsハイコントラスト時にフォーカスやアイコンボタンが見えるか確認したい場面。
• ブランド背景に対して4.5:1を確保できる本文色を選びたい場面。

結果

あるデベロッパーがナビゲーションバーのHTMLを貼り付け、Windowsハイコントラストモードに切り替えたところ、アイコンのみのボタンが黒背景に溶け込んで見えなくなっていたので、テキストラベルを追加しました。

よくある質問

WCAG AAに必要なコントラスト比は?

通常テキストは4.5:1、大きいテキスト(18pt以上のレギュラー、または14pt以上の太字)は3:1です。AAAでは7:1と4.5:1まで厳しくなります。検査結果には各組み合わせが達成・失敗したレベルが表示されます。

Windowsハイコントラストでアイコンボタンが消えるのはなぜ?

Windowsは色をシステムカラーに置き換え、背景画像を無視するためです。background-imageや塗りつぶしだけのSVGで描いたアイコンは見えなくなります。インラインSVGのstrokeにcurrentColorを使うか、見えるテキストラベルを添えてください。

黄色×黒は本当にアクセシビリティ向けのテーマ?

そうです。初期のWindowsハイコントラストの定番テーマで、ロービジョンの方の間でも今なお人気です。加齢黄斑変性があっても黄色は鮮やかに見えやすく、純白×黒よりこちらを好む方も少なくありません。

WCAG AAに通れば、ページはアクセシブルと言える?

コントラストはWCAGの一部にすぎません。キーボード操作、セマンティックHTML、代替テキスト、フォームラベル、フォーカス表示、モーション低減への配慮など、他の要件もそろえる必要があります。本ツールが扱うのは色のみです。

ブランドのオレンジが白背景で不合格になるのはなぜ?

オレンジ・黄・ライムのような中間調の高彩度色は輝度が高く、白に対して3:1を下回ることがよくあります。本文ではより暗いオレンジに調整するか、3:1で済む背景や大きな見出しに限って使いましょう。

関連ツール