Differences

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

--- accessibility:common_issues:color [2024/01/18 13:02] – 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 39: / Line 38: @@
 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.
+==== Testing Forced Colors / High Contrast ====
+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 =====