色
色は、感情、意味、個性を簡単に連想させることができる優れた手段です。ベースラインカラーシステムはAAのアクセシビリティレベルになるようにデザインされました。すべてのテキストと色のコントラスト比は4.5:1ですが、ほとんどの色とコントラストはAAAの比率を満たしています。
このガイドでのデザイン推奨事項は、Stylesパッケージを参照しています。Stylesパッケージとは、スキルで使用するために読み込みが必要な追加のプロパティセットのことです。詳細については、Alexa Stylesパッケージを参照してください。
色の使用
表示されるコンテンツとそのコンテンツが表示されるコンテキストによって、色の調和が決まります。色を使うと、スキルと対話するユーザーにブランディングと意図するエクスペリエンスを伝えることができます。
色で感情を表すこともできますが、受け取るユーザーによって違う意味を持つこともあります。UI要素で意味を伝えるためには、色以外も使うべきです。たとえば、色覚異常を持つユーザーは、フォームフィールドの赤いラベルを「入力必須」の印だと識別できない可能性があります。太字など別の視覚標識と組み合わせれば、色を使うこともできます。テキストは常に十分なコントラスト比で表示されるようにしてください。背景に対して4.5:1が理想です。これは、ユーザーが遠くから見る場合や目が不自由な場合でも見えるようにするためです。
エンプティステート、写真、データビジュアライゼーションなど、リッチメディアや写実的なコンテンツエクスペリエンスの場合には、コンテンツが主役になるように、目立たない背景色として濃い青が適用されます。
テキストパレット
| colorText | colorGray100 #FAFAFA #DADADA（TV、横長、特大） |
テキスト要素に使用されるデフォルトの色です。 | |
| colorTextReversed | colorGrey800 #1E2222 | 標準テキストの要素を、背景と著しく異なるカラー値の要素の上に表示するときに使用します。 | |
| colorSecondaryText | colorWhite #FFFFFF #DADADA（TV、横長、特大） |
メタデータのテキストを目立たせないようにするのに使用します。 | |
| colorSecondaryReversed | colorGray800 #1E2222 | 背景と著しく異なるカラー値の要素の上に表示されるメタデータのテキストに使用します。 | |
| colorDisabledText | colorGray100 #FAFAFA | 第1テキストか第2テキストかを問わず、あらゆるdisabledの状態のテキストに使用します。 | |
| colorDisabledText Reversed |
colorGray800 #1E2222 | disabledの状態のテキストを、背景と著しく異なるカラー値の要素の上に表示するときに使用します。 |
背景パレット
| colorBackground | colorBlue800 #2E536F | 背景としての画像など、ほかに背景スタイルが適用されていないときにコンテンツの後ろに表示される色です。 | |
| colorBackgroundReversed | colorGray200 #EBEDED | ほかに背景スタイルが適用されていないときにコンテンツの後ろに表示される色です。たとえば、背景として画像を使用する場合などです。 | |
| colorBackgroundOverlay | colorBlack #000000 colorBlackTVSafe #0F0F0F（TV、横長、特大） |
画像が見えやすくなるように半透明のフィルターで画像を覆うときに使用します。固定値のことも、画像から生成された動的な値のこともあります。 | |
| colorRed800 | #65151E | 赤の背景色です。濃い赤として使用できます。 | |
| colorGreen800 | #34581B | 緑の背景色です。濃い緑として使用できます。 | |
| colorTeal800 | #0A655E | 青緑の背景色です。濃い青緑として使用できます。 | |
| colorBlue800 | #2E536F | 青の背景色です。濃い青として使用できます。 | |
| colorPurple800 | #3E3F68 | 紫の背景色です。濃い紫として使用できます。 | |
| colorGray800 | #6B7878 | 灰色の背景色です。濃い灰色として使用できます。 |
コントロールパレット
| colorComponent | colorGray100 #FAFAFA #DADADA（TV、横長、特大） |
コンポーネントがデフォルトのときに使用される第1カラーです。たとえば、デフォルトのボタン、アイコン、ボタン枠線、選択されていないチェックボックスなどです。 | |
| colorComponentReversed | colorGray800 #1E2222 | 明るい背景に配置するコンポーネントに使用される暗い色です。 |