header-logo
Wix の使用方法を学び、サイトとビジネスを構築する。
直感的な Wix 機能でサイトをデザインして管理する。
定期購入、プラン、請求を管理する。
ビジネスを運営し、サイト会員とつながる。
ドメインの購入、サイトへの接続と移管方法を学ぶ。
ビジネスとウェブプレゼンスを成長させるツールを入手する。
SEO とマーケティングツールで知名度を上げる。
より効率的な作業を支援する高度な機能を利用する。
解決策や既知の問題について確認し、問い合わせる。
placeholder-preview-image
コースとチュートリアルでスキルを習得する。
ウェブデザインやマーケティングなどのヒントを得る。
検索エンジンからのトラフィックを増やす方法について学ぶ。
フルスタックプラットフォームでカスタムサイトを構築する。
あなたの目標達成をサポートするエキスパートを見つけましょう。
placeholder-preview-image

アクセシビリティ:テキストとグラフィックを準備する

5分
視覚障がいのある訪問者は、サイトページの前景と背景の違いを区別することが難しい場合があります。そのため、必要に応じてサイトの色のコントラストを確認し、調整することをおすすめします。

推奨事項

視覚にさまざまな制限のある訪問者のアクセシビリティを向上させるために、以下を推奨します:
  • テキスト色と背景色のコントラストを、通常のテキストでは 4.5:1、大きなテキストでは 3:1 の比率に変更する。
  • グラフィックとユーザーインターフェースコンポーネント(フォーム入力枠、プレースホルダなど)のコントラスト比は 3:1 以上にする。
  • レベル AAA では、通常のテキストの場合最低 7:1、大きなテキストの場合 4.5:1 の高いコントラスト比が必要です。
参考:
大きなテキストとは 14ポイント(約 18px)以上の太字、または 18ポイント(約 24px)以上と定義されています。

カラーコードを見つける

カラーコードは、使用しているサイトビルダー(Wix Studio エディタまたは Wix エディタ)で確認できます。
Wix エディタ
Wix Studio エディタ
  1. 該当するパーツ(テキスト、背景のストリップ、コンテナボックスなど)を選択し、「カラーピッカー」にアクセスします。
  2. カラーコードにマウスオーバーすると表示されます。
Wix エディタ内のカラーピッカー。カーソルが色にマウスオーバーし、コードがパネル上でハイライトされています。
カラーコントラストをテストする:
Contrast Checker など、文字表示色と背景色を比較し色のコントラストをテストするサイトやブラウザが多数あります。背景画像上のテキスト色のコントラストを確認する場合、背景色を選択しテストを実できる Colour Contrast Analyser を推奨します。(英語)

カラーコントラストを調整する

Wix エディタまたは Wix Studio エディタでは、アクセシビリティウィザードを使用して、サイト上の色のコントラストが低い箇所を特定し、調整することができます。このウィザードは、サイトをスキャンし、潜在的なアクセシビリティの問題を検出して、サイトのアクセシビリティを向上させる方法を提案してくれます。
ほとんどの要素は、アクセシビリティウィザード内で色のコントラストを変更することができます。ただし、まだウィザードがサポートしていない一部の要素(アプリの要素など)は、手動で色のコントラストを調整する必要があります。
Wix エディタ
Wix Studio エディタ
  1. エディタに移動します
  2. エディタ上部にある「設定」をクリックします。
  3. アクセシビリティ設定」を選択します。
  4. スキャンする」を選択します。
  5. 検出された問題」タブをクリックします。
  6. リストからページを選択します。
  7. 色のコントラストを改善」をクリックします。
  8. 該当するパーツを選択し、必要に応じて調整します:
アクセシビリティウィザードで色のコントラストを調整し、「適用する」をクリックする様子を示したスクリーンショット。
サイトにグラフやデータを表示している場合:
ハイコントラストカラーは、サイトにデータを表示するのに最適です。ただし、他のインジケーター(テクスチャやパターンなど)を使用して情報を区別することもおすすめします。
次のステップ:
アクセシビリティチェックリストに戻り、サイトのアクセシビリティを向上させましょう。