bug: ios ion-segment button text is not readable in some instances.

[FiniteSingularity]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

If an ion-segment is contained in an ion-toolbar whose color is set to light, and the mode is ios, the segment-button text is unreadable in light mode. Additionally, if the ion-toolbar color is set to dark, the segment-button text is unreadable in dark mode. Issue present in Chrome, Brave, and FireFox. (See attached screen shots)

Expected Behavior

The ion-segment-button text should be readable regardless of the color of its container ion-toolbar in both light mode and dark mode.

Steps to Reproduce

Make an ion-toolbar, set the color to light, add to it an ion-segment with buttons, and set its mode to ios. Now open the page in a browser set to light mode. The ion-segment-button text will be unreadable as its color will be nearly identical to the segment button background. Or rather than that, just use the reproduced code linked below, and toggle your browser between light mode and dark mode.

Code Reproduction URL

https://github.com/FiniteSingularity/ionic-segment-color-issue

Ionic Info

Ionic:

Ionic CLI : 6.12.3 (/mnt/c/Users/mdobo/AppData/Roaming/npm/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.3.8
@angular-devkit/build-angular : 15.0.0
@angular-devkit/schematics : 15.0.0
@angular/cli : 15.0.0
@ionic/angular-toolkit : 6.1.0

Utility:

cordova-res : not installed
native-run : not installed

System:

NodeJS : v16.18.1 (/home/mark/.nvm/versions/node/v16.18.1/bin/node)
npm : 8.19.2
OS : Linux 5.10

Additional Information

It appears that the text color is taken directly from the background color. However, unlike the case where no color is set on the container, the button background is always white (causing the readability issue). Can the light/dark color container segment work more like the non-color segment where it gets a dark button background for contrast in some cases?

[liamdebeasi]

Thanks for the report. I can reproduce this. As you noted, the problem is that we force the segment indicator background to white when using the segment in a toolbar with color:

ionic-framework/core/src/components/segment-button/segment-button.ios.scss

Line 206 in 181c44e

background: #fff;

This causes issues on dark mode as the text color on the checked button is then set to the base color. For the dark palette, this base color is a very light gray.

Similarly, this causes issues in light mode with the light palette as the base color is also a light gray:

---

The solution here should be to have the background change to the theme's contrast color instead. This means that the indicator colors for certain color palettes may change, but affected color combos do not pass even WCAG AA accessibility guidelines as they exist today.

[FiniteSingularity]

Thank you for the quick response and PR. I look forward to using the fix when it's merged in. 🧡

[liamdebeasi]

Thanks for the issue. This has been resolved via #26353, and a fix will be available in an upcoming release of Ionic Framework.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.