Don’t judge a book by its cover
Some neat CSS from Tess that’s a great example of progressive enhancement; these book covers look good in all browsers, but they look even better in some.
Link tags: contrast
24
How to create a typographic hierarchy – Pangram Pangram Foundry
- Start with the text
- Use size intentionally
- Contrast weights and styles
- Play with spacing
- Use colour, but don’t rely on it
- Limit your font choices (but choose well and wisely)
- Repeat, repeat, repeat
- Test your system
Randoma11y - Accessible color combinations
Unusual colour combinations that are also accessible—keep smashing that “New colors” button.
Color and Contrast.com
A lovely website (or web book?) dedicated entirely to colour contrast, complete with interactive illustrative widgets.
A comprehensive guide for exploring and learning about the theory, science, and perception of color and contrast.
Dark Mode Toggles Should be a Browser Feature – Bram.us
This is a thoughtful proposal for a browser feature from Bram. Very convincing!
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
Dark mode and variable fonts | CSS-Tricks
This is such a clever use of variable fonts!
We can use a lighter font weight to make the text easier to read whenever dark mode is active.
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
Accessible Color Generator – Learn UI Design
This looks like a really useful tool for generating accessibile colour combinations from a starting colour.
Redesigning your product and website for dark mode — Stuff & Nonsense
Some advice from Andy on creating a dark theme for your website. It’s not just about the colours—there are typography implications too.
‘Never assume anything’: The golden rules for inclusive design
Inclusive design is also future-proofing technology for everyone. Swan noted that many more developers and designers are considering accessibility issues as they age and encounter poor eyesight or other impairments.
Don’t Use The Placeholder Attribute — Smashing Magazine
A lot of the issues here are with abuses of the placeholder attribute—using it as a label, using it for additional information, etc.—whereas using it quite literally as a placeholder can be thought of as an enhancement (I almost always preface mine with “e.g.”).
Still, there’s no getting around that terrible colour contrast issue: if the contrast were greater, it would look too much like an actual pre-filled value, and that’s potentially worse.
Useful accessibility resources
A whoooole bunch of links about inclusive design, gathered together from a presentation.
Accessible By Design | Sparkbox | Web Design and Development
A primer on accessible colour contrast with links to some handy tools for testing.
Little UI details from @steveschoger, in HTML and CSS
Suggestions for small interface tweaks.
Accessible Links Re:visited | Filament Group, Inc., Boston, MA
Great advice on keeping your hyperlinks accessible.
The Contrast Swap Technique: Improved Image Performance with CSS Filters | CSS-Tricks
A clever performance trick for images:
- Reduce image contrast using a linear transform function (Photoshop can do this)
- Apply a contrast filter in CSS to the image to make up for the contrast removal
Programming Design Systems
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!
Stark
A plug-in for Sketch that allows you to simulate colour blindnesses and check colour contrasts.
Patterns Beyond Context · Matthias Ott – User Experience Designer
If we describe patterns also in terms of content, context, and contrast, we are able to define more precisely what a specific pattern is all about, what its role within a design system is, and how it is defined and shaped by its environment.