web-dev-qa-db-ja.com

サイトのアクセシビリティ-避けるべき配色

当社のマーケティングでは、アプリケーションでBlue on Blueを非常に好みます(つまり、青のグラデーション背景、水色のヘッダー背景、および濃い青のテキストシェード)。

明らかに、少なくとも私の考えでは、このすべての青はかなり悪く見えます。しかし、このフェチから彼らを破ることはかなり難しいことです。

私はウェブサイトの配色で色覚異常が重要な考慮事項であることを認識していますが、特定の形態の色覚異常を持つ人々にとって青と青の配色が地獄であることを明確に示す研究/記事を見つける必要があります。

誰かがこれらのような記事を私に向けることができますか?色覚異常については一般的にかなりの数を見つけることができますが、具体的ではない傾向があります。

更新

参考までに、ここにいくつかの色の値を示します。

  • ページの背景:#00204F-または使用可能な場合はグラデーション(#A0BBE6->#00204F)
  • ページヘッダーテキスト:#003391(透明な背景)
  • 作業領域
    • 背景:#DBE6F4
    • サブヘッダーの背景:#BFDBFF
    • サブヘッダーテキスト:#003391
    • ラベルテキスト:#003366
4

問題は特定の色ではなく、色コントラストの比率です。

WCAGガイドライン 1.4.3コントラスト(最小):

1.4.3コントラスト(最小):テキストとテキストの画像の視覚的表現は、以下を除いて、少なくとも4.5:1のコントラスト比を持ちます:(レベルAA)

  • 大きなテキスト:大きなテキストと大きなテキストの画像のコントラスト比は少なくとも3:1です。

  • 付随的:非アクティブなユーザーインターフェイスコンポーネントの一部であるテキスト、または純粋な装飾であるテキスト、だれにも見えないテキスト、または他の重要な視覚的コンテンツを含む画像の一部であるテキストには、コントラスト要件はありません。

  • ロゴタイプ:ロゴまたはブランド名の一部であるテキストには、最低限のコントラスト要件はありません。

結局のところ、あなたは好きな色の組み合わせを持つことができます。必要に応じて、白に薄い灰色を付けることができます。正確にはillegalではありません。しかし、WCAGカラーコントラストガイドラインに適合しない場合、サイトにアクセスできなくなり、Webサイトの多くのユーザーを締め出すことになります。これにより、販売の可能性が失われ、評判が損なわれる可能性があります。また、コンテンツへのアクセスを禁止しているため、訴訟を起こす可能性もあります。

おそらくあなたの青い組み合わせはアクセス可能です。あなたはそれらの16進コードを述べていないので、私たちは確信が持てません。 AAA準拠である可能性は低いです( 7:1のコントラストが必要 )。ただし、AA準拠である可能性があります。

人気の Snook.ca oneなど、さまざまなカラーコントラストチェッカーが世の中にあるので、そこに色を実行して、何が表示されるかを確認します。

また、アクセシビリティサイト webaim.org 青い色覚異常について議論してください。青は色覚異常の人にとって最も影響を受けない色です-赤/緑がはるかに一般的ですが、青の欠乏の人がいます:

Tritanopia(青欠乏症)

三色盲は、上記の他のカテゴリーよりも一般的ではありません。 Tritanopiaは短波長(青)に鈍感です。一般に、青と緑は混同される可能性がありますが、黄色も消えるか、赤の明るい色合いとして表示される可能性があるという点で影響を受けます。

ただし、青をそれほど明確に判断できないからといって、コンテンツにアクセスできなくなるという意味ではなく、コントラストに問題がなく、まだ判読可能である必要があります。一部の人にとっては青く見えません。

6
JonW