This One Simple 600-Year-Old Trick Makes Your Website More Accessible!
What do colours, metals, and furs have to do with the Web, anyway?
This is from a talk I gave at CSS Meetup Wellington in September 2018.
‘Accessibility and the Web’ sounds like a thoroughly modern set of challenges, but it includes problems that people have been trying to solve for hundreds of years. In mediaeval times, a knight being able to recognise a friend or foe at a distance was a matter of life and death. Rules evolved around the coats of arms that they bore to make identifying each other easier, giving birth to the science of heraldry. Those rules can still be useful to us today – including the most important one of those rules, the one around colour contrast.
First, we’ll talk about why colour contrast is so important to accessibility and what exactly we mean when we say ‘colour contrast’. (Hint: it doesn’t really have a lot to do with actual colour.) Then I’ll take us on a whirlwind tour through the history of heraldry, from Ancient Greece through the Age of Chivalry, all the way to last October.
You’ll get a quick primer on blazon, the language of heraldry, the HTML and CSS of arms. Then we’ll put it all together, showing how rules that originated on the mediaeval tournament ground inform our best practices here in the 21st century.
- WCAG 2.1: Understanding Success Criterion 1.4.3: Contrast (Minimum)
- Color Contrast and Why You Should Rethink It
- Colorable Text Demo
- Hex Naw
- Color: From Hex Codes to Eyeballs
- The College of Arms
- Canadian Heraldic Authority
- Bureau of Heraldry (South Africa)
- Simple Heraldry, Cheerfully Illustrated
- Bookshelf of British Heraldry
- The Rule of Tinctures