[css-color-adjust-1] Add forced-colors mode, based on MSFT “high contrast” mode described in https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/master/HighContrast/explainer.md and discussion in #3807

Author: fantasai

css-color-adjust-1/Overview.bs

@@ -49,7 +49,7 @@ Preferred Color Schemes {#preferred}
 	To enable pages to adapt to the user's preferred color scheme,
 	user agents will match the '@media/prefers-color-scheme' media query
 	to the user's preferred color scheme.
-	See [[MEDIAQUERIES-5]].
+	<!-- See [[MEDIAQUERIES-5]]. -->
 
 	Additionally, if the author has indicated that the page can support this color scheme
 	(see 'color-scheme'),
@@ -75,8 +75,8 @@ Preferred Color Schemes {#preferred}
 	more invasive changes might be applied;
 	see [[#forced]].
 
-Opting Out of a Preferred Color Scheme: the 'color-scheme' property {#color-scheme-prop}
--------------------------------------------------------------------
+Opting Into a Preferred Color Scheme: the 'color-scheme' property {#color-scheme-prop}
+-----------------------------------------------------------------
 
 	<pre class=propdef>
 	Name: color-scheme
@@ -219,6 +219,92 @@ The "color-scheme" <{meta}> value {#color-scheme-meta}
 Forced Color Schemes: the 'forced-color-adjust' property {#forced}
 ====================
 
+	<dfn>Forced colors mode</dfn> is an accessibility feature
+	intended to increase the readability of text through color contrast.
+	Individuals with limited vision
+	often find it more comfortable to read content
+	when there is a a particular type of contrast
+	between foreground and background colors.
+
+	Operating systems can provide built-in color themes,
+	such as Windows’ high contrast black-on-white
+	and high-contrast white-on-black themes.
+	Users can also customize their own themes,
+	for example to provide low contrast or hue contrast.
+
+	In <a>forced colors mode</a>,
+	the user agent enforces the user’s preferred color palette on the page,
+	overriding the author’s chosen colors for specific properties,
+	see [[#forced-colors-properties]].
+	It may also enforce a “backplate” underneath text
+	(similar to the way backgrounds are painted on the ''::selection'' pseudo-element)
+	to ensure adequate contrast for readability.
+
+	To enable pages to adapt to <a>forced colors mode</a>
+	user agents will match the '@media/forced-colors' media query
+	<!-- (see [[MEDIAQUERIES-5]]) -->
+	and must provide the required color palette
+	through the CSS system colors
+	(see [[CSS-COLOR-4]]).
+	Additionally,
+	if the UA determines (based on Lab lightness),
+	that the canvas color
+	is clearly either dark or light
+	(for some reasonable UA delineation of “dark” or “light”),
+	then it must match the appropriate value
+	of the '@media/prefers-color-scheme' media query
+	and express a corresponding user preference for 'color-scheme'.
+	This will allow pages that support light/dark color schemes
+	to automatically adjust to more closely match
+	the forced color scheme.
+	Note that medium-lightness forced backgrounds may yield
+	a '@media/prefers-color-scheme' of ''prefers-color-scheme/no-preference''.
+
+<!--THOUGHTS
+	This advice (below) maybe makes sense for (prefers-contrast),
+	but is it really applicable to forced-colors as well?
+	If so, should forced-colors be instead a 'forced' value on 'prefers-contrast',
+	so that a (prefers-contrast) query will catch all of these cases at once?
+
+	Authors are encouraged to simplify the contrast in their pages
+	when '@media/forced-colors' is ''active'',
+	reducing effects such as shadows, fades, blurs, filters, gradients,
+	and image or pattern fills
+	that add complexity to discerning shape outlin
+-->
+
+Properties Affected by Forced Colors Mode {#forced-colors-properties}
+-----------------------------------------
+
+	When  <a>forced colors mode</a> is active
+	and 'forced-color-adjust' is ''forced-color-adjust/auto'' (see below),
+	the following <a>user origin</a> declarations [[!CSS-CASCADE-4]]
+	are applied to the element:
+
+	<pre>
+		color: revert !important;
+		background-color: revert !important;
+		border-color: revert !important;
+		outline-color: revert !important
+		column-rule-color: revert !important;
+		scrollbar-colors: revert !important;
+		-webkit-tap-highlight-color: revert !important; /* ISSUE: This is not in a spec anywhere! */
+
+		box-shadow: none !important;
+		text-shadow: none !important;
+	</pre>
+
+	Additionally, on <em>on user input controls (except button-like controls) only</em>:
+	<pre>
+		background-image: none !important;
+	</pre>
+
+	UA may further tweak these <a>forced colors mode</a> heuristics
+	to provide better user experience.
+
+Opting Out of a Forced Color Scheme: the 'forced-color-adjust' property {#forced-color-adjust-prop}
+-----------------------------------------------------------------
+
 	<pre class=propdef>
 	Name: forced-color-adjust
 	Value: auto | none
@@ -227,6 +313,30 @@ Forced Color Schemes: the 'forced-color-adjust' property {#forced}
 	Inherited: yes
 	</pre>
 
+	The 'forced-color-adjust' property
+	allows authors to opt particular elements
+	out of <a>forced colors mode</a>,
+	restoring full control over the colors to CSS.
+	Values have the following meanings:
+
+	<dl dfn-type=value dfn-for=forced-color-adjust>
+		: <dfn>auto</dfn>
+		:: The element’s colors are automatically adjusted by the UA
+			in <a>forced colors mode</a>.
+
+		: <dfn>none</dfn>
+		:: The element’s colors are not automatically adjusted by the UA
+			in <a>forced colors mode</a>.
+
+			Advisement: Authors should only use this value
+			when they are themselves adjusting the colors
+			to support the user’s color and contrast needs
+			and need to make changes to the UA’s default adjustments
+			to provide a more appropriate user experience
+			for those elements.
+	</dl>
+
+	ISSUE: Should this property be merged with 'color-adjust' somehow?
 
 Performance-based Color Schemes: the 'color-adjust' property {#perf}
 ===============================
@@ -302,3 +412,18 @@ Performance-based Color Schemes: the 'color-adjust' property {#perf}
 			would make the directions harder to read with a quick glance
 			when distracted in a car.
 	</dl>
+
+Acknowledgements {#acknowledgements}
+================
+
+	This specification would not be possible
+	without the development efforts
+	of various color adjustment features
+	at Apple, Google, and Microsoft
+	as well as discussions about print adjustments on www-style.
+	In particular, the CSS Working Group would like to thank:
+	Alison Maher,
+	François Remy,
+	イアンフェッティ
+
+	ISSUE: List additional MSFT / Apple / Google people here.