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

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

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

推奨事項

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

カラーコードを見つける

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

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

アクセシビリティウィザードを使用してサイトページのカラーコントラストが低いテキストを調整します。ウィザードは、サイトに潜在的なアクセシビリティの問題がないかスキャンし、詳細設定を有効にしてサイトのアクセシビリティを継続的に改善することができるツールです。
備考:
このウィザードは Wix エディタでのみご利用いただけます。Wix Studio エディタにアクセシビリティウィザードを追加する機能をリクエストする

コントラストを調整する方法:

  1. 設定」を選択します。
  2. アクセシビリティ設定」を選択します。
  3. サイトをスキャン」を選択します。
  4. カラーコントラスト」というタイトルのカードを選択します。
  5. スライダーを使用して、テキストと背景色を調整します。
  6. 変更を適用」を選択します。
ウィザードでカラーコントラストが開かれています。コントラストが調整され、カーソルが「変更を適用」にマウスオーバーしています。
サイトにグラフやデータを表示している場合:
ハイコントラストカラーは、サイトにデータを表示するのに最適です。ただし、他のインジケーター(テクスチャやパターンなど)を使用して情報を区別することもおすすめします。
次のステップ:
アクセシビリティチェックリストに戻り、サイトのアクセシビリティを向上させましょう。