色は、感情、意味、個性を簡単に連想させることができる優れた手段です。提示するコンテンツとそのコンテキストによって、調和のとれた配色の実現方法を決定します。色を効果的に使用することで、ブランドイメージや意図したエクスペリエンスをユーザーにアピールできます。

色の使用方法

次の表に、Alexaの視覚エクスペリエンスで使用する標準のテキストパレット、背景パレット、コントロールパレットを示します。

テキストパレット

colorText

 

colorGray100
#FAFAFA
#DADADA(TV用)

テキスト要素に使用されるデフォルトの色です。

colorTextReversed

colorGrey800
#1E2222

標準テキストの要素を、背景と著しく異なるカラー値の要素の上に表示するときに使用します。

colorSecondaryText

colorWhite
#FFFFFF
#DADADA(TV用)

メタデータのテキストを目立たせないようにするために使用します。

colorSecondaryReversed

colorGrey800
#1E2222

背景と著しく異なるカラー値の要素の上に表示されるメタデータのテキストに使用します。

colorDisabledText

colorGray100
#FAFAFA

第1テキストか第2テキストかを問わず、あらゆるdisabledの状態のテキストに使用します。

colorDisabledText
Reversed

colorGrey800
#1E2222

disabledの状態のテキストを、背景と著しく異なるカラー値の要素の上に表示するときに使用します。

背景パレット

colorBackground


colorBlue800
#232F3E


ほかに背景スタイルが適用されていないときにコンテンツの後ろに表示される色です。たとえば、背景として画像を使用する場合などです。

TVのオーバーライド
#35485E


TVでは、colorBackgroundは#35485Eでオーバーライドされます。


colorBackgroundReversed


colorGray200
#EBEDED


ほかに背景スタイルが適用されていないときにコンテンツの後ろに表示される色です。たとえば、背景として画像を使用する場合などです。


colorBackgroundOverlay


colorBlack
#000000

colorBlackTVSafe
#0F0F0F
(TV用)


画像が見えやすくなるように半透明のフィルターで画像を覆うときに使用します。固定値のことも、画像から生成された動的な値のこともあります。


colorRed800


#65151E


赤の背景色です。


colorGreen800


#34581B


緑の背景色です。


colorTeal800


#0A655E


青緑の背景色です。


colorBlue800


#232F3E


青の背景色です。


colorPurple800


#3E3F68


紫の背景色です。


colorGray800


#1E2222


灰色の背景色です。

コントロールパレット

colorComponent

colorGray100
#FAFAFA
#DADADA(TV用)

コンポーネントがデフォルトのときに使用される第1カラーです。たとえば、デフォルトのボタン、アイコン、ボタン枠線、選択されていないチェックボックスなどです。

colorComponentReversed

colorGray800
#1E2222

明るい背景に配置するコンポーネントに使用される暗い色です。

色の使用方法

エンプティステート、写真、データビジュアライゼーションなど、リッチメディアや写実的なコンテンツエクスペリエンスの場合には、コンテンツが主役になるように、目立たない背景色として濃い青が適用されます。

アクセシビリティ

Amazonでは、ベースラインカラーシステムをAAのアクセシビリティレベルになるようにデザインしています。すべてのテキストと色のコントラスト比は4.5:1ですが、ほとんどの色とコントラストはAAAの比率を満たしています。UI要素で意味を伝えるためには、色以外の工夫も必要です。たとえば、色覚異常を持つユーザーは、フォームフィールドの赤いラベルを「入力必須」の印だと識別できない可能性があります。色だけでなく、太字などの別の視覚的要素を組み合わせると良いでしょう。

重要: ユーザーが遠くにいる場合や目が不自由な場合でも見えるように、テキストは十分なコントラスト比(理想は背景に対して4.5:1)で表示されるようにしてください。

開発者向けドキュメント