Link colors and the rule of tincture
When you think of heraldry what comes to mind is probably knights in shining armor, damsels in distress, jousting, that sort of thing. Medieval stuff. But I prefer to think of it as one of the earliest design systems. It has rules and principles to help designers come up with coats of arms which look good, are internally coherent, and which can be composed with coats of arms designed hundreds of years ago and hundreds of kilometers away.
Color plays a huge role in heraldry. There are seven basic colors, or tinctures: argent, azure, gules, or, purpure, sable, and vert. (We call these colors white, blue, red, yellow, purple, black, and green, respectively.) The basic heraldic rule governing the use of color is the rule of tincture. The seven tinctures are divided into two types: metals (argent/white and or/yellow) and colors (all the others). The rule of tincture states that metals should not be placed on metals, and colors should not be placed on colors. So you can have a yellow lion on a green background (a metal on a color), but you can’t have a red dog on a black background (a color on a color).
This isn’t an arbitrary rule! It was very important on the medieval battlefield to be able to recognize a coat of arms from far away. The rule of tincure is ultimately about ensuring the legibility of coats of arms over long distances. Think of it as heraldry’s version of WCAG 2.1’s Success Criterion 1.4.3, the rule which guides web developers toward using colors with higher contrast.
Which reminds me, this was supposed to be a post about the web, so let’s get to that. Browsers render web pages by default as black text on a white background. Unvisited links are blue and visited links are purple. The web’s defaults follow the rule of tincture! White (Or) is a metal, and black, blue, and purple (sable, azure, and purpure) are colors.
| Tincture | Metal or color? | CSS named color |
|---|---|---|
| Argent | Metal | white |
| Azure | Color | blue |
| Gules | Color | red |
| Or | Metal | yellow |
| Purpure | Color | purple |
| Sable | Color | black |
| Vert | Color | green |
Dark mode wasn’t around when the first web browsers were made, so the User Agent stylesheet renders web pages black-on-white even in dark mode. My starting point for designing a dark mode theme is to use white text on a black background, the inverse of the default. But what color should links be? Well, black (sable) is a color, and the rule of tincture only lets us put metals on colors. There are ony two metals, white (argent) and yellow (or). We’re already using white for text, so that leaves yellow. Here’s an example:
Which reminds me, this was supposed to be a post about the web, so let’s get to that. Browsers render web pages by default as black text on a white background. Unvisited links are blue and visited links are purple. The web’s defaults follow the rule of tincture! White (Or) is a metal, and black, blue, and purple (sable, azure, and purpure) are colors.
Unlike the default stylesheet, this doesn’t distinguish between visited and unvisited links. There are only two metals and we’ve already used both of them. Is there a way of setting visited links apart that will still obey the rule of tincture?
Yup! There totally is. Notice how few tinctures there are, and how generic they are. Blazons (a textual description of a coat of arms, e.g. “vert, a lion rampant or”) can be rendered in different media and with different materials. The dyes, paints, and fiber that artists have available have changed radically over the centuries, so the artist has a lot of leeway in terms of what exact shades to use for each tincture. Take the metals, for instance. Argent is usually rendered white, but can also be rendered silver. Or is usually yellow, but can also be gold. So we can use different variants of Or for visited and unvisited links:
Which reminds me, this was supposed to be a post about the web, so let’s get to that. Browsers render web pages by default as black text on a white background. Unvisited links are blue and visited links are purple. The web’s defaults follow the rule of tincture! White (Or) is a metal, and black, blue, and purple (sable, azure, and purpure) are colors.
And now you know three things:
- how to apply the rule of tincture to choosing colors for your web page;
- why I picked yellow and gold for link colors in my dark mode theme;
- and that I am a giant dork. ∎