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

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

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

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

たとえば、［Primary color（プライマリカラー）］として［#638015］を選択すると、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（プライマリカラー）］を調整します。

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

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

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

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

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

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