Custom text selection color causes text selection not to be visible in FireFox when in High-Contrast mode

[robgeorge9]

When text is selected by the user, a background highlight is shown to indicate the range of text that is selected. For users of the FireFox browser on Windows machines running High-Contrast mode the text selection highlight is invisible when custom colors are used. For accessibility purposes, it is best practice to not overwrite text selection colors.

Please consider removing the following.
::-moz-selection
{ background-color:#b3d4fc; color:#000; text-shadow:none }

::selection
{ background-color:#b3d4fc; color:#000; text-shadow:none }

[jonathantneal]

Certainly, I’ll either need to test this to be certain or get a citation from you. Could you do that? This rule was added to improve accessibility, because text selections with text shadows are much harder to read.

[robgeorge9]

The problem with overwriting the selection colors comes when you are using Windows High Contrast mode without IE. IE will not allow the overwrite to work, as WHC mode overwrites the styles inline. The problem comes with non-native browsers as it is not able to enact on the overwriting of styles and thus can render out incorrectly.

[jonathantneal]

@robgeorge9, does Firefox support a high contrast mode media query? I could make this change wrapped in that media query.

[robgeorge9]

Since FF is not a native browser to the OS, Windows High Contrast mode is not supported to the full extent. Unfortunately, this is a limitation of the system built into the OS. Both FF and IE are both preferred browsers for PCs, so it's a bit unfortunate that it was overlooked in development, as they did create a media query for IE using WHC, just not FF.

[jonathantneal]

Would you be able to provide some screenshots? If so, I think we can make this change, despite the slight downgrade it means for other, aforementioned scenarios.

[jonathantneal]

I will be on vacation for a few weeks, but if you’re able to provide some screenshots, I’m still open to resolving this issue with you.

[robgeorge9]

Yes sorry, I'll be back in the office on Friday. I will send through screenshots then.

[robgeorge9]

Jonathan,

Here are the screenshots you requested. I've supplied both how IE and Firefox treats text selection on our website along with Yahoo.

Firefox

IE

Let me know if you need anything else.

[jonathantneal]

Thank you for the feedback, and I apologize for the late response. Yes, I will remove this in the next major release.

[tigt]

Thank you for making this change to restore the correct selection colors to HCM users.

I’m curious, does:

::-moz-selection {
  text-shadow: none;
}

::selection {
  text-shadow: none;
}

…have the same problem? Disabling text-shadow was a pretty good usability move, in my opinion.

[jonathantneal]

@tigt, good point, and thanks for bringing it up because I hadn’t considered that. @robgeorge9, any concerns with disabling text-shadow, which was originally done in the service of usability?

[tigt]

I can’t test HCM in Firefox due to my company’s draconian installation policy, but I can confirm that by default IE ignores text-shadow altogether in High-Contrast Mode, so barring weird side-effects, it should be safe to remove for everyone inside a selection.

[robgeorge9]

@jonathantneal @tigt - No issues with the text-shadow. Feel free to add that back.