color

色

このスキルでは、すべての画面に適用される色のルールを扱います。コントラスト、役割トークン、半透明のニュートラルカラー、ダークモード、アクセントカラーの用途について説明します。

比率は画面上で測定した正確な値です

ここに示すコントラスト比は正確で、すべてのテーマに適用されます。比率は、トークン名から推測するのではなく、画面に描画された色から読み取ります。しきい値を下回る比率は、どのスタイルでも指摘事項になります。

既存のトークンを探すことは reuse に該当します。color-scheme、theme-color、テーマ切り替え、色だけで示すステータスは defaults に該当します。そもそも色を使うべきかどうかは restraint に該当します。

本文テキストは 4.5:1 を満たします

24px 未満のテキスト、または太字の場合は 18.66px 未満のテキストは、背後の要素に対して 4.5:1 を満たします。より大きなテキストは 3:1 を満たします。プレースホルダーとセカンダリテキストも対象ですが、無効なコントロールは対象外です。白地に #999 のテキストは 2.8:1 であり、color-text-contrast に該当します。

フィールドの境界とアイコンは 3:1 を満たします

フィールドの位置を示す境界、トグルのトラック、意味を持つアイコンは、周囲に対して 3:1 を満たします。白地に #e5e5e5 の境界線だけがあるフィールドは 1.3:1 であり、color-ui-contrast に該当します。区切り線と浮いた面のリングは装飾であり、対象外です。

画面上の色を測定します

半透明の色と opacity は、比率を読み取る前に背後にあるすべてのレイヤーと合成します。各テーマと、テキストが表示される各面で確認します。テキストの opacity: 0.6 を考慮せず、トークンの HEX 値から比率を計算した場合は color-measure-composited に該当します。

ブラウザーの evaluate 呼び出しを使って、ページ内で contrast.js を実行します。各結果は候補として扱い、報告する前に拡大した切り抜きで確認します。

画像上のテキストにはスクラムを使います

写真や動画の上にテキストを配置する場合は、グラデーションのスクラムまたは不透明なプレートを使います。テキストの下にある画像の最も明るい部分でも、比率を満たします。明るい空を背景にした白いテキストは color-scrim-under-text に該当します。

コンポーネントでは役割トークンを使います

コンポーネントは --text-secondary や --surface-raised のように、役割を示す名前のトークンを参照します。役割をパレットの段階に割り当てるのはテーマファイルだけです。コンポーネント内の color: var(--gray-500) は color-role-tokens に該当します。

面上のニュートラルカラーは半透明にします

境界線、区切り線、ホバー時の塗り、押下時の塗りにはアルファ値を持つニュートラルカラーを使い、その下にあるどの面でも見えるようにします。グレーのカード上で見えなくなる、不透明な #f5f5f5 のホバー塗りは color-alpha-neutrals に該当します。

ダークモードには独自のパレットを使います

ダークモードの面は、明るくすることで盛り上がって見せます。暗いページでは影がほとんど見えないためです。ページと同じ色のダークなポップオーバーを、影だけで浮き上がらせている場合は color-dark-raises-lighter に該当します。

アクセントカラーとステータスカラーには、コントラストに合わせて調整したダークモード用の値を使います。#0a0a0a のページで、ライトモード用の #2563eb のリンクを再利用すると、コントラスト比は 3.8:1 となり、color-dark-tuned-accents に該当します。

アクセントカラーはアクションを示します

アクセントカラーは、主要なアクション、選択状態、フォーカスを示します。アクセントカラーの見出しや、アクセントカラーのアイコンが並んだ行は color-one-accent に該当します。

各ステータスカラーには、それぞれ一つの意味を持たせます。赤はエラーと破壊的なアクションだけを示します。赤い「新着」バッジは color-status-meaning に該当します。

その組み合わせ

各チェック項目はペアになっています。問題のある値と、それを置き換える値を並べています。

ルール	問題のある値	置き換え
color-text-contrast	白地に color: #999、コントラスト比 2.8:1	color: #737373、4.7:1
color-ui-contrast	白地に #e5e5e5 の縁取りがあるフィールド、1.3:1	border-color: #8a8a8a、3.5:1
color-measure-composited	「トークンは #171717 なので合格」	opacity: 0.6 で描画された色の比率を、画面上で測定
color-scrim-under-text	写真に直接重ねた白いテキスト	テキストの下に置く linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent)
color-role-tokens	Card 内の color: var(--gray-500)	color: var(--text-secondary)
color-alpha-neutrals	ホバー時の background: #f5f5f5	ホバー時の background: var(--gray-a3)
color-dark-raises-lighter	ページと同じ #0a0a0a のダークなポップオーバー	#0a0a0a のページ上にある #1a1a1a のポップオーバー
color-dark-tuned-accents	#0a0a0a に #2563eb のリンク、3.8:1	ダークテーマの #60a5fa、7.8:1
color-one-accent	アクセントカラーのセクション見出し	--text-primary の見出し、プライマリボタンにはアクセントカラー
color-status-meaning	赤い「新着」バッジ	ニュートラルまたはアクセントカラーのバッジ

報告

重大度。 HIGH は、プライマリサーフェス上で比率が基準を下回る本文テキスト、縁取りが 3:1 に達しないフィールド、またはスクラムのない画像上のテキストです。MEDIUM は、コンポーネント内のパレットの段階差、サーフェス上で見えなくなるベタ塗りのニュートラルカラー、または画面上で一度も測定されていない比率です。影だけで暗いサーフェスを浮き上がらせている場合や、ダークモードで明るいアクセントカラーを再利用している場合も該当します。LOW は、装飾へのアクセントカラーの使用、または別の意味も持たせたステータスカラーです。

形式。 根本原因ごとに 1 件の指摘を記載します。

file:line - [rule-id] what is wrong (measured ratio)

続けて Rule | Count | Severity のサマリーを記載します。HIGH が 1 件でも残っている場合は Block、それ以外は Approve とします。開いて確認していないテーマを Approve にしてはいけません。キャンバス、動画、クロスオリジンのフレーム上のテキストには Not verified と記載します。