アクセシビリティ:テキストとグラフィックを準備する
5分
視覚障がいのある訪問者は、サイトページの前景と背景の違いを区別することが難しい場合があります。そのため、必要に応じてサイトの色のコントラストを確認し、調整することをおすすめします。
推奨事項
視覚にさまざまな制限のある訪問者のアクセシビリティを向上させるために、以下を推奨します:
- テキスト色と背景色のコントラストを、通常のテキストでは 4.5:1、大きなテキストでは 3:1 の比率に変更する。
- グラフィックとユーザーインターフェースコンポーネント(フォーム入力枠、プレースホルダなど)のコントラスト比は 3:1 以上にする。
- レベル AAA では、通常のテキストの場合最低 7:1、大きなテキストの場合 4.5:1 の高いコントラスト比が必要です。
参考:
大きなテキストとは 14ポイント(約 18px)以上の太字、または 18ポイント(約 24px)以上と定義されています。
カラーコードを見つける
カラーコードは、使用しているサイトビルダー(Wix Studio エディタまたは Wix エディタ)で確認できます。
Wix エディタ
Wix Studio エディタ
- 該当するパーツ(テキスト、背景のストリップ、コンテナボックスなど)を選択し、「カラーピッカー」にアクセスします。
- カラーコードにマウスオーバーすると表示されます。

カラーコントラストをテストする:
Contrast Checker など、文字表示色と背景色を比較し色のコントラストをテストするサイトやブラウザが多数あります。背景画像上のテキスト色のコントラストを確認する場合、背景色を選択しテストを実できる Colour Contrast Analyser を推奨します。(英語)
カラーコントラストを調整する
Wix エディタまたは Wix Studio エディタでは、アクセシビリティウィザードを使用して、サイト上の色のコントラストが低い箇所を特定し、調整することができます。このウィザードは、サイトをスキャンし、潜在的なアクセシビリティの問題を検出して、サイトのアクセシビリティを向上させる方法を提案してくれます。
ほとんどの要素は、アクセシビリティウィザード内で色のコントラストを変更することができます。ただし、まだウィザードがサポートしていない一部の要素(アプリの要素など)は、手動で色のコントラストを調整する必要があります。
Wix エディタ
Wix Studio エディタ
- エディタに移動します。
- エディタ上部にある「設定」をクリックします。
- 「アクセシビリティ設定」を選択します。
- 「スキャンする」を選択します。
- 「検出された問題」タブをクリックします。
- リストからページを選択します。
- 「色のコントラストを改善」をクリックします。
- 該当するパーツを選択し、必要に応じて調整します:
アクセシビリティウィザードで色のコントラストを調整する
色のコントラストを手動で調整する

サイトにグラフやデータを表示している場合:
ハイコントラストカラーは、サイトにデータを表示するのに最適です。ただし、他のインジケーター(テクスチャやパターンなど)を使用して情報を区別することもおすすめします。
次のステップ:
アクセシビリティチェックリストに戻り、サイトのアクセシビリティを向上させましょう。