accessibility:common_issues:color
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
accessibility:common_issues:color [2023/11/30 11:51] – [Colors] high-alert colors link scl | accessibility:common_issues:color [2024/04/18 14:07] (current) – [Windows High Contrast Mode and Forced Colors Mode] sleary | ||
---|---|---|---|
Line 1: | Line 1: | ||
====== Colors ====== | ====== Colors ====== | ||
- | Insufficient color contrast is another | + | ===== Color contrast ===== |
+ | |||
+ | Insufficient color contrast is one of the most common accessibility problems. Text and interactive elements should have a color contrast ratio of at least 4.5:1. Non-interactive objects should have a contrast ratio of 3:1 (Use the _third _test in the [[https:// | ||
This requirement for low-vision users is sometimes in direct contradiction to the needs of people with cognitive disorders and sensory processing issues, who need lower contrasts and less bright colors. | This requirement for low-vision users is sometimes in direct contradiction to the needs of people with cognitive disorders and sensory processing issues, who need lower contrasts and less bright colors. | ||
Link colors have an additional contrast requirement: | Link colors have an additional contrast requirement: | ||
+ | |||
+ | ===== Distinguishing elements using color ===== | ||
+ | |||
+ | Color cannot be the only thing that conveys meaning. For example, items that have a different status must have some distinguishing feature in addition to their color--an icon, a text label, or a different border would all work, as long as people with color blindness can tell the difference. | ||
+ | |||
+ | 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:// | ||
+ | ===== Borders and background colors ===== | ||
For some people with autism, ADHD, dyslexia, or other sensory processing issues, designs that feature dense information with high-contrast borders and brightly colored buttons may trigger discomfort or even panic attacks. Unlike people with low vision, this group may want to reduce color contrast. The use of red, orange, and yellow background colors in large blocks can cause problems for some people in this group (see " | For some people with autism, ADHD, dyslexia, or other sensory processing issues, designs that feature dense information with high-contrast borders and brightly colored buttons may trigger discomfort or even panic attacks. Unlike people with low vision, this group may want to reduce color contrast. The use of red, orange, and yellow background colors in large blocks can cause problems for some people in this group (see " | ||
- | 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 | + | ===== Windows High Contrast Mode and Forced Colors Mode ===== |
+ | |||
+ | [[https:// | ||
+ | |||
+ | In forced colors mode, the following styles will reflect the user's preferences rather than the app stylesheet' | ||
+ | |||
+ | * text and link color | ||
+ | * background color | ||
+ | * borders, focus outlines, and text decoration (link underlines) | ||
+ | * scrollbar colors | ||
+ | * SVG fill and stroke color | ||
+ | |||
+ | See [[https://www.w3.org/TR/css-color-adjust-1/# | ||
+ | |||
+ | Some Bootstrap styles used in Evergreen may need to be adjusted for forced colors mode. For example, Bootstrap' | ||
+ | |||
+ | See [[https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/ | ||
+ | |||
+ | ==== Testing Forced Colors / High Contrast ==== | ||
+ | |||
+ | You can turn on forced colors mode in your operating system' | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
===== Color in OPAC Branding ===== | ===== Color in OPAC Branding ===== | ||
accessibility/common_issues/color.1701363083.txt.gz · Last modified: 2023/11/30 11:51 by scl