Sign-In Widgetのカラーカスタマイズを理解する

Sign-In Widgetでは、ブランドのプライマリカラー（Primary color）と、WCAG 1.4.3のアクセシビリティ標準への準拠に基づいてカラーが決定されます。ブランドの作成とカスタマイズの詳細は、ブランディング（Branding）を参照してください。

第3世代（Sign-In Widget）でのボタン状態のカラー

第3世代（Okta Sign-In Widget）では、ホバーやクリックなどのユーザーインタラクションに基づいてボタンのカラーが変わります。Oktaでは、これらの異なるボタン状態にプライマリカラー（Primary color）のバリエーションを使ってカラーピッカーを生成します。

たとえば、プライマリカラー（Primary color）（#638015）として#638015（Primary color）を選択すると、Oktaは以下のカラーピッカーを生成します。

  • プライマリカラー（Primary color）：#638015、トークン名（Token name）：PalettePrimaryMain

  • ボタンホバー（Button hover）：#464F2E、トークン名（Token name）：PalettePrimaryDark

  • ボタンクリック（Button click）：#343A22、トークン名（Token name）：PalettePrimaryDarker

選択したプライマリカラー（Primary color）の16進値は、暗すぎたり、明るすぎたりすることがあります。該当する場合、カラーピッカーには異なるボタン状態に応じてカラーを生成するのに十分なシェードがありません。この場合、SIWではプライマリカラーを調整して、全色のカラーピッカーが生成されるようにします。調整されたプライマリカラーが、表示されるSIWボタンに使用される色です。

次の画像では、プライマリカラー（Primary color）が#5c0606に設定されています。このカラーでは暗すぎてカラーピッカーを生成できません。そのため、明るめに調整されたプライマリカラー（#9C6969）が選択されます。この調整されたプライマリカラーを使用してカラーピッカーが作成できます。

  • プライマリカラー（Primary color）：#5C0606

  • 調整されたプライマリカラー（Adjusted primary color）：#9C6969、トークン名（Token name）：PalettePrimaryMain

  • ボタンホバー（Button hover）：#7B3535、トークン名（Token name）：PalettePrimaryDark

  • ボタンクリック（Button click）：#6A1B1B、トークン名（Token name）：PalettePrimaryDarker

Sign-In Widgetのボタンの文字色とアクセシビリティへの準拠

Sign-In WidgetではWCAG 1.4.3のアクセシビリティへの準拠が強制適用されます。つまり、ボタンの文字色は、ボタンの背景に対して4.5：1以上のコントラスト比を確保する必要があります。Sign-In Widgetのどちらの世代も、文字色はアクセシビリティ標準を満たしています。第2世代では、白文字のコントラストが十分でない場合、ボタンの文字は黒に変更されます。第3世代では、文字の適切なコントラストを見つけるためにプライマリカラー（Primary color）を調整します。

第3世代（Sign-In Widget）でのボタン状態のカラー

第3世代（Sign-In Widget）でのボタンの文字は常に白です。選択したプライマリカラー（Primary color）が暗すぎたり、明るすぎたりして、ボタンの白文字に対するコントラストが十分でない場合があります。この場合、Sign-In Widget（第3世代）はプライマリカラー（Primary color）を変更して、4.5：1以上のコントラスト比を満たすプライマリカラーに調整します。

例（Example）：プライマリカラー（Primary color）として#96C21Fを選択した場合、白文字（#FFFFFF）に対するコントラスト比は2.09：1（<4.5：1）になります。第3世代（Sign-In Widget）は、ボタンテキストのコントラスト比が4.53：1（>4.5：1）になるよう、プライマリカラー（Primary color）を#638015に調整します。

第2世代（Sign-In Widget）でのボタンの文字色

第2世代（Okta Sign-In Widget）でのボタンのテキストは、白または黒となります。デフォルトでは、SIWは白文字を使用します。選択したプライマリカラー（Primary color）では、白文字に対するコントラスト比が4.5：1未満になることがあります。この場合、SIWはアクセシビリティへの準拠を確保するために、プライマリの対比色（文字色）を黒に変更します。

例（Example）：プライマリカラー（Primary color）として#6B8A16を選択した場合、白文字（#FFFFFF）に対するコントラスト比は3.98：1（<4.5：1）になります。そのため、Sign-In Widget（第2世代）ではプライマリの対比色が黒（#000000）に変更され、コントラスト比が5.27：1（>4.5：1）になります。