accessibility:common_issues:color
Differences
This shows you the differences between two versions of the page.
Next revision | Previous revision | ||
accessibility:common_issues:color [2023/07/10 16:33] – created 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. | ||
Line 7: | Line 9: | ||
Link colors have an additional contrast requirement: | Link colors have an additional contrast requirement: | ||
- | 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. | + | ===== 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. | ||
+ | |||
+ | ===== 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:// | ||
+ | |||
+ | Some Bootstrap styles used in Evergreen may need to be adjusted for forced colors mode. For example, Bootstrap' | ||
+ | |||
+ | See [[https:// | ||
+ | |||
+ | ==== Testing Forced Colors / High Contrast ==== | ||
- | In maps and charts, neighboring regions need to be distinguished by something other than color. Using [[https:// | + | 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.1689021202.txt.gz · Last modified: 2023/07/10 16:33 by scl