iOS - Opened Link from "About" Screen - Have Poor Color Contrast

[jfc3-dol]

The color contrast of the blue "Done" link text ( #2F6AD1 ) at the bottom of the screen against the charcoal gray background ( #373737 ) does not have enough color contrast to pass. The color contrast ratio is 2.33:1 and needs to 4.5:1 or higher to pass. By changing the link text color to white ( #ffffff ) would fix the issue.

The same applies to the white text on the medium gray footer section ( #7F7F7F ) that shows the link. The color contrast ratio is 4.0:1. Changing the background color to #767676 will be enough contrast for the white text.

Please see the attached screenshot.

[jfc3-dol]

The color contrast issue has not been addressed and is still a problem.

[KyleLivingstonDOL]

ZTI, please change the DONE to white and please change the recommended color per John's request: #767676

[transreductionist]

Regarding the color change to the cordova-plugin-inappbrowser URL bar. There is no "straightforward" way of accomplishing this.

I completed a pretty exhaustive search on how one might change the cordova navigation bar UI. Not a whole lot out there that I could find. Mostly, the articles that came up talked about using the cordova-plugin-inappbrowser configuration options to make UI changes. This will not solve our issue though.

• This area in the UI is part of the cordova-plugin-inappbrowser. It uses a limited set of configuration options to modify the UI.
• The blue Done text has been changed using the configuration options. It has been set to the theme color off-white.
• The background color behind the URL does not have a configuration option.
• The URL bar itself may be hidden (currently it is showing).

I did find one good post where the author looked at the 3rd option, and then decided on the 2nd because of the time involved creating the plugin. There are several options as I see it:

1. Get a waiver and do nothing. 0 hours for development.
2. Hide the URL bar so that the URL text is not showing against the light gray background: 1-2 hours, probably less.
3. Fork the cordova-plugin-inappbrowser to the repository and hardcode the change there. Changes to the plugin are probably not frequent, however when the occur the forked repository would have to be updated. If you don't mind forking the repository it will give you complete control over the UI. I expect 4-8 hours, perhaps less.
4. Build a cordova-plugin-inappbrowser to allow a more broadly defined configuration, to be called after the plugin view is available. I have not built a cordova plugin and would love the chance. Not quite sure how this would work. Probably 24-40 hours.

[harpreetsdev]

Adding to the comments from Pervious developers there isn't a lot that can be done in this case. Since after clicking/tapping on the link it loads a UIWebView using the "cordova-plugin-inappbrowser" plugin where most of the UI elements are preset, so changing background color or link color something that would require some custom dev work. Thats a lot of effort in return for the value it would provide (IMHO).

[jfc3-dol]

@harpreetsdev

For those with low vision or color deficiencies (colorblind), color contrast helps make the application usable to them.

I will have to give this a look tomorrow since I got a lot of other items to review this week for something that is going live Monday. So I need to check on a few other things before the end of today.

[jfc3-dol]

@harpreetsdev

The "Done" button now has enough color contrast. Guessing some other changes corrected the issue. But the white Link text ( #ffffff ) on the light gray background ( #7F7F7F ) above the "Done" button still does not have enough color contrast. Its color contrast ratio is 4.0:1 and needs to be 4.5:1 or higher to pass.

Once the link color contrast is fixed, I can close the issue.

NOTE: I did notice the there are two arrows, for I assume Previous and Next links for something that has poor color contrast. Do you want me to one a new GitHub issue for this problem? Plus, when reading with VoiceOver, they both read "Unpronounceable".

Please see the attached screenshot.

[jfc3-dol]

@harpreetsdev @pbhatt17 @Abychalil

To fix the link color contrast issue, you could make the link text black ( #000000 ) on the light gray background ( #7F7F7F ) for it to pass.

I created an issue for the "Previous" and "Next" arrows ( #151 ) so you can track it as a separate issue if I haven't already done so.

[jfc3-dol]

Using the screenshot from August 14, 2020, as an example, the highlighted sections with the URL and "Previous" and "Next" buttons still does not have enough color contrast. The "Done" button text on the dark gray background has enough color contrast.

[pbhatt17]

@jfc3-dol The default navigation button color can't change. We have change navigation button color to white and it will show when you navigate inside the link. Please see attached screenshot. This change will release on 13th August.

[jfc3-dol]

@pbhatt17

Thanks, will test once I get the latest version next week.

[jfc3-dol]

@pbhatt17

The color contrast ratio is 2.9:1 and needs to be 4.5:1 or higher to pass. If you can not make the highlighted arrows' color lighter, such as white like the text. Then change the background to black.

Please see the attached screenshot.