implement readability backplate for high contrast mode




2 months ago
a month ago


(Reporter: asa, Unassigned)


Firefox Tracking Flags

(Not tracked)





2 months ago

Microsoft describes it here

The goal of high contrast is to ensure a certain level of contrast between foreground and background colors. A problem arises with images. If text lies atop an image, altering the color of the text in high contrast will not guarantee its readability. One option would be to override images to allow text readability. This solution, however, is not an ideal one, as it can alter the context of a webpage for users under high contrast.

Instead, a preferred solution is to draw a so-called "readability backplate" behind all text to ensure contrast for text lying above images. As illustrated in the screenshots below, adding a backplate behind text in high contrast can drastically increase its readability. This solution is currently used in Microsoft Edge to ensure the readability of text in high contrast.

This backplate does not replace the background of an element, but rather is drawn on an intermediary layer:

As the diagram demonstrates, an element's text content is rendered using the WindowText system color and a backplate with a Window system color fill is drawn behind the text. These are then layered on top of the element's background (with background-color being filtered out). In the case of links, the text would instead use the appropriate high contrast link color.

Priority: -- → P3
See Also: → 1506364

I looked into how this could be implemented today. I don't think it would be 100% straightforward, like adding a background to text frames. The problem is that if there is a paragraph with a line height of 1em or smaller, the running background will obscure part of the preceding line.

You need to log in before you can comment on or make changes to this bug.