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

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

使い方

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

結果

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

関連ツール