… Read article “The Contrast Triangle”
Let’s say you’re building a site, and you’re working with a designer. They come to you with some solid designs, and you’re ready to go. You’re also a conscientious front end developer and you like to make sure the sites you build are accessible. The designs you’re working from have some body copy, but you notice that the links inside the body copy are missing underlines.
You are now in The Contrast Triangle.
It started with seeing a recent Pen of Mandy Michael’s text effects demos. I’m a very visual creature, so the first thing I noticed was the effect, not the title (which clearly states how the effect was achieved). Instantly, my mind went “blend modes!”, which turned out to be wrong.
The demo actually uses
clip-path. First of all, the text is duplicated. We have black text below as the actual text content of the element and the white … Read article “Methods for Contrasting Text Against Backgrounds”