色は、感情、意味、個性を簡単に連想させることができる優れた手段です。提示するコンテンツとそのコンテキストによって、調和のとれた配色の実現方法を決定します。色を効果的に使用することで、ブランドイメージや意図したエクスペリエンスをユーザーにアピールできます。
次の表に、Alexaの視覚エクスペリエンスで使用する標準のテキストパレット、背景パレット、コントロールパレットを示します。
colorText
|
colorGray100 |
テキスト要素に使用されるデフォルトの色です。 |
colorTextReversed |
colorGrey800 |
標準テキストの要素を、背景と著しく異なるカラー値の要素の上に表示するときに使用します。 |
colorSecondaryText |
colorWhite |
メタデータのテキストを目立たせないようにするために使用します。 |
colorSecondaryReversed |
colorGrey800 |
背景と著しく異なるカラー値の要素の上に表示されるメタデータのテキストに使用します。 |
colorDisabledText |
colorGray100 |
第1テキストか第2テキストかを問わず、あらゆるdisabledの状態のテキストに使用します。 |
colorDisabledText |
colorGrey800 |
disabledの状態のテキストを、背景と著しく異なるカラー値の要素の上に表示するときに使用します。 |
colorBackground |
|
|
TVのオーバーライド |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
colorComponent |
colorGray100 |
コンポーネントがデフォルトのときに使用される第1カラーです。たとえば、デフォルトのボタン、アイコン、ボタン枠線、選択されていないチェックボックスなどです。 |
colorComponentReversed |
colorGray800 |
明るい背景に配置するコンポーネントに使用される暗い色です。 |
エンプティステート、写真、データビジュアライゼーションなど、リッチメディアや写実的なコンテンツエクスペリエンスの場合には、コンテンツが主役になるように、目立たない背景色として濃い青が適用されます。
Amazonでは、ベースラインカラーシステムをAAのアクセシビリティレベルになるようにデザインしています。すべてのテキストと色のコントラスト比は4.5:1ですが、ほとんどの色とコントラストはAAAの比率を満たしています。UI要素で意味を伝えるためには、色以外の工夫も必要です。たとえば、色覚異常を持つユーザーは、フォームフィールドの赤いラベルを「入力必須」の印だと識別できない可能性があります。色だけでなく、太字などの別の視覚的要素を組み合わせると良いでしょう。
重要： ユーザーが遠くにいる場合や目が不自由な場合でも見えるように、テキストは十分なコントラスト比（理想は背景に対して4.5:1）で表示されるようにしてください。