Colors

Contrast guide

Pick a palette, change any color, and copy the CSS the guide writes. Text requires 4.5:1 (WCAG 1.4.3), and so do the round controls’ glyphs, since Exit full screen’s label shares their colors. Rings and the marks of a state require 3:1 (1.4.11).

/* Clover's own colors: nothing to set. */

Setting colors

Each color is a custom property named --clover-color- plus its name in the guide. Variables lists each with what it colors.

.my-layout {
  --clover-color-accent: #4e2a84;
  --clover-color-secondary: #fafafa;
}

The round controls keep their dark fill (control) and white glyphs (control-glyph) in a dark mode, since they sit over the picture.

The media player’s colors are --clover-player-*, and the Canvas’s background is --clover-canvas-background.

Checklist

Clover’s default colors meet WCAG 2.2 AA (open gaps are in ACCESSIBILITY.md ). Yours are up to you: check them here, and again for a dark mode.

• Text is 4.5:1: primary, primary-muted and accent-text on secondary and on secondary-muted.
• A popover’s quieter words, secondary-alt on primary, are 4.5:1.
• Search’s placeholder, primary 65% into secondary, is 4.5:1 on secondary.
• Rings and the marks of a state are 3:1: accent against secondary.
• The round controls’ glyphs are 4.5:1: control-glyph on control, and on accent, their fill under the pointer.
• An accent that can’t carry control-glyph at 4.5:1 takes highContrast, then needs 3:1 against secondary, as a ring.
• Over a picture, primary and secondary are 9:1 apart, so one of them keeps 3:1 against any picture.
• A dark mode passes every check above with its own colors.

High contrast

An accent too light to carry white text at 4.5:1, such as an orange, a yellow or a light blue, can still be yours. Set highContrasthigh-contrast on the Viewer<clover-viewer>, the Root<clover-root>, or a component that stands alone:

<Viewer iiifContent={url} highContrast />

<clover-viewer
  iiif-content="https://iiif.io/api/cookbook/recipe/0009-book-1/manifest.json"
  high-contrast></clover-viewer>

The accent then goes only where nothing is read on it: rings, outlines, the line under an open heading, the marks of a state. Where it would fill behind a glyph or words, the round controls’ dark fill stands in: control-glyph on control. Under the pointer, the accent rings the control at half strength, 1px clear, as Items rings an item, and in full once it’s chosen (the language read, a menu open). Focus keeps its own ring. Text in the accent is your accent-text if you set one, else the text’s own color.

Clover turns high contrast on wherever the system asks for more contrast (prefers-contrast: more), whatever your page sets.

Do

• Set secondary to your page’s background: most components paint no ground of their own, so Clover’s text sits on your page.
• Size your page in rem or %, never pixels on its root, so Clover follows the browser’s text size.
• Give a dark mode a lighter accent-text, and keep accent for rings and fills.
• When you restyle a state, keep a second sign beside the accent, as Clover does: a bold label, an underline, a second ring.
• Measure what your page shows, and never round a ratio up: 4.49:1 fails.

Don’t

• Don’t mark a state with the accent alone (WCAG 1.4.1).
• Don’t swap control and control-glyph for a dark mode.
• Don’t let a reset take the markers off Clover’s lists, or put them back.
• Don’t bring back the Body’s motion where the system asks for reduced motion.
• Don’t set a --clover-* property that Variables doesn’t list: Clover sets those itself.