white | #ffffff | Text and icons on lilac, lilac-dark and danger fills (6.70:1, 9.21:1, 10.59:1), and the card and popover surface. |
|---|
paper | #ffffff | The page background. |
|---|
fill | #f3f3f5 | muted. ink reads on it at 16.28:1, ink-soft at 7.78:1, ink-faint at 5.13:1, lilac at 6.05:1. |
|---|
wash | #edebf4 | Identifies the current nav item, hover on link-brut, table headers, secondary. ink reads on it at 15.29:1, ink-soft at 7.30:1, ink-faint at 4.81:1, lilac at 5.68:1. |
|---|
line | #d7d7dc | Dividers. 1.43:1 against paper, so it is decoration which means that it does not need to be color contrast compliant. Use border or line-control for anything that carries meaning. |
|---|
line-control | ink | Border of a form control. Aliases ink, so a control edge reaches 3:1 (non-text contrast) against its background. |
|---|
ink | #16161a | Text, borders and hard shadows. 18.04:1 on paper. Text on marker is always ink. |
|---|
ink-soft | #4b4b55 | Secondary text on paper (8.62:1), fill (7.78:1) and wash (7.30:1), AAA on all three, for descriptions, footer copy, captions and field hints. wash is the weakest of the three: the old #55555f was 6.24:1 there, under the 7:1 AAA asks of 14px text. |
|---|
ink-faint | #66666f | Tertiary text on paper (5.68:1), fill (5.13:1) and wash (4.81:1). |
|---|
lilac | #5e548e | Fill for primary buttons with white text (6.70:1); text and icons on paper (6.70:1), fill (6.05:1) and wash (5.68:1). |
|---|
lilac-dark | #4a4170 | Hover and pressed state of lilac, and tinted icon text on wash (7.80:1). 9.21:1 against paper. It is not enough for small text on a tint: on a 10% lilac tint over wash it is 6.81:1, under the 7:1 of AAA, so small text uses lilac-deep. |
|---|
lilac-deep | #3d3459 | Small text in the accent, which accent-text points to. It stays AAA on a tint of lilac: 11.45:1 on paper, 10.33:1 on fill and 9.70:1 on wash, and still 8.47:1 on a 10% lilac tint over wash and 7.35:1 on the 20% hover tint, the weakest ground there is. white text on it is 11.45:1. |
|---|
danger | #82002a | Errors and destructive actions. Text on paper (10.59:1), fill (9.56:1) and wash (8.97:1), and white text on a danger fill (10.59:1). In APCA it is Lc 80 or better on each ground, which is what DevTools asks of 14px text at weight 600. At regular weight that size asks for Lc 100, which no red reaches, so set red text at weight 600 or heavier. |
|---|
marker | #ffe600 | The highlighter band behind Underline. Only ever behind ink text (14.24:1). It should never be a text colour. |
|---|
focus-ring-primary | #0066ff | Outer focus ring. Sits outside the control with a 3px offset, so it is measured against the surface: 4.83:1 on paper, 4.36:1 on fill, 4.09:1 on wash. |
|---|
focus-ring-soft | #a5c8ff | Inner halo of the focus ring, between the control and focus-ring-primary. Decoration around the 3:1 ring because it is not the indicator of the focus state. |
|---|