あなたのブランドカラーは感情に強い影響を与えますが、弱視や色盲、または視認性を困難にする環境要因に直面しているサイト訪問者にはブランドカラーはどのように見えるのでしょうか?
色とコントラストのレベルはコミュニケーションにとって重要であり、これらの詳細を適切に把握することは、アクセシビリティを重視するデザイナーにとって非常に重要です。」
色知覚障害はあなたが思っているよりも一般的です。 そこで、この投稿では、ロービジョン、失読症、色覚異常などの障害を持つ人々が Web とどのように対話するかについて説明します。
目次
カラー チェッカーを使用して Web サイトのアクセシビリティを向上するにはどうすればよいですか?
このセクションは実際には非常に簡単ですが、多少の労力が必要です。 WebAIM のオンライン コントラスト チェッカー ツールを利用する必要があります。 WebAIM は、ユタ州立大学に拠点を置く非営利団体で、世界中の Web アクセシビリティを向上させることを使命としています。
で指定されているように、前景色 (テキストやアイコンの色など) と背景色を XNUMX 進値 (XNUMX 進値とも呼ばれます) として入力するだけです。 HTML または CSS を選択すると、コントラスト比チェッカーによって、その比が十分であるかどうかが通知されます。 求める必要がある最小のコントラスト比は 4.5 対 1 であることに注意してください。白い背景に黒いテキストのコントラスト比は 21 対 1 なので、かなりの余裕があります。
誰でも見られる Web カラーパレットを作成するための 5 つのツール
1. WebAIM カラーコントラストチェッカー
前景色と背景の XNUMX 進数の色を入力します。 出力には、通常のテキストと大きなテキストの AA および AAA 準拠とサンプル文が表示されます。 スライダーを使用すると、適切な組み合わせが見つかるまで変更できます。
強み
- 目に優しいインターフェースを備えたシンプルなツール。
- これは、デザイナーだけでなく、初心者にとっても優れたシンプルなツールです。
弱み
- XNUMX 色以上を比較することはできません。XNUMX 色だけを比較してください。
- 明度スライダーは色を選択するのにあまり良い方法ではありません。 この単純な表示では、色の魅力を伝えるのは困難です。
2. WCAG用コントラストチェッカー
前景色と背景の 9 進数の色を入力します。 Lorem Ipsum テキストのサンプルの横に、通常のテキストと大きなテキストの AA および AAA 準拠を示します。 写真をアップロードすることもできます。 XNUMX 色のパレットが自動的に選択されます。 次に、各色を前景色または背景色のいずれかとして比較できます。
強み
- ユーザーフレンドリーなインターフェイスを備えたシンプルなツール。
- 画像からパレットを作成する機能。
弱み
- パレットは自動的に選択され、カラー ピッカーを使用してさらに変更できますが、それらの変更はパレットに保存されません。 情報をコピーして新しい文書に貼り付ける必要があります。
3. カラーキューブ
パレットの色をそれぞれ別の行に入力します。 出力には、小さいフォントと大きいフォントの AA 標準と比較したコントラスト比のサンプル文字が表示されます。 XNUMX つの列は、白の背景、黒の背景、および「入手可能な中で最も読みやすい」ブランド カラーのセットとのコントラストを示しています。
強み
- 目に優しい ユーザーインターフェイス (UI) が整理されており、パス/フェイル/エッジのステータスが見やすくなっています。
弱み
- AAAが定めた基準を満たしていません。
- 考えられるすべての色の組み合わせを行うわけではありません。最初はこれが当てはまるかどうかわかりません。
4.) XNUMX つの形状のコントラスト グリッド
パレットの色を入力します。 また、各色に名前を付けることもできます。 このアプリは、あらゆる色の組み合わせで表を作成します。 タイルのサイズはXNUMX種類あります。 AA および AAA の合格/不合格/エッジと有効コントラスト比を示す視覚的な手がかりがあります。 列と行は、ドラッグ アンド ドロップによってアプリ内で移動できます。 表形式のデータは保存、エクスポート、共有できます。
強み
- パレット全体の分析に役立つ便利な機能がたくさんあります。
弱み
- 使いやすい他のツールに比べて、習得するのは困難です。
- XNUMX つの色だけを比較するのは正しい方法ではありません。
- 色がどのように組み合わされるかを理解するのには適していません。
- 見るのは少し大変ですが、たくさんの情報が表示されます。
5. カラーセーフ
背景色を入力します。 フォントのファミリー、サイズ、ウェイトを選択します。 標準として AA または AAA を選択します。 選択した色とその XNUMX 進コード、サンプルと実効コントラスト比が表示されます。 十分なコントラストを備えた、可能な前景色の大きなサムネイルが最良の部分です。 すべてを表示するか、特定のカラー グループ (緑、青、紫など) だけを表示するかを選択できます。
強み
- 目に優しいインターフェイスにより、見栄えが良く効果的な色の組み合わせを簡単に見つけることができます。
- これは、ブランドのカラー パレットをまだ持っていない場合、または Web 用にすでに持っているカラー パレットに追加したい場合に便利なツールです。
弱み
- 一度に比較できるのは、前景色と背景色のみです。
- カラーを保存したい場合は、コピーして別のドキュメントに貼り付ける必要があります。
- みんなのために何かを作りに出かけましょう！
これらのツールの使用方法を理解すると、プロジェクトに複数のツールが必要になることがわかります。 おそらく Color Cube は、アクセシビリティについて学んだことをクライアントに示す最良の方法です。 おそらく、簡単なスポット チェックを行うために WebAIM のツールを常に使用することになるでしょう。
まとめ
先ほど説明したヒント、ガイドライン、ツールを使用すると、Web サイトにハイコントラストの色とラベルを付けることができます。 これにより、弱視、失読症、色覚異常のある人が Web サイトやコンテンツを読みやすくなります。 一般の視聴者もあなたの Web サイトを使いやすくなったとしても驚かないでください。
