Token blocks

Display design tokens in your documentation.

In your published documentation, the accessibility color grid will visualize the accessibility of your color tokens by automatically calculating their color contrast ratio.

Accessibility color grid - menu

You can see their accessibility rating by hovering on the badge at the bottom of each color card.

Accessibility color grid - published

Add an accessibility color grid block

An empty accessibility color grid block.

An empty accessibility color grid block.

To add an accessibility color grid block to your documentation:
  1. Select Accessibility color grid from the block menu.
  2. In the block's property panel to the right, click Change selection to select the tokens you want to display in the block.
  3. You can then choose to add either a color token group, or individual color tokens (you can't add both). Search and select the tokens you'd like to use for the block in the selection dialog. The tokens will be shown in the same order in your published documentation.
  4. Click Save selection.
Accessibility color grid - selection

In the property panel to the right of the screen, you can do the following:

  • Change the token in the block by clicking Change selection.
Accessibility color grid - property panel

Example

Palette / Blue
Colors
#082036
#18395d
#245685
#306ca5
#3a79bd
#4587cd
#5196dd
#6aacef
#aad2f4
#cde3f7
#e0f1fe
#ecf8fe
Text
DNP
1.4
Text
DNP
2.2
Text
DNP
3
Text
AA18
3.7
Text
AA18
4.4
Text
AA
5.3
Text
AA
6.9
Text
AAA
10.4
Text
AAA
12.5
Text
AAA
14.3
Text
AAA
15.3
Text
DNP
1.4
Text
DNP
1.5
Text
DNP
2.1
Text
DNP
2.6
Text
AA18
3.1
Text
AA18
3.8
Text
AA
4.9
Text
AAA
7.4
Text
AAA
8.9
Text
AAA
10.2
Text
AAA
10.9
Text
DNP
2.2
Text
DNP
1.5
Text
DNP
1.4
Text
DNP
1.7
Text
DNP
2
Text
DNP
2.5
Text
AA18
3.2
Text
AA
4.8
Text
AA
5.8
Text
AA
6.6
Text
AAA
7.1
Text
DNP
3
Text
DNP
2.1
Text
DNP
1.4
Text
DNP
1.2
Text
DNP
1.5
Text
DNP
1.8
Text
DNP
2.3
Text
AA18
3.5
Text
AA18
4.2
Text
AA
4.8
Text
AA
5.1
Text
AA18
3.7
Text
DNP
2.6
Text
DNP
1.7
Text
DNP
1.2
Text
DNP
1.2
Text
DNP
1.5
Text
DNP
1.9
Text
DNP
2.8
Text
AA18
3.4
Text
AA18
3.9
Text
AA18
4.2
Text
AA18
4.4
Text
AA18
3.1
Text
DNP
2
Text
DNP
1.5
Text
DNP
1.2
Text
DNP
1.2
Text
DNP
1.6
Text
DNP
2.4
Text
DNP
2.8
Text
AA18
3.2
Text
AA18
3.5
Text
AA
5.3
Text
AA18
3.8
Text
DNP
2.5
Text
DNP
1.8
Text
DNP
1.5
Text
DNP
1.2
Text
DNP
1.3
Text
DNP
2
Text
DNP
2.4
Text
DNP
2.7
Text
DNP
2.9
Text
AA
6.9
Text
AA
4.9
Text
AA18
3.2
Text
DNP
2.3
Text
DNP
1.9
Text
DNP
1.6
Text
DNP
1.3
Text
DNP
1.5
Text
DNP
1.8
Text
DNP
2.1
Text
DNP
2.2
Text
AAA
10.4
Text
AAA
7.4
Text
AA
4.8
Text
AA18
3.5
Text
DNP
2.8
Text
DNP
2.4
Text
DNP
2
Text
DNP
1.5
Text
DNP
1.2
Text
DNP
1.4
Text
DNP
1.5
Text
AAA
12.5
Text
AAA
8.9
Text
AA
5.8
Text
AA18
4.2
Text
AA18
3.4
Text
DNP
2.8
Text
DNP
2.4
Text
DNP
1.8
Text
DNP
1.2
Text
DNP
1.1
Text
DNP
1.2
Text
AAA
14.3
Text
AAA
10.2
Text
AA
6.6
Text
AA
4.8
Text
AA18
3.9
Text
AA18
3.2
Text
DNP
2.7
Text
DNP
2.1
Text
DNP
1.4
Text
DNP
1.1
Text
DNP
1.1
Text
AAA
15.3
Text
AAA
10.9
Text
AAA
7.1
Text
AA
5.1
Text
AA18
4.2
Text
AA18
3.5
Text
DNP
2.9
Text
DNP
2.2
Text
DNP
1.5
Text
DNP
1.2
Text
DNP
1.1