Catalogue / Plate 66← All plates
A bright accent: fill, never line
A bright accent as fill, text, border and focus ring, with each contrast computed.
Press Tab into these. The rule breaks exactly where nobody designs: the focus ring.
Accent ring 1.26:1 fails 3:1 UI
Ink ring 15.59:1 passes 3:1 UI
Without a keyboard, here is the same pair with focus drawn:
Accent ringInk ring
Remake it
Build one interactive web page: An acid accent as a fill, as text, as a border and as a focus ring, each with its contrast computed. Set it on an invented business called Sampleton, with its own drawn or generated pictures and no one else's files. It suits: Any light, high-chroma accent: lime, yellow, cyan, light orange. Do not let it fail the way this kind of piece usually does: The focus ring. An accent outline measured 1.13:1 on the page and 1:1 on the accent button. It must work with the keyboard, on a phone, with reduced motion respected and no text under 12px. Tell me which libraries you chose and why.
Notes: when it suits, when it does not, how it fails
- When it suits
- Any light, high-chroma accent: lime, yellow, cyan, light orange.
- When it does not
- Dark accents such as navy or oxblood, where the rule runs the other way.
- How it fails
- The focus ring. An accent outline measured 1.13:1 on the page and 1:1 on the accent button.
Measured on: landonorris.com · T2. Built from scratch for an invented business; nothing here comes from the site studied.