Android - Steps and Topics Screens - Not Enough Color Contrast for TalkBack Highlight and Background

[jfc3-dol]

The color contrast of the light blue outline/highlight from TalkBack on the white background for the dark blue“Previous Topic” or "Previous Step" button and the “Next Topic” or "Next Step" button is not enough.

The color contrast ratio is 2.0:1 and needs to be 4.5:1 or higher to pass.

Please see attached screenshot of outline/highlight from TalkBack on the black "Previous Step" button.

[KyleLivingstonDOL]

Hi John,

What is the outline ring color contrast needed? Is it 4.5:1, like other contrasts?

-Kyle

[jfc3-dol]

So keyboard users or those using a screen reader to read along can see where on a page/screen they are located.

Yes, the outline ring needs to have enough color contrast between itself and the background color along with itself, and in this example, the button. In my years of programming, I have found that inverting the color of the button and text color can work the best. An example would be if the text is white and the background of the button is dark blue when it in its normal state that if you make the text and border color the same blue with a white background, you should be fine unless the button is on top of another background color that won't work.

I use Jonathan Snook's online Colour Contrast Checker ( https://snook.ca/technical/colour_contrast/colour.html ) to make sure the color contrast ratio is 4.5:1, and both of the WCAG 2.0 AA boxes say "YES". All you have to do is put the text and background colors in the foreground and background fields, and it will tell you what you need to know.

[KyleLivingstonDOL]

Thanks John, we can address this. ZTI, let's change this to red and use red throughout for the talkback highlight color since we use a lot of blues. -Kyle

[LeHaine]

I am not entirely sure if the TalkBack outline color can be changed. It seems to be unaffected by CSS outlines. Also when using TalkBack on my device, I am getting a green outline vs a blue outline.

[jfc3-dol]

The color contrast between the green outline ( 319B0F ) and the dark blue button ( #112E51 ) have a color contrast ratio of 3.8:1. While the light blue ( #0071BC ) and the green outline have a color contrast of 1.43:1 and they all need to be 4.5: or higher to pass. Plus, using blue and green is an issue for those that have a blue-green color deficiency (colorblind), so they will have trouble telling them apart or that they might be different.

[jfc3-dol]

The TalkBack blue focus ring does not have enough color contrast when focusing on the blue or dark blue buttons.

If this is an Android operating system issue I would like to keep this open until there is a fix since you said CSS changes aren't working.

[KyleLivingstonDOL]

John,

Thanks for this. We cannot change the Talkback focus ring color within Comply Chain as the ring is not part of Comply Chain. Rather the ring's color is part of Talkback's program. As seen above, your ring is blue but Colton's ring is green. We understand that neither have the require contrast to sufficiently address the 508 issue. Since changing the button colors would require us to go back to the beginning of app development to change the entire color scheme, we would like to put this issue on hold for now (along with #18) until a time comes when we can influence the Talkback focus ring color from Comply Chain.

Best, Kyle

[jfc3-dol]

At this point, it makes sense to put this and issue #18 on hold since the number of sighted TalkBack users that are also color deficient (colorblind) is probably that huge.

[KyleLivingstonDOL]

Thanks John. Confirming we are putting this on hold. -Kyle

[jfc3-dol]

If that is the case with this issue or any other that is not left open and not accessible OPA sends out a document listing the number of issues found, still open, and requests at least an e-mail stating the given agency is willing to take the risk if someone complains in whatever way that it's not accessible. Which has been done by all of them as far as I know.

[KyleLivingstonDOL]

Ok. Thanks John. I appreciate this information. Do you know what the procedure is to start this process?

[jfc3-dol]

Once we are done testing the entire Comply Chian application (iOS, Android, and web) I create and send to you and my boss OPAs findings of the number of issues found; the number closed, etc. At which point we then look for a signature (can be electronic or an e-mail) from the agency that they are willing to take the risk of having known accessibility issues when moving everything to PROD.

By documenting things in GitHub with all these types of comments, we could explain to someone that some of them are platform issues, etc. OPA doesn't want to put an agency or DOL at risk for complaints, etc. from people along with we are working on them.

[jfc3-dol]

Marking this issue for a "Future release" by using the label "future release" so we all know we are most likely not finishing it this release unless we manage to figure out how to do it.

[jfc3-dol]

While checking this issue with TalkBack again, the color contrast for the focus ring on the buttons does not pass.

[pbhatt17]

@jfc3-dol This focus ring is from talkback and can't modify. Do you still want to keep this ticket open?

[jfc3-dol]

@pbhatt17

I'm keeping this open to remind us that the TalkBack focus ring still has poor color contrast. It probably won't close until Android allows developers to change the color of the focus ring when using TalkBack or a blue tooth keyboard.