High contrast improvements

[philwareham]

Investigate high contrast modes in OSX and Windows (and anywhere else). See 31302fc#commitcomment-16096579. Target Textpattern 4.7 for any potential gains.

[philwareham]

Via @phiw13 (moved from incorrect issue thread):

Before I forget what I discussed with some windows users (one of them an IT go-to guy working for a midsize British city, who notes: very low usage amongst his users).

1. color and border-color property are set to the user default (black - currentColor)
2. background-color is painted white if specified (transparent is respected); background-image(s) are suppressed.
3. links are painted in the default user set color - underlining is not enforced.
4. outline-color is painted based on currentColor (e.g. blue for links, assuming blue is the color of links).
5. box-shadows are suppressed, always.
6. opacity is respected

[*] the transparent keyword and semi-translucent colours (rgba, hsla) are converted to solid colours (black for borders in the example, white for background).

tl;dr - Open Firefox on your Mac, Preferences > Contents, click the “Colors” button, set the drop-down to “always”. Enjoy the view – this is what IE11 on Win 7, and Edge see.

Specifically for Hive: missing icons, absolutely no feedback as to focus state. For the latter, there is an easy fix: instead of using outline: none, use outline: 2px solid transparent or similar. In High-contrast mode, the outline color will be painted using the currentColor. Works for links and buttons or other form controls. The #messagepane equally has very low visibility – border: 2px solid transparent as an addendum helps here.

On Windows 8, as noted in previous conversation, there are couple of media queries. These can be used to load high contrast icons. It works!

@media (-ms-high-contrast: black-on-white) {
  .ui-icons { background-image: url(path-to-black-icons.svg) }
  .other-class, .yet-another-class, .more-class { background: url(path-to-Hive-sprite.svg); }
}

and ditto for white-on-black. For Firefox (which does respect the users choice of high-contrast mode) there are, as far as we could think, no easy solutions for the icons.

[phiw13]

Or perhaps this won’t be needed after all, as future Edge releases will (eventually) load all background-images. See this blog post .
Lots of conditionals in the preceding text as it is not clear to me what the new feature actually does.

See also a relevant Firefox bug.

[phiw13]

Before misplacing it: screenshot on Edge 15 - more comments later, when I have time to write them up.

[phiw13]

A couple of notes:

• Starting width Edge 15, background-images are rendered; that includes gradients (see e.g. .txp-header). Behind the text node that is on top of such a gradient, Edge paints a solid(black/white) background (see e.g. Publish /Save button, logout button). For my Sandspace theme, I suppress most gradients in high-contrast mode; that only adds noise - in some cases, a “solid” gradient might be useful (linear-gradient(gray,gray), as it might override the default background to indicate a selected/focussed state. But handle with care.

• The icons are rendered (near-black… yes they are there in the screenshot), they are OK in black-on-white-mode, but the reverse is not true. Solution: the MQ’s noted in a previous comment.

• the little triangle icons are converted to solid rectangles (all borders are set to currentColor). The same is true for the .spinner icon next to Save/Publish button; for the latter I set the border-top-width to 0 in high contrast mode.

• #messagepane could probably use a border to make it more visible against the background. This may apply to other elements as well, I haven’t tested everything.

• a indicated previously, there is no indication that an element has focus (all borders are painted with currentColor): menu, form controls, buttons, …, except for a few inline links (e.g. List panels, the links inside th and td).

• regarding the form controls: Edge 15 (and older if one believes caniuse, but I somewhat doubt their info is accurate) supports and applies the -webkit-appearance property. Might matter for rendering the arrow on the <select /> widget (to reset: select { -webkit-appearance: menu list; })

• most jq-ui widgets are useable, except perhaps the radio/checkbox ones (selected state, borders of the shape), see screenshot below.

Edge 15 makes it easier, but still needs to account for older versions (Win 8.x, Win 7) + Firefox.

PS - making Sandspace mostly work well with High-contrast themes: an additional ~1,6kb in the stylesheet (screenshot, see the spinner?: https://emps.l-c-n.com/images/28.png)

PS2 - to quickly toggle (temp) between default and High-Contrast theme on Win 10: left-Alt + left-Shift + Prtsc buttons.

[philwareham]

Thanks Philippe - interesting stuff. I have a Windows 10 laptop now so I can directly test out some fixes for this, as noted. Seems like it'll be an ongoing job to improve the themes as the current high-contrast modes are a bit limited in scope (and no standardised browser-/OS-wide implementation exists).

[phiw13]

Dealing with icons - this works perfectly to load/display the icons on Win 10, and I think on Win 8 with IE 11.

@media (-ms-high-contrast:active) {
  .ui-icon {
    -ms-high-contrast-adjust:none;
  }
}

@media (-ms-high-contrast:white-on-black) {
  .ui-icon {
    filter: invert(1) brightness(1.2);
  }
}

One issue remains: with Win8.x + IE the icons are barely visible on white-on-black and with both Win 8 and 10, if the user chooses a theme that is not the default black/white - e.g. dark blue background + light (white) foreground, the second MQ does not kick in and the icons are hard to see. The solution I’m considering is add a semi-translucent background-color to .ui-icon (in the 1st MQ), but I haven’t tested yet.

.ui-icon { background-color: hsla(0, 0%, 100%, .5); }

[philwareham]

Thanks Philippe. I've added some of those high-contrast rules now. Let me know how your further investigations go.

[phiw13]

Regarding the display of icons in high-contrast mode - improving the contrast with custom user schemes (e.g. the user set a darkish background colour and light foreground colour such as dark blue + yellow, some dyslexic people seem to favour that combo). Windows does not flag this as a “white-on-black” theme

The least insane way of solving this I found is adding a (faint) semi-translucent white background color. This will improve contrast with the background-color set by the user.

Code wise – and this can be extended to your other icons and eventually your little toggle arrows (table sorting etc).

@media (-ms-high-contrast:active) {
.ui-icon {
  /* force the loading of the background-image for IE 11 on win 8 */
  -ms-high-contrast-adjust:none;
  background-color: hsla(0, 0%, 100%, .5);
  filter: brightness(.9);
  }
}
@media (-ms-high-contrast:white-on-black) {
  /* only Edge will use this… */
  .ui-icon {
    filter: invert(1) brightness(1.2);
  }
}

The above is what I use for Sandspace theme. For Hive, you may want to reset the opacity that you use here and there; the use of filter: brightness(0.9) kills off the icon colouring and makes it slightly darker (Edge only). It is not perfect, but makes the icons more visible, especially on themes with darker background-colours. And it avoids stomping too much on the colour choices made by the user.

[philwareham]

Related: #74