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 WebAIM Contrast Checker, Graphical Objects and User Interface Components). Note that disabled items and logo images are exempt from color contrast requirements.

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: they must be easily distinguished from the surrounding text. Test link colors using the WebAIM Link Contrast Checker to make sure your proposed link color has sufficient contrast with the body text color as well as the page background.

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 one hue at different shades of lightness is one solution. The Visa Chart Components library uses subtle background patterns in addition to color gradients. 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.

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 "High-Alert Colors" in Beyond WCAG: Losing Spoons Online).

Windows High Contrast Mode and Forced Colors Mode are color modes set in the operating system preferences. While they are often used for dark modes or stark black/white color schemes, they allow users to specify any colors, which may result in a palette with less contrast than the default OS styles.

In forced colors mode, the following styles will reflect the user's preferences rather than the app stylesheet's:

• text and link color
• background color
• borders, focus outlines, and text decoration (link underlines)
• scrollbar colors
• SVG fill and stroke color

See 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 Microsoft's article on styling High Contrast Mode for examples, including the exact media queries you can use to target specific modes.

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.

• Firefox High Contrast Toggle extension
• Chrome High Contrast extension

In addition to basic color contrast requirements, your OPAC design should avoid using bright red, orange, or yellow as background colors for large areas of the screen. In Beyond WCAG: Losing Spoons Online, Lē McNamara describes panic attacks triggered by high alert colors (red, orange, and yellow), which are so distressing to people affected by sensory disorders that the article’s examples are hidden in disclosures.

Guidance about these colors will be included in the next major version of WCAG, but we should begin to evaluate our use of them now, and avoid using bright red, orange, or yellow as background colors.