---
title: "Mark"
subtitle: "Highlighted text, abbreviations and figures"
description: "Three semantic elements the design system styles: mark for highlighted text, abbr for an acronym, and figure with figcaption for media that carries a caption."
author: "Studio"
section: "Website"
subsection: "Foundations"
order: 11
status: "published"
---

Three semantic elements carry their own styling rather than needing a class: `<mark>` for highlighted text, `<abbr>` for an acronym, and `<figure>` with `<figcaption>` for captioned media. Each one means something to a screen reader, so reaching for them decoratively changes what the page says.

## Highlighted text

`<mark>` paints the peach highlighter ground through `--yellow-light`; the [Colour](/website/color.html) page carries the token and its value.

<div class="demo-preview is-joined">
  <p>The tagline signals what the brand stands for: <mark>Where Culture Meets Care</mark>.</p>
</div>

```html
<p>The tagline signals what the brand stands for: <mark>Where Culture Meets Care</mark>.</p>
```

### A known contrast failure in dark mode

In light mode a mark is `--brown-dark` ink (`#181818`) on the peach ground and measures **14.59:1** — comfortably past AA. In dark mode the engine mixes `--yellow` to 60 % over the page and inks it `--off-white`, which against BlackDoctor's gold measures **4.03:1**, below the 4.5:1 AA asks of body text.

The ground is not the problem — the ink is. True black on that same mixed ground measures **4.91:1** and clears AA, so the failure is the engine's choice of `--off-white` rather than the gold beneath it.

- **Check a `<mark>` in dark mode before shipping it.** The demo above is currently the only one on the site, so this page is the place to see the failure.

The engine's rule lives in a synced file that `npm install` overwrites, so it cannot be corrected there from here — but a one-line override in `assets/css/style.css` would fix it locally today, since black clears on that ground. It is recorded under *Engine gaps* in `docs/figma-mapping.md`, and the proper fix is upstream: pick the ink from the mixed ground's luminance rather than assuming a dark yellow.

## Abbreviations

`<abbr>` renders with a dotted underline and shows its expansion on hover through the native `title` attribute.

<div class="demo-preview is-joined">
  <p>Every article is reviewed against <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2.1 AA before it ships.</p>
</div>

```html
<p>Reviewed against <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2.1 AA.</p>
```

Hover is not available on a touch screen and `title` is unreliable with a screen reader, so an abbreviation that matters should also be spelled out in the text on first use.

## Figure and caption

`<figure>` groups media with its caption so the two are associated in the accessibility tree rather than just visually adjacent. The figure takes a 24px block margin; the caption renders small, italic and faded, with 8px above it.

<div class="demo-preview is-joined">
  <figure>
    <img class="img img-16x9" src="/assets/images/og-default.png" alt="BlackDoctor brand mark on the paper ground">
    <figcaption>The brand mark on its paper ground, as it appears when a page is shared.</figcaption>
  </figure>
</div>

```html
<figure>
  <img class="img img-16x9" src="/assets/images/og-default.png" alt="…">
  <figcaption>The brand mark on its paper ground.</figcaption>
</figure>
```

## Rules

- **`<mark>` means highlighted, not emphasised.** A screen reader may announce it as such, so reaching for it to make text bold changes what the page says; for emphasis the elements are `<strong>` and `<em>`.
- **Never omit `title` on an `<abbr>`.** The rule is `abbr[title]`, so without one nothing matches: the element renders as plain text and the abbreviation is invisible as well as unexplained.
- **A caption supplements `alt`, it does not replace it.** The caption is read by everyone; `alt` is what a screen reader has instead of the picture.
- **Never use `<figcaption>` outside a `<figure>`.** It has no meaning on its own and will not be associated with anything.