In your published documentation, the accessibility color grid will visualize the accessibility of your color tokens by automatically calculating their color contrast ratio.
You can see their accessibility rating by hovering on the badge at the bottom of each color card.
Add an accessibility color grid block
To add a design tokens block to your documentation:
- Select Accessibility color grid from the block menu.
- In the block's property panel to the right, click Change selection to select the tokens you want to display in the block.
- 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.
- Click Save 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.
- Choose a theme token to either be displayed beside the base token value, or override it. See Displaying theme tokens for more.
- Select which token properties you want to display in the block in the Token properties section.
