Check contrast

Identify color contrast issues on text layers and non-text layers

BrowserStack’s Accessibility Design Toolkit helps identify color contrast issues on text and non-text elements in Figma. The toolkit instantaneously identifies the WCAG AA and AAA pass/fail status for color contrast issues. If the plugin detects a color contrast issue, it suggests accessible color combinations. You can apply a suggestion without leaving the plugin.

Color contrast on text elements

To check for contrast issues in text layers, follow these steps:

1. Select the text layer you want to check.
2. In the plugin, select Text Contrast. On selection, the toolkit immediately highlights the WCAG AA and AAA pass/fail status for color contrast on the selected text layer.
3. Apply one of the color suggestion to the text layer.
4. Click Mark as done.

Color contrast on non-text elements

To check for contrast issues in text layers, follow these steps:

1. Select the non-text layer you want to check.

2. The toolkit highlights the WCAG AA and AAA pass/fail status for color contrast on the selected non-text layer.