Skip to content
design system
Thème d’affichage, actuellement Auto

22 roles · 37 measured pairs

Colour

Backgrounds, inks, lines, the action colour and the audit states. The subject of the product is contrast, so it became its form: no image, no gradient, no drop shadow; structure comes from the line and the empty space. Colour never carries meaning alone (criterion 3.1): wherever a state is coloured, a word or a symbol goes with it. The action colour is reserved for what can be activated and never decorates; no state colour ever serves as an accent.

The roles

A role is a custom property, --rl-*, with one value per set. The light set is the value; dark, print and forced colours redefine it on the same selectors. A component references the role, never a hex.

  • light
    dark

    --rl-bg

    The page. A slightly warm white, not a pure one: three points of contrast given up against ink (17.92:1 instead of 21:1) for an interface that does not burn the eyes after three hours of audit.

    Light
    #fbfaf8
    Dark
    #141310
    Print
    #ffffff
    Forced colours
    Canvas
  • light
    dark

    --rl-surface

    An element laid on the page: a card, a field, a button's own background.

    Light
    #ffffff
    Dark
    #1c1a16
    Print
    #ffffff
    Forced colours
    Canvas
  • light
    dark

    --rl-sunken

    A hollow: a table header, an inert zone, a control that is busy.

    Light
    #f4f2ee
    Dark
    #100f0d
    Print
    #f4f2ee
    Forced colours
    Canvas
  • light
    dark

    --rl-ink

    Body text. Ink black rather than absolute black.

    Light
    #14120f
    Dark
    #f3f0ea
    Print
    #14120f
    Forced colours
    CanvasText
  • light
    dark

    --rl-ink-soft

    Captions and metadata. Balanced by measurement across the two sets: 7.33:1 light, 7.32:1 dark.

    Light
    #57534c
    Dark
    #a8a296
    Print
    #57534c
    Forced colours
    CanvasText
  • light
    dark

    --rl-on-fill

    Text on a filled surface: a primary button, a status toggle that is pressed.

    Light
    #ffffff
    Dark
    #141310
    Print
    #ffffff
    Forced colours
    ButtonFace
  • light
    dark

    --rl-line

    The ordinary hairline, 1px. It carries no information and stays below 3:1 on purpose; a control never uses it as its edge.

    Light
    #d9d5cd
    Dark
    #322e28
    Print
    #b8b3aa
    Forced colours
    GrayText
  • light
    dark

    --rl-line-strong

    A line of structure, 1.5px: the rule under a section heading, the top of a table.

    Light
    #14120f
    Dark
    #f3f0ea
    Print
    #14120f
    Forced colours
    CanvasText
  • light
    dark

    --rl-line-control

    The edge of a control: button, field, list. Distinct from the hairline for a measured reason: the hairline gives 1.46:1 on the surface, fine for a separator, not for what bounds an interactive element, which criterion 3.3 wants at 3:1. Born in the extension panel, where the defect was measured on twenty-three controls.

    Light
    #8f8779
    Dark
    #767066
    Print
    #8f8779
    Forced colours
    ButtonBorder
  • light
    dark

    --rl-action

    Reserved for what can be activated: links, primary buttons, the current item. Never decorative.

    Light
    #1b3a8c
    Dark
    #8fa8f0
    Print
    #1b3a8c
    Forced colours
    LinkText
  • light
    dark

    --rl-action-hover

    Light
    #142c6b
    Dark
    #b0c1f6
    Print
    #142c6b
    Forced colours
    LinkText
  • light
    dark

    --rl-nc

    Non-conforme. Also the colour of a destructive action, because it shares the meaning: this damages.

    Light
    #a32e1e
    Dark
    #f08a78
    Print
    #a32e1e
    Forced colours
    CanvasText
  • light
    dark

    --rl-c

    Conforme.

    Light
    #1e5c3f
    Dark
    #6fc49a
    Print
    #1e5c3f
    Forced colours
    CanvasText
  • light
    dark

    --rl-na

    Non applicable. The neutral ink: an absence of verdict, not a judgement.

    Light
    #57534c
    Dark
    #a8a296
    Print
    #57534c
    Forced colours
    CanvasText
  • light
    dark

    --rl-nt

    Non testé. Same ink as non applicable; the chip distinguishes it with a dashed edge, never with a hue.

    Light
    #57534c
    Dark
    #a8a296
    Print
    #57534c
    Forced colours
    CanvasText
  • light
    dark

    --rl-attention

    An answer to check again: neither a verdict nor its absence, but work that remains. Came from the extension panel, where it used to be written by hand in one hue for both themes.

    Light
    #7a4a00
    Dark
    #e0b062
    Print
    #7a4a00
    Forced colours
    CanvasText
  • light
    dark

    --rl-derogation

    A derogated criterion, which a report must tell apart from a non applicable one without giving it the hue of a verdict. Always accompanied by the ⊘ symbol and the word.

    Light
    #a15c00
    Dark
    #e39a5a
    Print
    #a15c00
    Forced colours
    CanvasText
  • light
    dark

    --rl-hover

    The background of a row or a control under the pointer. Hovering darkens on the light set and lightens on the dark set; both values come from the set itself.

    Light
    #f4f2ee
    Dark
    #1c1a16
    Print
    #f4f2ee
    Forced colours
    Canvas
  • light
    dark

    --rl-canvas

    The surface an audited image is viewed on. It does not follow the theme: a transparent logo or a dark pictogram must read as on paper, or the auditor judges an image they cannot see.

    Light
    #ffffff
    Dark
    #ffffff
    Print
    #ffffff
    Forced colours
    Canvas
  • light
    dark

    --rl-canvas-ink

    Text on the viewing surface. Does not follow the theme either, for the same reason.

    Light
    #14120f
    Dark
    #14120f
    Print
    #14120f
    Forced colours
    CanvasText
  • light
    dark

    --rl-backdrop

    The veil under a modal. The one place translucency is allowed: it must show that the dialog sits on the page and not in its place, and it never sits under text of ours.

    Light
    #14120f8c
    Dark
    #00000099
    Print
    #14120f8c
    Forced colours
    Canvas
  • light
    dark

    --rl-focus

    The focus ring. The action colour, never a state colour: a red ring on a field would read as an error.

    Light
    #1b3a8c
    Dark
    #8fa8f0
    Print
    #1b3a8c
    Forced colours
    Highlight

Every pair, measured

The colour pairs the product relies on, with the floor each must hold. The generator measures every pair in the light, dark and print sets and fails the build below the floor; the ratios it writes into tokens.css come from here, so they can never lie. `min` is a floor; `max` is a ceiling, for the one line that must stay a separator. Thresholds: 4.5 for text (criteria 3.2), 3 for the edge of a control and for the focus ring (criterion 3.3).

Contrast ratio of each documented pair in the light, dark and print sets, against its floor
Text or edgeOnFloorLightDarkPrintWhy
inkbg4.5:1 at least17.92:116.33:118.69:1body text on the page
inksurface4.5:1 at least18.69:115.27:118.69:1
inksunken4.5:1 at least16.72:116.84:116.72:1
ink-softbg4.5:1 at least7.32:17.31:17.64:1captions
ink-softsurface4.5:1 at least7.64:16.84:17.64:1
ink-softsunken4.5:1 at least6.83:17.54:16.83:1the label of a busy button
on-fillaction4.5:1 at least10.34:17.98:110.34:1a primary button
on-fillnc4.5:1 at least7.07:17.61:17.07:1a destructive button under the pointer, a pressed NC toggle
on-fillc4.5:1 at least7.90:18.88:17.90:1a pressed C toggle
on-fillna4.5:1 at least7.64:17.31:17.64:1a pressed NA toggle
on-fillattention4.5:1 at least7.48:19.33:17.48:1
actionbg4.5:1 at least9.91:17.98:110.34:1a link
actionsurface4.5:1 at least10.34:17.46:110.34:1
action-hoverbg4.5:1 at least12.56:110.44:113.10:1
action-hoversurface4.5:1 at least13.10:19.76:113.10:1
ncbg4.5:1 at least6.78:17.61:17.07:1
ncsurface4.5:1 at least7.07:17.12:17.07:1
ncsunken4.5:1 at least6.33:17.85:16.33:1
cbg4.5:1 at least7.57:18.88:17.90:1
csurface4.5:1 at least7.90:18.30:17.90:1
csunken4.5:1 at least7.06:19.15:17.06:1
nabg4.5:1 at least7.32:17.31:17.64:1
ntbg4.5:1 at least7.32:17.31:17.64:1
attentionbg4.5:1 at least7.17:19.33:17.48:1
attentionsurface4.5:1 at least7.48:18.73:17.48:1
attentionsunken4.5:1 at least6.69:19.62:16.69:1
derogationbg4.5:1 at least4.97:17.99:15.18:1
derogationsurface4.5:1 at least5.18:17.47:15.18:1
derogationsunken4.5:1 at least4.64:18.24:14.64:1
canvas-inkcanvas4.5:1 at least18.69:118.69:118.69:1a caption on the image viewing surface
line-controlsurface3:1 at least3.55:13.54:13.55:1the edge of a control, criterion 3.3
line-controlsunken3:1 at least3.17:13.90:13.17:1
line-controlbg3:1 at least3.40:13.78:13.55:1
line-strongbg3:1 at least17.92:116.33:118.69:1
focusbg3:1 at least9.91:17.98:110.34:1the focus ring
focussurface3:1 at least10.34:17.46:110.34:1
linesurfaceunder 3:11.46:11.28:12.08:1a separator is a separator: if it ever reached 3:1 a control could pass its edge check with the wrong line

Ratios are truncated, never rounded: a stated ratio is never higher than the measured one. The build refuses to write the stylesheet when a pair drops below its floor, so a value here that failed would not have been built.