<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - AX: when invert colors is on, double-invert certain media elements in UserAgentStyleSheet"
href="https://bugs.webkit.org/show_bug.cgi?id=168447">168447</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>AX: when invert colors is on, double-invert certain media elements in UserAgentStyleSheet
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>WebKit Nightly Build
</td>
</tr>
<tr>
<th>Hardware</th>
<td>All
</td>
</tr>
<tr>
<th>OS</th>
<td>All
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>Accessibility
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>jcraig@apple.com
</td>
</tr>
<tr>
<th>CC</th>
<td>webkit-bug-importer@group.apple.com
</td>
</tr></table>
<p>
<div>
<pre>AX: when invert colors is on, double-invert certain media elements in UserAgentStyleSheet
Many low-vision users use the "invert colors" setting on macOS and iOS to quickly flip the foreground/background colors of content. This makes it easier for them to read (light-text-on-dark-background instead of dark-text-on-light-background) but has the unfortunate side effect of inverting photographs and videos.
The <video> case seems relatively straightforward to resolve in UASS:
@media (inverted-colors) {
video { filter: invert(100%); } /* Poster and playback views double-inverted. */
video::-webkit-media-controls { filter: invert(100%); } /* Triple-inverted: don't invert the buttons. */
}
But the <img> case needs a little more thought. Here are some pros and cons of possible heuristic solutions. For brevity, I'm only using the <img> selectors, but we'd need to duplicate selectors for the <picture> element.
/* 1. Invert all images. Con: Too many false positives for non-photo images (GIFs of text, decorative images, etc.) */
@media (inverted-colors) { img { filter: invert(100%); } }
/* 2. Invert all images except GIFs. Con: Too many false negatives, but probably okay as a start, as @alt usually indicates "foreground" image. */
@media (inverted-colors) {
img { filter: invert(100%); }
img:not([alt=""]) { filter: invert(0%); } /* Avoid inverting images without @alt. Con: Author override needs to be very explicit. */
}
/* 3. Invert all images except GIFs. Con: Too many false positives with PNGs of text. */
@media (inverted-colors) {
img { filter: invert(100%); }
img:not([src$=".gif"]) { filter: invert(0%); } /* Avoid inverting GIFs. */
}
/* 4. Invert only JPEGs. Pro: Most safe. Con: Possibly too many false negatives since we never know with PNGs. */
@media (inverted-colors) {
img[src$=".jpg"], img[src$=".jpeg"] { filter: invert(100%); }
}</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>