アクセシビリティ:テキストとグラフィックを準備する
読了時間:3分
視覚に制限のある訪問者は、サイトページの前景と背景の違いを区別することが難しい場合があります。そのため、必要に応じてサイトのカラーコントラストを確認し、調整することをおすすめします。
推奨事項
視覚にさまざまな制限のある訪問者のアクセシビリティを向上させるために、以下を推奨します:
- テキスト色と背景色のコントラストを、通常のテキストでは 4.5:1、大きなテキストでは 3:1 の比率に変更する。
- グラフィックとユーザーインターフェースコンポーネント(フォーム入力枠、プレースホルダなど)のコントラスト比は 3:1 以上にする。
- レベル AAA では、通常のテキストの場合最低 7:1、大きなテキストの場合 4.5:1 の高いコントラスト比が必要です。
参考:
大きなテキストとは 14ポイント(約 18px)以上の太字、または 18ポイント(約 24px)以上と定義されています。
カラーコードを見つける
カラーコードは、使用しているサイトビルダー(Wix Studio エディタまたは Wix エディタ)で確認できます。
Wix Studio エディタ
Wix エディタ
- 該当する要素(テキスト、背景のストリップ、コンテナボックスなど)を選択します。
- エディタ右上の「要素設定パネルを開く」アイコン をクリックします。
- 「デザイン」タブ をクリックします。
- カラーボックスをクリックしてカラーピッカーを開きます。
- 色にマウスオーバーしてコードを表示します。
![Wix Studio エディタ内のカラーピッカー。カーソルが色にマウスオーバーし、コードがパネル上でハイライトされています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2025/02/10/c2bfc4d2-a085-4e63-a837-5d8b04ea23eb/88c8b05d-04bb-47bf-9b5f-426df3729b7a.jpg)
カラーコントラストをテストする:
Contrast Checker など、文字表示色と背景色を比較し色のコントラストをテストするサイトやブラウザが多数あります。背景画像上のテキスト色のコントラストを確認する場合、背景色を選択しテストを実できる Colour Contrast Analyser を推奨します。(英語)
カラーコントラストを調整する
アクセシビリティウィザードを使用してサイトページのカラーコントラストが低いテキストを調整します。ウィザードは、サイトに潜在的なアクセシビリティの問題がないかスキャンし、詳細設定を有効にしてサイトのアクセシビリティを継続的に改善することができるツールです。
備考:
このウィザードは Wix エディタでのみご利用いただけます。Wix Studio エディタにアクセシビリティウィザードを追加する機能をリクエストする
コントラストを調整する方法:
- 「設定」を選択します。
- 「アクセシビリティ設定」を選択します。
- 「サイトをスキャン」を選択します。
- 「カラーコントラスト」というタイトルのカードを選択します。
- スライダーを使用して、テキストと背景色を調整します。
- 「変更を適用」を選択します。
![ウィザードでカラーコントラストが開かれています。コントラストが調整され、カーソルが「変更を適用」にマウスオーバーしています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2025/02/10/33daeda7-b89f-4689-b2d2-bd3e3c145651/e7c4dcc0-d950-4359-a305-12e027795469.jpg)
サイトにグラフやデータを表示している場合:
ハイコントラストカラーは、サイトにデータを表示するのに最適です。ただし、他のインジケーター(テクスチャやパターンなど)を使用して情報を区別することもおすすめします。
次のステップ:
アクセシビリティチェックリストに戻り、サイトのアクセシビリティを向上させましょう。