This post seeks to define an accessible set of dark theme colors to be used in content creation. Please comment with your thoughts by Friday 18 November 2022.
Sometimes during an online workshop or recorded tutorial on the Site Editor, choosing a different set of theme colors in the Global Styles interface is required to showcase some functionality.
The content creator might want to use colors that are not already in use in other themes or default theme Global Styles variations for various reasons, such as wanting to use a specific set of colors to show how changes are saved to Global Styles in the database or copied/written to the theme.json file in the theme.
To ensure that the colors selected are viewable on all screens, it’s important that these colors are contrasting enough so that they are accessible to everyone.
My first attempt at finding dark colors that meet accessibility guidelines was made by digging into Google’s Material Design, specifically the dark theme guidelines. From that document I extracted the following colors:
The background color could be used for the theme background, and the primary and secondary colors could be used alternatively for text or links.
These colors were applied in a recent block theme tutorial video I created. During the review of that tutorial, it was raised that the color contrast in the dark theme example is very low and makes the text very hard to read.
As I am not a color contrast expert, I’d like to take this opportunity to iterate on the colors as laid out above and choose better primary and secondary colors for a dark theme that are more accessible and easier to read for online workshops and tutorials. We can then add these colors to the Training Team handbook, to be used whenever an alternative color scheme is required.
Let’s define high-contrast, accessible, dark theme colors together! What dark theme color palettes would be the most accessible? What have you seen that’s worked well? What should we avoid? Share your thoughts below and we will consolidate them into actionable suggestions by Friday 18 November 2022 to be added to the training team handbook for content creation.