Sara Soueidan

Semantic HTML for Colors

Published     |     ~ Reading Time:     |    

I think we're at a time in Web design where colors have become first class citizens that deserve to have their own, semantic HTML element. This is especially true given the role and importance of color swatches in design systems today. I wouldn’t mind having a <color> element for that. But, unfortunately, we don’t have HTML elements dedicated for colors swatches. Or, do we?

I found this gem of an article by Taylor Hunt signing up for and browsing his RSS feed recently. I think that this is one of the most useful little front-end bits that I’ve recently learned.

For marking up colors, Taylor suggests using <input type=“color” disabled value=“#your_color_value”> or <svg width=“3em” height=“3em” aria-label=“#bf1942”> (check his article out for the full code).

Taylor’s justification for using <input type="color"> does make a lot of sense, but I have to admit I prefer the SVG way, because as far as my brain is concerned, an input is for receiving input, not displaying static information, especially considering that color type inputs don’t accept a readonly attribute.

Why does this matter?

A photo is worth a thousand words, so let me answer that by showing you what colors of the Lonely Planet style guide color swatches looked like when Windows High Contrast Mode (WHCM) is enabled:

Lonely Planet design system in WHCM
When WHCM is activated, the color swatches in the Lonely Planet design system disappear (left image). The image on the bottom right show what the design system looks like in its normal state. You can expect the same to happen in most other design systems too.

When HCM is activated, the colors of the operating system change to offer better contrast, and the colors are propagated from Windows High Contrast into the site’s style to ensure that the site is offering a true high-contrast experience similar to other applications on Windows.

This means that any colors that can be overridden will be overridden. Since colors in design systems are marked up as empty elements with a background color, and since WHCM overrides background colors, the color swatches in the design system disappear and their value is therefore lost.

This is why it’s important to mark colors up in a way that makes the swatches immune to such external changes. Taylor suggested two brilliant solutions that I, for one, will be adopting in all my future work. Color inputs and images are left unchanged in WHCM, so your swatches would be safe from external overrides.

Also: semantics matter.

Read Taylor’s article for all the interesting and useful details.

Find similar articles under: #bookmark   #design systems   #accessibility   #svg