Practical Styling in Forced Colors Mode

Forced colors is when assistive technology actively changes your website’s colors to accommodate people with limited vision. The most common technology that uses this is Windows high contrast mode, which according to Microsoft, is used by 4% of Windows users worldwide.

Within Drupal 10, we’re creating two new themes that, because of Drupal’s stringent accessibility requirements, need to work perfectly with forced colors mode. During this process, I learned that developing for forced colors mode can be a bit complicated, but there are some concepts and techniques that, once learned, make styling in forced colors much more straightforward.

Within this session, I’ll walk attendees through

• How forced colors works, and how to style them
• Several accessibility violations that frequently occur in forced colors
• CSS techniques to fix these issues
• How to properly test forced colors mode

To get the most out of this session, you need to be a little bit familiar with CSS