リンクに十分なコントラストがあるかどうかを判断する方法は？
Programmers Stack Exchange の通常のテキストとリンクを区別するのは非常に難しいと思います。使用される配色は次のとおりです。
Background #fafafa (there's a background image, that's mostly #fafafa)
Normal text #333333
Normal Link #B64D27
Visited Link #7F3A21
テキスト投稿の壁の例は this answer で、私のものです。校正しているときに、最初の段落のWikipediaの記事への（アクセスした）リンクが表示されませんでした。実際、追加するのを忘れたと思っていました。
それは私だけですか、それともこの問題はかなりの数のユーザーによって共有されている可能性がありますか？ユーザーエクスペリエンスの観点、適切な専門用語などすべてから、これにどのように取り組むかわかりません。色を修正する必要があるかどうかを明らかにする確立された慣行や研究を参照する回答を探しています。これらの調査結果は Programmers meta で紹介します。
ルールはありません 、少なくともハードで高速なルールはありません。手紙を調査すると、醜いサイトが作成される可能性があります。青いリンクが最も効果的ですが、赤い背景の青いリンクは読みにくいです。ただし、この調査は「ベストプラクティス」に導き、美的感覚を維持できるので、いつ慣習から脱却すべきかがわかります。
ルールはありませんが、ガイドラインはたくさんあります。古いものもあれば非常に良いものもあります。
過去
リンク出現の古いスタンバイはニールソンのアラートボックスの投稿です：
視覚化リンクおよび色を変更アクセスしたリンク
訪問先と新しい目的地に同じリンク色を使用しているウェブサイトでは、人々は迷子になり、サークル内を移動します。ナビゲーションの混乱を減らすには、2種類のリンクに異なる色を選択します。
これらの投稿は良い基本的な要約を提供しますが、かなり古いものです。取り除かなければならない大きな点は、リンクは一意で一貫して選択された色でなければならず、訪問されたリンクは明確に異なる一貫して選択された色であることです。 7年間でWebは大きく変化したため、統計にあまり多くの情報を入れないでください。次に、現在の統計を取得します。
現在
おそらく、リンクに関する単一の最も重要な研究は 青いリンクがさらにクリックされたことを示すGoogleの実験 です。青以外のリンクはクリック数が少ないため、配色にはこれを考慮に入れる必要があります。このため、下線と同様に、青はボディコピーに使用しないでください。
訪問済みリンクについては、ここにKevin Simonsによるウェブ上の訪問済みリンクの状態に関するすばらしい最新の記事があります。 すべてのアクセス済みリンクはどこにありますか？
訪問したリンクの色の使用が大幅に減少したとSimonsは指摘します。2004年までは、ほとんどのサイトはリンクのスタイルを設定する必要がなかったため、デフォルトの訪問したリンクの色が変更されたと言っています。 Simonsは、アクセスしたリンクの主な用途は、ユーザーがどこにいたかを追跡できるようにすることであると指摘しています。
具体的には、アクセスしたリンクの色なしでサイトに費やさなければならない認知的努力に注意してください。訪問したリンクに新たな感謝の気持ちを育てることができます。
ユーザーは、このリンクに既に移動したことを思い出させる必要がありますか？そうでない場合、リンクのスタイルはおそらくall。トップレベルのナビゲーション要素の場合、アクセスしたリンクの色は不必要で見苦しい場合があることに注意してください（「お問い合わせ」セクションを使用したことがないことを、実際に視覚的に確認する必要がありますか？）。
動的ページの場合、アクセスしたリンクの色が実に誤解を招く可能性があります; 「訪問済み」はアプリケーションまたは動的ページのコンテキストではあまり意味がないため、今日の多くのWebアプリは訪問済みリンクの規則を削除しました。
訪問済みリンクと未訪問リンクを区別する必要がある場合は、 コントラストは重要 です。
コントラスト
A List ApartのLeslie Jensen-Inmanは次のように述べています。
コントラストを効果的に使用することは、デザインを他のデザインと差別化するだけでなく、すべての視聴者がコンテンツにアクセスできるようにするための重要な要素です。
この記事では、コントラストの重要性とコントラストの効果的な使用方法について詳しく説明しています。よく読んでおくことを強くお勧めします。
彼らは、アクセシビリティの理由で、一般的な色覚異常のシミュレーターに対して色をチェックして、色覚異常のユーザーだけでなく色覚異常のユーザーにもコントラストが適切であることを確認する必要があると述べています。 daltonizing を検討して、より効果的に機能するかどうかを確認します。
また、サイトのすべての要素の背景/前景のコントラストを一度に確認できる優れたサイト CheckMyColors.com も表示されます。
フォアグラウンド/バックグラウンドコントラストは、テキストの2つのフォアグラウンドビットに十分なコントラストがあるかどうかをしないことに注意してください！これが、一部の人が提案しているように Color Contrast Checker を単に使用して、取引と呼ぶことができない理由です。
これが Typographic Contrast に関する優れたガイドです。これは、すべての形のコントラストをまとめて、すてきな流れるサイトを作成するのに役立ちます。
結論として、コントラストは物事を区別するのに最適ですが、適切に使用する必要があります。アクセスしたリンクとアクセスしていないリンクを区別する理由が本当にない場合は、しないでください。最大コントラストまたは標準リンクの色が現在のデザインで見苦しい場合は、別の方法を試してください。
リンクが明確で機能的であるかどうかを確認できるのは、実際のユーザーのみです。
これはStack Exchange UXの意図的な部分であると確信しています。
外部サイトがオフラインになるか、リンクされているページの名前を変更/削除する可能性があるため、回答はスタンドアロンであることが想定されています。回答の主要なコンテンツが別のサイトへのリンクだった場合、その回答は役に立たなくなります。
リンクは下線が引かれていないので、補足的な資料にのみ進むことになっているので、回答に気を取られません。一般的なウェブとは対照的に、テキストとのコントラストが低い色を使用する場合も同様の理由があります。
WCAGは、前景（テキスト）と背景の間の最小の色のコントラストに関するガイドラインを提供します。上記の通常のリンクテキストは、色のコントラスト要件を満たしていません。コントラストを上げることをお勧めします。
また、コントラストが強すぎると、一部のユーザーの問題（失読症のユーザーなど）が発生する可能性があることに注意してください。 WCAGはこれを考慮していません。 HPの色差チェッカーもあり、コントラストのしきい値がわずかに低く、上限がありました。
年齢とともに青の色相を記録する目の円錐が悪化するため、青はリンクテキストを区別するのに適した色ではないと主張した記事を読んだことを覚えています。リンクを提供できないことをお詫びします。
他の人があなたと同じ問題に苦しむかどうかに関して、私にはそれを裏付ける数字はありませんが、同様の問題を抱えている他の人がいるのではないかと想像してください。
サイト全体のリンクと一貫性を保ち、常に標準テキストと区別してください。これにはさまざまな方法があり、すべて独自の長所と短所があります（リンクに下線を引くなど）。
役立つリンク：
http://www.webcredible.co.uk/user-friendly-resources/web-usability/effective-link-text.shtml
http://www.lighthouse.org/accessibility/design/accessible-print-design/effective-color-contrast
http://www.useit.com/alertbox/20040510.html
http://www.stcsig.org/usability/topics/colorblind.html
オンラインのカラーコントラストアナライザー：
カラーコントラストチェック は、色がさまざまな標準に準拠しているかどうかをテストするための優れたリソースです。コントラストをテストする簡単な方法を提供します。
訪問したリンクを他のテキストから区別するのが難しい場合は、ユーザビリティの問題があります。問題があることを証明する必要はありません。メタサイトであなたの経験を共有してください。
個人的に、私はテキストの段落に埋め込まれると常にリンクに下線を引きます。それらを見つけるのは簡単です。画面設定が異なるため、色のみに依存すると問題が発生する可能性があります。
私は これに対するLebedevのスタンス （翻訳された記事については申し訳ありません）が好きです。基本的には次のようになります：
- リンクには下線を引く必要があります。
- リンク以外に下線を引くことはできません。
- ページ上の何もリンクと同じ色にすることはできません（通常、青、黒、または濃い灰色）。
- ホバーされたリンクを色または背景を変更して強調表示することは、理にかなっています。
- 破線の下線は、ユーザーを別のページに移動しないリンクに使用できます（たとえば、電卓を開く、詳細情報など）。このようなリンクを繰り返しクリックすると、ページが前の状態に戻ります。
うまく行ったかどうかの確認は簡単です。ユーザーがマウスやキーボードに触れなくても、リンクがページのどこにあるかがわかる場合は、うまくいきました。
私は個人的に、Stack Exchangeに姉妹サイトのある幅広いサブブランチがあり、すべて独自のカラーコーディング/フォント/アイコン/その他を備えていると信じています。色を選択する際のいくつかのショートカットは必ず発生します。 Stack Exchangeの別の姉妹サイトで使用されており、このサイトの外観を他のStack Exchangeサイトと区別できるようにしたいという事実により、クリックされたリンクの適切な色が無視されても、私は驚かないでしょう。
はい、プログラマーのスタック交換では、リンクの色の選択はかなり貧弱です。低いコントラストと欠けている下線に加えて、アクセスしたリンクの色は、アクセスしていないリンクの色からそれほど遠くない。そうは言っても、私の意見では、すべてのStack Exchangeサイトには、少なくとも質問と回答の本文に下線が引かれているはずです。
従来のJakob Nielsen列 リンクを視覚化するためのガイドライン をいつでも参照として使用できます。