色とコントラスト

画面上のテキストが読みにくいと感じたことがありますか？ 極端に明るい画面や見づらい状況で どうすればよいでしょうか。もしかしたら、あなたはより永続的な （推定 3 億人の色覚異常を持つ人など） あるいは2 億 5,300 万人のロービジョンでしょうか？

デザイナーやデベロッパーは、ユーザーが色をどのように認識しているかを理解する必要があります 一時的、状況的、永続的のいずれにおいても その対比を考えますこれにより、 お客様の視覚的なニーズに最も 対応できるようにすべきです

このモジュールでは、色とコントラストの基礎知識を紹介します。

色の認識

物体は色を持たないが、 光？色を見ると、目はこの波長を受信して処理し、 色に変換します。

デジタル アクセシビリティに関して言えば、こうした波長について 色相、彩度、明度（HSL）の項で表現されます。HSL モデルは RGB カラーモデルの代替色であり、人間の目に近い 色を認識します。

色相は、赤、緑、青など、色を表す定性的表現です。 各色相はカラー スペクトル上で特定のスポットを持ち、 0 から 360 までの範囲で指定できます。赤は 0、緑は 120、青は 240 です。

彩度は色の強さで、0% から します。最大彩度（100%）の色は非常に鮮やかになり、色 グレースケールまたは白黒になります。

明度は、色の明るい文字または暗い文字を、パーセンテージで表します。 0%（黒）～ 100%（白）の間で指定できます。

色のコントラストの測定

WAI グループは、さまざまな視覚障がいを持つ人々を支援するために、 色のコントラストの数式を使用して、 十分なコントラストがあることを確認する 配置する必要があります。これらの色のコントラスト比が 中程度の視力の人は背景のテキストを読むことができます コントラストをつける補助技術は不要です

鮮やかなカラーパレットで画像を比較してみましょう 色覚異常を持つ人のように見えるかもしれません。

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">で確認できます。

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

左側の画像は、紫、赤、オレンジ、黄、アクアグリーン、明るい青、濃い青色を帯びた虹色の砂の画像です。右側は、より明るい色とりどりの虹のパターンです。

2 型 2 色覚

2 型 2 色覚 （一般的に緑色のブラインドとして知られる）は、男性の 1 ～ 5％、0.35 ～ 0.1％ です。

2 型 2 色覚の人は、緑色光に対する感度が低下します。この色覚異常フィルタは、このタイプの色覚特性をシミュレートします。

1 型 2 色覚

1 型 2 色覚 （一般に赤盲症として知られる）は、男性の 1.01 ～ 1.08％、および 0.02％ 0.03% が女性です。

1 型 2 色覚では、赤色光に対する感度が低下します。この色覚異常フィルタは、このタイプの色覚特性をシミュレートします。

色覚異常または単色性

色覚異常または単色症（完全色覚異常）は、ごくまれにしか起こりません。

色覚異常や単色症の人は、赤色をほとんど知らず、 発光します色覚特性フィルタは、この色覚特性をシミュレートし、 色覚異常のようです

色のコントラストを計算する

色のコントラストの式では、 相対輝度 コントラストを決定しやすくします（1 ～ 21 の範囲）。この数式 多くの場合、[color value]:1 と省略されます。たとえば 純粋な黒ではなく 白の色のコントラスト比は 21:1 で最も大きくなります。

(L1 + 0.05) / (L2 + 0.05)
L1 is the relative luminance of the lighter color
L2 is the relative luminance of the darker colors

標準サイズのテキスト（テキストの画像を含む）には、色のコントラスト比が必要です が 4.5:1 で、 色に関する WCAG の最小要件 大きなサイズのテキストと必須アイコンの色のコントラスト比は 3:1 にする必要があります。 大きいテキストは少なくとも 18 pt / 24 px または 14 pt / 18.5 ピクセルを太字にします。ロゴと装飾要素については、これらの色は適用されません コントラスト要件があります。

ありがたいことに、高度な数学は必要ない。 色のコントラストが計算されます。次のようなツール Adobe Color カラー コントラスト アナライザー Leonardo、 Chrome の DevTools カラー選択ツール 色のコントラスト比をすばやく確認し、 最も包括的なカラーペアとカラーパレットを 作成できます

色の使用

言葉やアイコンなどのグラフィックが適した色のコントラストがない 見つけにくい要素 デザインがアクセス不能になることもありますですが 同時に支払うのは 色がどのように使用されるかに 画像、動画、音声、動画、画像、動画など 視覚要素を区別できるようにします。

たとえば、「緑色のボタンをクリックして続行してください」と言います。 ボタンに追加のコンテンツや識別子を含めない場合は、次のようになります。 色覚異常の人の場合、どのボタンを押すかがわかりにくい できます。同様に、多くのグラフ、チャート、表では、色のみを使用して 情報です。パターン、テキスト、アイコンなどの識別子を追加すると、 コンテンツの理解を助けるうえで欠かせない要素です。

色の潜在的な問題をすばやく検出するには、デジタル商品をグレースケールで審査することをおすすめします。

色に焦点を当てたメディアクエリ

画面の色のコントラスト比や使用法のほかにも 広く利用され、サポートされている メディアクエリ 画面に表示される内容をより詳細に制御できます。

たとえば、@prefers-color-scheme メディアクエリを使用すると、ダークモードを作成できます。これは、光に対する恐怖症や光に敏感な人に役立つ可能性があります。また、@prefers-contrast を使用して高コントラストのテーマを作成することもできます。色に不自由な人やコントラストに敏感な人をサポートします。

カラーパターンを好む

メディアクエリ @prefers-color-scheme を使用すると、ユーザーは照明または ユーザーがアクセスしているウェブサイトやアプリのダークテーマ バージョンこのグラフは、 ダークモードの動作を変更できます。 このメディアクエリに対応しているブラウザに移動します詳しくは、 Mac / ダークモードに関する Windows の手順。

</ph>

ライトモードとダークモードを比較します。

<ph type="x-smartling-placeholder">

</ph>

で確認できます。 <ph type="x-smartling-placeholder">

</ph> 。

コントラストを好む

@prefers-contrast メディアクエリがユーザーの OS 設定をチェックし、高コントラストがオンになっているかどうかを確認する オフにします。コントラストを変更して、このテーマの変化を確認できます このメディアクエリに対応しているブラウザに移動します （Mac と Windows のコントラスト モード設定）。

標準コントラストと高コントラストを比較します。

<ph type="x-smartling-placeholder">

</ph>

で確認できます。 <ph type="x-smartling-placeholder">

</ph>

メディアクエリのレイヤ化

色に特化した複数のメディアクエリを使用して、 選択します。この例では、@prefers-color-scheme と 一緒に @prefers-contrast しましょう。

色とコントラストの両方を比較します。

<ph type="x-smartling-placeholder">

</ph>

で確認できます。 <ph type="x-smartling-placeholder">

</ph>

<ph type="x-smartling-placeholder">

</ph>

で確認できます。 <ph type="x-smartling-placeholder">

</ph>

理解度をチェックする

色とコントラストに関する知識をテストする