Why are hyperlinks blue?
A wonderful bit of spelunking into the annals of software interfaces by Elise Blanchard.
Link tags: colour
78
Add support for defining a theme color for both light & dark modes (prefers color scheme)
There’s a good discussion here (kicked off by Jen) about providing different theme-color values in a web app manifest to match prefers-color-scheme in media queries.
Found Color schemes for web and UI
Accidental colour palettes captured in the wild.
Building Dark Mode | Product Blog • Sentry
Robin makes a good point here about using dark mode thinking as a way to uncover any assumptions you might have unwittingly baked into your design:
Given its recent popularity, you might believe dark mode is a fad. But from a design perspective, dark mode is exceptionally useful. That’s because a big part of design is about building relationships between colors. And so implementing dark mode essentially forced everyone on the team to think long, hard, and consistently about our front-end design components. In short, dark mode helped our design system not only look good, but make sense.
So even if you don’t actually implement dark mode, acting as though it’s there will give you a solid base to build in.
I did something similar with the back end of Huffduffer and The Session—from day one, I built them as though the interface would be available in multiple languages. I never implemented multi-language support, but just the awareness of it saved me from baking in any shortcuts or assumptions, and enforced a good model/view/controller separation.
For most front-end codebases, the design of your color system shows you where your radioactive styles are. It shows you how things are tied together, and what depends on what.
CSS Stats
A handy tool for getting an overview of your site’s CSS:
CSS Stats provides analytics and visualizations for your stylesheets. This information can be used to improve consistency in your design, track performance of your app, and diagnose complex areas before it snowballs out of control.
Top 5 things to review in an Accessible Design Review - Hassell Inclusion
Considering how much accessibility work happens “under the hood”, it’s interesting that all five of these considerations are visibly testable.
- Think about accessible copy
- Don’t forget about the focus indicator
- Check your colour contrast
- Don’t just use colour to convey meaning
- Design in anticipation of text resizing
Sass Color Functions in CSS | Jim Nielsen’s Weblog
I’m not the only one swapping out Sass with CSS for colour functions:
Because of the declarative nature of CSS, you’re never going to get something as terse as what you could get in Sass. So sure, you’re typing more characters. But you know what you’re not doing? Wrangling build plugins and updating dependencies to get Sass to build. What you write gets shipped directly to the browser and works as-is, now and for eternity. It’s hard to say that about your Sass code.
Better Image Optimization by Restricting the Color Index – Eric’s Archived Thoughts
A great little mini case-study from Eric—if you’re exporting transparent PNGs from a graphic design tool, double-check the colour-depth settings!
I’d been saving the PNGs with no bit depth restrictions, meaning the color table was holding space for 224 colors. That’s… a lot of colors, roughly 224 of which I wasn’t actually using.
Limiting input type=”color” to a certain palette (from an image) | Christian Heilmann
I never thought of combining the datalist element with input type="color"—it’s pretty cool that it just works!
A Web Developers New Working Week
I think these are great habit-forming ideas for any web designer or developer: a day without using your mouse; a day with your display set to grayscale; a day spent using a different web browser; a day with your internet connection throttled. I’m going to try these!
Online Color Picker From Image - Pick your color
A nice standalone tool for picking colours out of photos, and generating a colour palette from the same photo.
5 Keys to Accessible Web Typography | Better Web Type
Some excellent explanations for these five pieces of sensible typography advice:
- Set your base font size in relative units
- Check the colour of your type and only then its contrast
- Use highly legible fonts
- Shape your paragraphs well
- Correctly use the heading levels
The Guardian digital design style guide
What a lovely way to walk through the design system underpinning the Guardian website.
Bonus points for using the term “tweak points”!
Night Mode with Mix Blend Mode: Difference
Here’s a clever shortcut to creating a dark mode by using mix-blend-mode: difference.
Accessible Color Generator – Learn UI Design
This looks like a really useful tool for generating accessibile colour combinations from a starting colour.
Unraveling The JPEG
A deep, deep, deep dive into the JPEG format. Best of all, it’s got interactive explanations you can tinker with, a la Nicky Case or Bret Victor.
Word Bubbles — The Man in Blue
Wheeee! Another fun experiment from Cameron.
The Many Ways to Change an SVG Fill on Hover (and When to Use Them) | CSS-Tricks
This article by Cassie is so, so good!
First off, there’s the actual practical content on how to change the hover styles of SVGs that aren’t embedded. Then there’s the really clear walkthrough she give, making some quite complex topics very understandable. Finally, there’s the fact that she made tool to illustrate the point!
Best of all, I get to work with the super-smart developer who did all this.
Owltastic • Web design by Meagan Fisher Couldwell
My goodness, Meagan’s new site design is absolutely gorgeous! The colour palette, the typography, the texture, the motion design …it all communicates character and personality. Beautiful work!