The joy of a new site
I’ve been craving to do some design work, and I was sick of paying what was $168 a year for my squarespace site at the time, so I decided to design and build my website from scratch – without using AI, which is crazy that I even want to mention this. I learnt a couple cool things in process that I’ll share in a few posts, so here’s how the colour system works…
I knew I wanted the site to be as accessible as possible, so in Sketch I defined a foreground and background colour styles and implemented them in code as custom CSS properties in order to swap these out in order to support dark-mode. These have a miniscule amount of saturation of a yellowy-orange hue in order to warm up the gray a little:
I’ve referenced these custom properies here directly because I’m not collaborating on the design with anyone else. If I were working with someone else, I’d want these to be more expressive.
To do this you can define more semantic variables which encapsulate the context in which they are used, called “choice” tokens, something like
--color-text: var(--color-fg) and
--color-background: var(--color-bg). Read more about the difference between option and choice tokens in this fantastic article by Nathan Curtis.
Instead of displaying a button to toggle to color scheme, I decided to listen to the user’s preferences given by their operating system using the
prefers-color-scheme media query:
You can test this in your browser’s developer tools, here’s how to do it in Safari and Chrome. Note that in Chrome you need to navigate to the Rendering settings in Settings -> More Tools -> Rendering.
As I designed the rest of the site I found the need for foreground colours of varying contrast with the background for things like the date, icons, and other strokes like borders and the decorative lines behind my profile in the footer. I also defined another two background colours, one specifically for the custom 404 and 500 error pages which have a slight redish-pink hue, and one that is even more contrasty with the foreground, and I use it to create a sense of depth in code blocks and as the background for the photo album gallery for the photo posts.
Here’s the complete list:
Furthermore, while transferring some posts from the old site which only had a light mode I had a few PNG images that had dark text on a transparent background, this didn’t look too good in dark-mode so I created a utility to invert the image colours – luckily they were simple black and white images so this worked well, if they had colour it probably would have just looked weird.
High contrast mode
I was reminded of my mom who uses her iPhone with a larger text size and it got me thinking if I could make a few small CSS changes using the
prefers-contrast media query to make the site more readable for people that need it.
Windows has had a high contrast mode for a long time but to my understanding it uses the
forced-colors media query to swap colours in the UI for a specific set to achieve an extremely high contrast. I also learnt you can actually configure these colours as a user, and might end up with a UI that actually has less contrast in this case. You might have encountered this mode by having to set a transparent border on your borderless buttons for them to have a visible border when this mode is on.
Is the use of
forced-colors to achieve super high contrast actually a hack? I’m not sure.
Since I had somewhat of a colour system in place, I needed 2 more sets of colour: one for light-mode with increased contrast, and another set for dark-mode with increased contrast.
I also realised I could increase the font-weight of the text slightly to improve the contrast. My designer friends would be happy that I recognise contrast is not only about the difference in colour 😄.
Using CSS media queries and custom properties, you can easily create a system that supports a dark mode and a high-contrast mode, both of which can be activated automatically based on the user’s operating system preferences.
By paying attention to the details and incorporating feedback, we can continue to improve the accessibility of our websites and make them more inclusive for everyone.
I’m sure my site requires a lot more by way of accessibility. Do you have a suggestion on how it can be improved? I’d love to hear from you.
Questions? I’d be humbled and happy to help.