--- title: "Colors" description: "Set Clover's colors and check each contrast live on a Viewer in your palette, with a checklist, high contrast for light accents, and dos and don'ts." url: https://clover.iiif.library.northwestern.edu/docs/styling/colors version: "4" --- # Colors Clover’s colors are [custom properties](https://clover.iiif.library.northwestern.edu/docs/styling/variables#colors) your page can set. Try yours below, and watch each contrast pass or fail. ## 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). Palette \[x]Clover defaults\[ ]Dark\[ ]Clover blue\[ ]Northwestern purple\[ ]Princeton orange\[ ]Texas A\&M maroon\[ ]Tulane green\[ ]UCLA blue > **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows. > > [Example: the Viewer in this palette](https://clover.iiif.library.northwestern.edu/examples/stylesheets/styles.html?level=3) \#1a1d1e`primary`Text#1a1d1e \#26292b`primary-muted`Quieter text#26292b \#ffffff`secondary`Ground#ffffff \#e6e8eb`secondary-muted`Hairlines, hover fills#e6e8eb \#c1c8cd`secondary-alt`Popover words, closed headings#c1c8cd \#0065c3`accent`Rings, selection#0065c3 \#0065c3`accent-text`Links#0065c3 \#1a1d1e`control`Control fill#1a1d1e \#ffffff`control-glyph`Control glyph#ffffff All 11 required contrasts pass, 1 only just: Accent text under the pointer. | Colors | Contrast | Requires | Result | | -------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------- | | **Text**`primary` on `secondary`The Panel, menus, popups, fields | 16.95:1 | 4.5:1 | Passes | | **Quieter text**`primary-muted` on `secondary`Descriptions, status, field edges | 14.63:1 | 4.5:1 | Passes | | **Text under the pointer**`primary` or `primary-muted` on `secondary-muted`Rows and menu options | 11.92:1 | 4.5:1 | Passes | | **Quieter text in a popover**`secondary-alt` on `primary`A chapter's title on the seek bar, a place's date on the Map | 10.02:1 | 4.5:1 | Passes | | **Placeholder**`primary` 65% into `secondary`Search's field | 5.27:1 | 4.5:1 | Passes | | **Accent text**`accent-text` on `secondary`Links, Read more, the selected item's label | 5.75:1 | 4.5:1 | Passes | | **Accent text under the pointer**`accent-text` on `secondary-muted`A link in a row or a menu | 4.68:1 | 4.5:1 | Just passes | | **Rings**`accent` against `secondary`Focus, the selected item, the current tab | 5.75:1 | 3:1 | Passes | | **Ring under the pointer**`accent` at half strength against `secondary`A preview: pressing decides | 2.24:1 | None | — | | **Control glyphs**`control-glyph` on `control`The round controls, Exit full screen | 16.95:1 | 4.5:1 | Passes | | **Glyphs on the accent**`control-glyph` on `accent`A control under the pointer or focused | 5.75:1 | 4.5:1 | Passes | | **Hairlines**`secondary-muted` against `secondary`Between regions: they mark nothing | 1.22:1 | None | — | | **Closed heading's line**`secondary-alt` at half strength against `secondary`Under a closed heading in the Panel: its chevron marks it | 1.28:1 | None | — | | **Over a picture**`primary` beside `secondary`Hotspots, focus over images: one tone keeps 3:1 on any picture | 16.95:1 | 9:1 | Passes | ```css /* 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](https://clover.iiif.library.northwestern.edu/docs/styling/variables#colors) lists each with what it colors. ```css .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-*`](https://clover.iiif.library.northwestern.edu/docs/styling/variables#the-media-player), and the Canvas’s background is [`--clover-canvas-background`](https://clover.iiif.library.northwestern.edu/docs/styling/variables#the-body). ## Checklist Clover’s default colors meet WCAG 2.2 AA (open gaps are in [ACCESSIBILITY.md](https://github.com/nulib-ds/clover/blob/main/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 `highContrast` (web components: `high-contrast`) on the `Viewer` (web components: ``), the `Root` (web components: ``), or a component that stands alone: **React** ```jsx ``` **Web components** ```html ``` 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`](https://clover.iiif.library.northwestern.edu/docs/styling/variables#colors) 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`](https://clover.iiif.library.northwestern.edu/docs/styling/variables#colors) 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](https://clover.iiif.library.northwestern.edu/docs/styling/fonts#your-pages-size). - Give a dark mode a lighter `accent-text`, and keep `accent` for rings and fills. - When you [restyle a state](https://clover.iiif.library.northwestern.edu/docs/styling/classes#classes-and-states), 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](https://clover.iiif.library.northwestern.edu/docs/styling/classes#lists-in-markdown-text). - Don’t bring back [the Body’s motion](https://clover.iiif.library.northwestern.edu/docs/styling/variables#the-body) where the system asks for reduced motion. - Don’t set a `--clover-*` property that [Variables](https://clover.iiif.library.northwestern.edu/docs/styling/variables) doesn’t list: Clover sets those itself.