Okta Sign-In Widget Gen 3 Prevents Button Text Color Overrides
Last Updated:
Overview
The Okta Sign-In Widget (SIW) Gen 3 automatically changes the button text color based on the primary color selected in the User Interface (UI) to meet accessibility standards. Okta calculates the color contrast ratio and overrides the text color to black if the combination fails to meet the minimum Web Content Accessibility Guidelines (WCAG) contrast requirement. Okta prevents administrators from disabling this core feature. Administrators observe that after UI enhancements, the button text color unexpectedly changes from white to black.
Applies To
- Okta Identity Engine (OIE)
- Okta Classic Engine
- Sign-In Widget (third generation)
- Custom Domain
Cause
Okta automatically calculates the color contrast ratio of the selected primary button color against white text (#FFFFFF). If the combination does not meet the minimum WCAG contrast requirement, Okta overrides the text color to black. This ensures an accessible contrast ratio and enforces accessibility standards.
Solution
Why does the button text color change automatically?
The automatic adjustment of the button font color is a core feature designed to meet minimum color contrast requirements. Okta prevents administrators from disabling this feature.
Is overriding design tokens a viable workaround?
While a custom domain allows administrators to override design tokens, this is not a viable option in this scenario. The design token mapped to the button text color, HueNeutralWhite, also maps to other components, such as the text input background color. Overriding this token causes adverse and unintended visual changes to other parts of the UI.
Submit a feature request to override this specific color setting without affecting other components by reviewing How to Submit a Feature or Enhancement Request using Okta Ideas.
