🔖 How the Web Became Unreadable (archive) by Kevin Marks

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.

Dark mode & accessibility improvements in Zuari

This update has been a long time coming. I had added a ticket to support dark mode almost a year ago when I first came across the Webkit support blog post. The code sample was straightforward:

@media (prefers-color-scheme: dark) {
    :root {
        --special-text-color: hsla(60, 50%, 70%, 0.75);
        --border-color: white;

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:

Notice the increased line-height in the dark mode to improve readability

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 🤞🏽