There has been a trend to reduce the color contrast of text on the web. As screens have improved, designers have started using lighter typefaces and lower contrast ratios. But, as more people use devices in outdoor environments where screens aren’t as clear to look at, there is a need for text to be be better legible for everyone. The physical screen and the context it is used in should be considered when picking colors.
Color contrast explained
The baseline typography and colors should work for most users regardless of their eyesight. Contrast ratios between two colors are:
1:1 when the background and text are the same color
21:1 when its black text on a white background
4.5:1 is the minimum ratio for clear type
7:1 is the recommended contrast to aid those with impaired vision
Note that the recommendations are minimums and shouldn’t be treated as starting points.
Philip added the initial support and with a few adjustments to the Customizer we added the ‘Allow the operating system’s dark mode to override my color settings‘ checkbox. I didn’t want to force this change on every site because it would break the colors that people have picked for their page and headers. But if you do select it, the site changes colors based on the operating system’s setting:
More recently, I was able to complete my laundry list of accessibility improvements including:
Adding aria markers where needed
Making sure all HTML was semantic
Improving keyboard navigation
You can get all these changes in version 1.4.0 from Github, or the latest from the themes repository. I have also requested another round of review from the WordPress theme review team so that I can officially add the accessibility-ready tag, but, I am not sure what the process here is. Hoping someone picks it up soon 🤞🏽