Implements prefers-contrast media query

[GBKS]

This allows users to enable increased contrast in the accessibility settings of their operating system, and see that reflected in the website.

🍗Check the preview🌽

This is also a proof-of-concept for implementing this using CSS variables. It requires replacing $ variables (like $primary-color) with CSS variables (var(--primary-color), and using hsl to calculate darker colors on the fly. Benefit is that the CSS variables can dynamically change at runtime (not just during build time). This more dynamic system allows for the prefers-contrast color change to only require 8 lines of code. This needs some testing to ensure it all works cross-browser.

The high contrast orange color (a darker version of the regular one) was chosen via this site to get a passing score at 18px font size for both orange-on-white and white-on-orange. I did not touch any grays or other colors in this PR yet.

Regular view:

With increased contrast enabled (via the OS):

And here's the toggle to switch in the MacOS accessibility settings:

You may wonder why the primary color is defined as hex, RGB, and HSL. Reason is that different CSS color functions require different formats (rgba() wants rgb, hsl() needs hsl values).

This may address our unresolved conversation in #831.

[netlify[bot]]

✅ Deploy Preview for bitcoin-design-site ready!

Name	Link
🔨 Latest commit	04cfd71993bb3dc044aa5a6f7f4dff5d356f1b6b
🔍 Latest deploy log	https://app.netlify.com/sites/bitcoin-design-site/deploys/6502afed8ca12e0008ad5b23
😎 Deploy Preview	https://deploy-preview-1015--bitcoin-design-site.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[GBKS]

@sbddesign what do you make of this solution for improving text contrast?

[rabbitholiness]

It's weird. I don't really see the difference if I increase the contrast settings in macOS. Maybe I'm doing something wrong. Default contrast:

Increased contrast:

[GBKS]

@rabbitholiness weird. Does the rest of the operating system change visually and it's just the website that doesn't? Which browser do you use?

[mouxdesign]

Tested on a Windows computer with windows 11. Browsers used were: Microsoft Edge and Google chrome.

Typed in contrast and the it seems that there is a built in contrast mode on the pc which allows 4 options.

Screenshots attached. All the contrast settings seem to hide the buttons.

But the buttons on the main header are shown in the contrast mode.

[GBKS]

@sbddesign thanks for the thorough review. No clue how I messed up that color value, I was 100% sure I had it inline with the APCA values. I changed it to the one you recommended.

@mouxdesign the Windows contrast modes are something separate. Generally, operating systems let you express that you prefer more contrast, and then websites and applications can implement that in a way that works best with their unique design. Windows also offers these modes that are really just custom themes. Those override the style of the website at will, and there's nothing we can really do to make those work - it's up to Microsoft to make sure those look good.

A small follow-up to this PR could be to make links underlined in high-contrast mode. The dark orange is so dark that it becomes harder to distinguish from the normal text color. Link underlines would provide another visual cue. But I'd really like to get this PR merged, so don't want to squeeze it in.