Imperfect

contrast beyond modes

Inspired by:

  1. David's Dark web sites
  2. David's Down with Darkmode
  3. -b's Dark mode

Whether you prefer your websites bright, dark, or otherwise, proper color contrast between elements mostly improves your browsing experience. While valid reasons like expression and taste create purposeful exceptions, we can strive for sufficient contrast. Think about how creatives strive for sufficient audio quality as a fundamental building block for their videos, livestreams, and podcasts. Let your visitors understand and discern between onsite items. May they enjoy their onsite experience that much more.

I'm one of those "cool kids who think dark mode is the thing" to where even my agave theme for bear blog defaults to dark mode. However, what can be done for people who prefer light mode like David? I use the prefers-color-scheme CSS media feature to offer light mode to visitors whom defined that browser preference. As far as contrast levels go, the agave theme details explain how colors for both modes comply with web accessibility standards. Having tried to de-escalate the light brigade in the past, I get how difficult or tedious mode preferences can be to implement. When it's feasible, I might as well offer them myself.

Whether you offer color schemes or not, don't finish a markup editing session without ensuring your website and its schemes employ sufficient contrast. Save yourself from the firsthand embarrassment of people emailing you that your website is nearly unreadable in the mode you don't use.

If you prefer to color websites as you desire, certain desktop solutions may help you more than the above. Note that these options remain too innocuous or require too much maintenance for my taste.

Reader View browser features let you change text, layout, and theme properties for any compatible web page. Click on the button with the paper icon on the right side of your address bar to activate it. If your eyes can't read a post or burn upon looking at the page, tweak the settings to your satisfaction.

Thanks to this discourse, I found that Firefox rolled out a feature called Contrast Control. It can filter all websites through basic colors to maximize contrast and color preferences for text, backgrounds, and links. It might serve you well if you have visual impairments, frequent simple websites, or have one scheme you want to use everywhere.

Third-party extensions address similar use cases. High Contrast seems like a good Chrome counterpart for accessibility purposes. Color scheme pickers like Midnight Lizard offer more presets, finer customization, and even scheduling. Stylus lets you create or install themes and skins to restyle how websites look.

If your tech stack supports it, you can go the Localghost route of offering multiple themes with unique color schemes. Offering choice this way can show how inclusivity can go beyond accessibility and into personality. That said, similar conditions like purposefully unresponsive personal websites don't seem to raise as many issues. Who am I to coerce another designer into making their website fit my desired form factor? Could the same conundrum apply to theming?

Who gets the last call when it comes to the contrast on your website: you, your visitors, or both in tandem?

What other techniques afford those options?

Want to reach out? Connect with me however you prefer: