web-dev-qa-db-ja.com

非リンクテキストとの色のコントラストのリンク

テキストと背景色( snook's tool )に関する色のコントラストについてよく読みましたが、リンクされたテキストとリンクされていないテキストのコントラストを検証するための同様のツールはありますか?

もちろん、下線を使用してリンクテキストと非リンクテキストを視覚的に区別する方法については議論がありますが、通常、リンクのみを区別するために色のみを使用し、次にリンク間のコントラストを選択する場合、非リンクテキストは、ユーザーがどれがどれかを簡単に識別できるようにするのに十分な大きさである必要があります。

これを背景と同様に評価する式はありますか?

編集:基本的に、背景に加えて2つの前景色を評価したいと思います。したがって、2つの前景色は、背景を読み取るために十分なコントラストを必要とするだけでなく、区別するために互いに十分なコントラストを提供する必要があります。

8
Charles Wesley

私はいくつかの追加の読書をしていて、答えはリンクテキストが周囲のテキストに対して3:1のコントラスト比を持つ必要があるということです。

したがって、たとえば Juicy Luminosity Color Contrast Ratio Analyser を使用して、リンクテキストと非リンクテキストの色のコントラストを測定し、それらのコントラストが3:1より大きいかどうかを確認できます。

次に、コントラスト比アナライザーを使用して、両方の色が背景と十分に対比しているかどうかを判断できます。

G183:周囲のテキストと3:1のコントラスト比を使用し、リンクまたはコントロールのフォーカスに追加の視覚的合図を提供して、色のみを使用してそれらを識別します

この手法では、3:1以上の相対輝度(明度)の差とその周囲のテキストを使用できます。ユーザーがリンクをポイントまたはタブします。視覚的な強調表示は、たとえば、下線、太字や斜体などのフォントスタイルの変更、またはフォントサイズの増加の形をとります。

このテクニックを使用することでこの成功基準を満たすのに十分ですが、リンクテキストを区別するための推奨テクニックではありません。これは、色の相対的な輝度のみを使用するリンクは、黒と白の色覚異常を持つ人々には明らかでない場合があるためです。テキストのブロックに多数のリンクがない場合は、リンクに下線を付けることをお勧めします。

以下のリンクは、さまざまなタイプの色覚異常を持つ人々にとってこれがどのように見えるかの例です。また、真っ白な背景と真っ黒な背景の両方で機能する26色を提供します。

他の色の背景であれば、上記で投稿した反復テストのアイデアを使用する必要があります。

周囲のテキストとのコントラスト比が3:1のリンク -これらの26のWebセーフカラーは、黒に対して3:1、白に対して5:1で通過します。

ツールに関する限り、必要なのは、リンクテキストと非リンクテキストのコントラスト比に加えて、3番目の背景色の両方の色のコントラストを計算し、3つすべてがさまざまなリソースで定義された制限を超えるかどうかを計算することだけです。このページでは、私が探していた魔法の箱があると思います。

1
Charles Wesley

興味深い質問です。 SC 1.4.1(リンクされたテキストとリンクされていないテキストのコントラスト)とSC 1.4.3との両方に対してテストするツールを知りません。 1.4.6(前景と背景のコントラスト)これは確かに役に立ちます!

ただし、コントラスト比が表示されている限り、Snookのツール(または前景/背景のコントラストをチェックするように設計されたその他のツール)を使用して、リンク/非リンクテキストのコントラストをチェックできます。

編集:明確にするために、私は自分のワークフローで前景と背景のコントラスト比をテストしてそれらが適合していることを確認し、リンク間のコントラストに依存する必要がある場合は(下線が常に最適です)リンクと非リンクのコントラストをテストしますテキスト。多少前後する可能性があるので、統合ツールがいかに便利かを理解しています。

2
Matt Obee

「輝度コントラスト比」と呼ばれる公式があり、リンクの色を背景色と比較して分析します。

http://juicystudio.com/services/luminositycontrastratio.php

WCAG 2.0によると、4.5:1の最小比率が必要です。たとえば、黒いリンク(#000000)と白い背景(#FFFFFF)の比率は21.00:1です。これを計算するための式は、便利な計算機を備えたリンクにあります。

1
Matt Maclennan

リンク/非リンクのコントラストについて話し合うアクセシビリティの擁護者(== --- ==)を追加の視覚的手掛かりなしに知りません。 W3 WAIは3:1のコントラスト比を推奨 ですが、これには視覚的な手がかり(下線)があります。

視覚的な手がかりなしで「機能する」特定のレベルのコントラストや特別な色の組み合わせはありません。リンクが何であるかを視覚的に判断できない人の割合の問題になります。多くの さまざまな種類の色覚異常 とさまざまな程度があるため、これに関する簡単な公式はありません。

1
obelia

このツールを見てください: Accesskey 残念ながら、ウェブサイトをオンラインにする必要があります!

0
Igor-G