Managing Multiple Color Themes

It’s becoming a popular trend in web development to provide a variety of theming options and allow users to select the one that they like best. Many applications and websites now include light and dark themes, but some even go beyond that to offer all sorts of color palettes! Offering multiple themes isn’t just a delightful touch for your users. It can also be an accessibility tool for them. However, this is only the case if we have worked to ensure that each theme was created with accessibility as a priority.

Every theme must be accessible

Alternate color themes (and other nonstandard application states) are often forgotten during accessibility checks. This is a common mistake that can have frustrating consequences for our users. Can we guarantee that our text color contrast is still good enough or that our focus highlight is still clearly visible when we’re using the website or application in dark mode? It’s not enough to only be accessible in the default theme! If we’re offering multiple color themes, but only one of them is accessible, then we are restricting a whole feature set to only our non-disabled users. That is most definitely not what we want.

In addition to meeting basic requirements, there are a few additional ways in which we can go above and beyond to make our theming as accessible as possible.

Avoid adapting existing themes

If we choose to include multiple themes in our ...