web-dev-qa-db-ja.com

色覚異常に見えるカラーパレットを決定する方法は？

色覚異常の人にも見えるカラーパレットを作成するにはどうすればよいですか？カラーパレットがWCAG基準を満たしているかどうかを判断するのに役立つリソースはありますか？

そうでない場合、誰かがカラーパレットを選択するときに最大のアクセシビリティを確保するためのプロセスを説明できますか？

accessibilitycolorcolor-blindness
6
JDH

Smashing Magazineは巨大な 2014年10月のカラーアクセシビリティデザインのベストプラクティスに関する記事 を行いました。色覚異常の形態と、デザインを検証するための多くのツールについて説明します。ここに概要が示されているベストプラクティスのコピーがあります。

カラーコントラスト比をテストし、すべてのデザイン要素に使用されるスタイルとカラーコードを文書化します。以下を含むビジュアルデザイン仕様を作成します。

  • 見出し、テキストリンク、本文テキスト、書式付きテキストなど、すべてのテキスト要素のタイポグラフィ。
  • アイコンとグリフと同等のテキスト;
  • フォーム要素、ボタン、検証、システムエラーメッセージ。
  • 背景色とコンテナスタイル（これらの背景のテキストがすべてパスすることを確認）。
  • 無効化されたリンク、フォーム要素、およびボタン（最小のカラーコントラスト比を渡す必要がない）の視覚的処理。

そして、記事で言及されていないコントラストをテストするためのいくつかのツールがあります。

6
dnbrv

具体的な例やハウツーを見つけるのはかなり難しいことがわかりました。

Illustratorのようなアドビ製品には非常に便利なシミュレーターがあり（新しいウィンドウを開き、[表示]> [プルーフセットアップ]> [色覚異常...]を選択）、色を微調整するときにライブサイドバイサイドレンディションを即座に表示できます。また、Color Contrast Analyzerなどの無料のスタンドアロンツールもあります。

graphicdesign.stackexchange に例を投稿しました

1
Jon Coombs