Skip to main content

Veritran Docs

Understanding Visual Accessibility

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.

Important

Accessibility contrast guidelines, such as those defined by the WCAG (Web Content Accessibility Guidelines), require that text and background have a minimum contrast ratio to ensure readability for all users, including those with visual impairments or color perception difficulties. This contrast ratio is measured as a proportion, with a minimum of 4.5:1 recommended for regular text and 3:1 for large or bold text.

For this purpose, the team has three tools available:

  • a new Figma functionality,

  • the Stark plug-in in its free version,

  • the A11y plug-in.

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)

ACCESSIBILITY.png
Install A11y

The instructions below describe how to install the A11y plugin in your device.

  1. In the Figma document you are using, go to the Main menu (MAIN_MENU_FIGMA.png ). 

  2. Click Plugins.  

  3. Click Manage plugins....  

  4. In the search bar, enter a11y color contrast checker.  Click the plugin that appears first on the list.

  5. In the modal that opens, click Run.

  6. The plugin will be installed, and it will appear as a modal floating in the document.

Use A11y

The instructions below describe how to use A11y in the Ui kit document.

  1. Click any element within a frame.  

  2. Click Check in the A11y modal.  

  3. 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. 

  4. Click Done to clear results and continue checking other elements.

Notice

To learn more about the A11y plugin, read Figma documentation.

In this section: