Differences

This shows you the differences between two versions of the page.

--- accessibility:common_issues:color [2024/01/18 12:52] – forced colors mode scl
+++ accessibility:common_issues:color [2024/04/18 14:07] (current) – [Windows High Contrast Mode and Forced Colors Mode] sleary
@@ Line 15: / Line 15: @@
 For links, this means that there must be some kind of text decoration, preferably an underline, in addition to a color that has sufficient contrast with the surrounding text.
-In maps and charts, neighboring regions need to be distinguished by something other than color. Using [[https://twitter.com/steveschoger/status/1112731452704202752|one hue at different shades of lightness]] is one solution. The [[https://visa.github.io/visa-chart-components/?path=/story/introduction--page|Visa Chart Components]] library uses subtle background patterns in addition to color gradients.
+In maps and charts, neighboring regions need to be distinguished by something other than color. Using [[https://twitter.com/steveschoger/status/1112731452704202752|one hue at different shades of lightness]] is one solution. The [[https://visa.github.io/visa-chart-components/?path=/story/introduction--page|Visa Chart Components]] library uses subtle background patterns in addition to color gradients. [[https://www.barrierbreak.com/decoding-wcag-1-4-11-non-text-contrast-part-2/#chart_images|Adding high-contrast text labels to pie chart slices]] is also a good solution to adjacent colors that don't have enough contrast with each other.
 ===== Borders and background colors =====
@@ Line 31: / Line 30: @@
   * borders, focus outlines, and text decoration (link underlines)
   * scrollbar colors
-  * SVG fill color
+  * SVG fill and stroke color
+See [[https://www.w3.org/TR/css-color-adjust-1/#forced-colors-mode|the W3C specs for details on the affected properties]]. Other properties affecting color, like box-shadow and text-shadow, are removed entirely.
+Some Bootstrap styles used in Evergreen may need to be adjusted for forced colors mode. For example, Bootstrap's focus highlight style uses a box-shadow instead of an outline. This doesn't work well in forced colors mode, where box-shadows are turned off. The suggested solution is to add a transparent border to the focus style. The border will be changed to the user's preferred border color in forced color modes. There may be other cases where transparent borders should be removed in forced colors mode in order to preserve our intended styling.
-See [[https://www.w3.org/TR/css-color-adjust-1/#forced-colors-mode|the W3C specs for details on the affected properties]]. Most other properties affecting color are removed entirely.
+See [[https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/|Microsoft's article on styling High Contrast Mode]] for examples, including the exact media queries you can use to target specific modes.
-Some Bootstrap styles used in Evergreen may need to be adjusted for forced colors mode. For example, Bootstrap's focus highlight style uses a box-shadow instead of an outline. This doesn't work well in forced colors mode, where box-shadows are turned off. The suggested solution is to add a transparent border to the focus style. The border will be changed to the user's preferred border color in forced color modes. See [[https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/#gist105426765|Microsoft's article on styling High Contrast Mode for examples]].
+==== Testing Forced Colors / High Contrast ====
-There may be other cases where transparent borders should be removed in forced colors mode in order to preserve our intended styling.
+You can turn on forced colors mode in your operating system's preferences, but this is often quite jarring. You can use a browser extension instead to emulate the operating system's mode, but only for websites. Note that it will affect all the sites you visit until you turn the extension off.
+  * [[https://chromewebstore.google.com/detail/high-contrast/djcfdncoelnlbldjfhinnjlhdjlikmph?pli=1|Firefox High Contrast Toggle extension]]
+  * [[https://chromewebstore.google.com/detail/high-contrast/djcfdncoelnlbldjfhinnjlhdjlikmph?pli=1|Chrome High Contrast extension]]
 ===== Color in OPAC Branding =====