A primer on accessible colour contrast with links to some handy tools for testing.
Go deep, deep down the rabbit hole of Rob’s brain in all its colourful glory. Seriously, this is simultaneously a great write-up of how he came up with his site’s lovely colour scheme(s), and it’s a terrific primer on colour theory and why the HSL value in CSS is so, so wonderful!
Suggestions for small interface tweaks.
A nice clear explanation of specifying colour using HSB (not to be confused with HSL).
Liberally licensed SVG illustrations by Katerina Limpitsouni with customisable colour schemes.
Great advice on keeping your hyperlinks accessible.
18F: Digital service delivery | Building a large-scale design system: How we created a design system for the U.S. government
Maya Benari provides an in-depth walkthrough of 18F’s mission to create a consistent design system for many, many different government sites.
When building out a large-scale design system, it can be hard to know where to start. By focusing on the basics, from core styles to coding conventions to design principles, you can create a strong foundation that spreads to different parts of your team.
There’s an interface inventory, then mood boards, then the work starts on typography and colour, then white space, and finally the grid system.
The lessons learned make for good design principles:
- Talk to the people
- Look for duplication of efforts
- Know your values
- Empower your team
- Start small and iterate
- Don’t work in a vacuum
- Reuse and specialize
- Promote your system
- Be flexible
This is a really intriguing book that combines design theory and programming—learn about contrast, colour, and shapes, with each lesson supported by code examples.
It’s still a work in progress but the whole thing is online for free. Yay for web books!
A plug-in for Sketch that allows you to simulate colour blindnesses and check colour contrasts.
I only just wrapped my head around the idea of variable fonts and now here’s colour fonts to really mess with my mind.
The accompanying video lists the design principles:
- Elevate our status
- Surprise & inspire
- Change perceptions
- Do good things
- Be unmistakably Wales
Kevin writes a plea on Ev’s blog for better contrast in web typography:
When you build a site and ignore what happens afterwards — when the values entered in code are translated into brightness and contrast depending on the settings of a physical screen — you’re avoiding the experience that you create. And when you design in perfect settings, with big, contrast-rich monitors, you blind yourself to users. To arbitrarily throw away contrast based on a fashion that “looks good on my perfect screen in my perfectly lit office” is abdicating designers’ responsibilities to the very people for whom they are designing.
A handy Chrome extension to simulate different kinds of visual impairment.
A nice tool for choosing colour palettes that look good and are also accessible.
Here, have some colour palettes.
This is quite beautiful in its simplicity: the hexadecimal colour value of the current time.
A cute and fun way to put together a colour palette.
Gorgeous colour-processed images from NASA probes. I could stare at the fountains of Enceladus all day.