Sign-In Widget Gen 3 Button Text Color Cannot Be Overridden
Last Updated:
Overview
This article explains why the button text color on the Sign-In Widget (SIW) Gen 3 changes automatically based on the primary color selected in the User Interface (UI). After UI enhancements, the button text color may change from white to black to meet accessibility standards.
Cause
The SIW Gen 3 backend automatically calculates the color contrast ratio of the selected primary button color against white text (#FFFFFF). If the combination does not meet the minimum Web Content Accessibility Guidelines (WCAG) contrast requirement, the system overrides the text color to black. This ensures an accessible contrast ratio is met and is the expected behavior designed to enforce accessibility standards.
Solution
The automatic adjustment of the button font color is a core feature designed to meet minimum color contrast requirements and cannot be disabled.
While a custom domain allows for overriding design tokens, this is not a viable option in this scenario. The design token mapped to the button text color, HueNeutralWhite, is also mapped to other components, such as the text input background color. Overriding this token would cause adverse and unintended visual changes to other parts of the UI.
For functionality to override this specific color setting without affecting other components, refer to the following article for more information about Okta Ideas: How to Submit a Feature or Enhancement Request using Okta Ideas.
