Google I/O にご参加いただきありがとうございました。オンデマンドでコンテンツを視聴できます。

このページは Cloud Translation API によって翻訳されました。

色とコントラスト

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

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

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

色の認識

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

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

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

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

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

色のコントラストの測定

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

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

オリジナルの虹色の砂。 — </ph> 写真撮影: Alexander Grey、Unsplash

オリジナルの虹のパターン。 — </ph> 写真撮影: Clark Van Der Beken、Unsplash より

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

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 を使用して高コントラストのテーマを作成することもできます。色に不自由な人やコントラストに敏感な人をサポートします。

カラーパターンを好む

対応ブラウザ

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

ソース

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

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

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

コントラストを好む

対応ブラウザ

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

ソース

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

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

コントラスト設定のないライトモードでのコードサンプル。 — ライトモード、コントラスト設定なし。

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

高コントラスト設定を使用するダークモードのコード例。 — ダークモード、高コントラスト設定。

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

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

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

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

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

理解度をチェックする

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

色だけではドキュメントとして十分な識別子ではありません。読者が UI 要素を識別する際に役立つものは他に何がありますか？

パターン

少し違うようです。ユーザーが UI 要素を識別するには、パターンだけでは不十分です。

テキスト

少し違うようです。ユーザーが UI 要素を識別するには、テキストだけでは不十分な場合があります。

アイコン

少し違うようです。ユーザーが UI 要素を識別するには、アイコンだけでは不十分です。

上記のすべて

はい。ユーザーが UI 要素を識別するには、識別子を 2 つ以上指定してください。