[en] Understanding Visual Accessibility
[en] To determine that the app is visually accessible, the team member in charge of the design must evaluate the elements in Figma and confirm that the app complies with AA and AAA guidelines color contrast. For this purpose, the Figma plug-in A11y is used.
[en] This plug-in (available for download in Figma) is a tool that tests two main elements: if the colors used in the design comply with an adequate contrast and if the fonts used (derived from the brandbook) are both adequate to be visualized by all app users, regardless of their sight conditions.
[en] The A11y tool ensures that the text is readable for users by adhering to WCAG (Web Content Accessibility Guidelines) standards. It appears visible in the Figma files at all times as a floating panel (see image below)
[en] Install A11y
[en] The instructions below describe how to install the A11y plugin in your device.
[en] In the Figma document you are using, go to the Main menu (
). [en] Click Plugins.
[en] Click Manage plugins....
[en] In the search bar, enter a11y color contrast checker. Click the plugin that appears first on the list.
[en] In the modal that opens, click Run.
[en] The plugin will be installed, and it will appear as a modal floating in the document.
[en] Use A11y
[en] The instructions below describe how to use A11y in the Ui kit document.
[en] Click any element within a frame.
[en] Click Check in the A11y modal.
[en] The panel displays the analysis and its results. The tool checks the color contrast ratio of all visible text in a frame and provides feedback on whether it meets WCAG’s AA and/or AAA level compliance. It also provides color sliders that allow users to adjust the colors and understand how the corresponding contrast ratio changes in real-time.
[en] Click Done to clear results and continue checking other elements.
Nota
[en] To learn more about the A11y plugin, read Figma documentation.