Accessibility Features

According to WHO, over 1.3 billion people live with some form of vision impairment. We believe no one should feel excluded from digital experiences by means of their visual disabilities. UXPin Contrast Analyzer and Color Blindness Simulator are here to help you make your prototype more accessible for those with visual disabilities.

Note

The UXPin Color Blindness Simulator is available on Chrome and in the UXPin desktop application.

Contrast Analyzer

UXPin Contrast Analyzer ensures your colors, graphics and typography work hand in hand, providing better readability and legibility. It is based on Web Content Accessibility Guidelines (WCAG) 2.0. UXPin calculates the contrast between the text and the background taking into account the size of the text. You can find it at the top bar next to the Preview button, where you can choose the level of conformance:

  • Level AA requires a contrast ratio of at least 3:1 for text not smaller than 24px (18px if bolded) or 4.5:1 for text smaller than 24px
  • Level AAA requires a contrast ratio of at least 4.5:1 for text not smaller than 24px (18px if bolded) or 7:1 for text smaller than 24px

From that moment, every time you select text UXPin will inform you whenever the contrast is insufficient with a notification in the Typography section.

Hover over the red exclamation mark to see the right contrast according to WCAG 2.0.

Hover over the red exclamation mark to see the right contrast according to WCAG 2.0.

Color Blindness Simulator

You can simulate various forms of color-blindness and create more inclusive and accessible designs without any plugins or external tools.

UXPin can simulate all types of color blindness:

  • Red-green color blindness (Deuteranomaly, Deuteranopia, Protanomaly, Protanopia)
  • Blue-yellow color blindness (Tritanomaly, Tritanopia)
  • Complete color blindness (Achromatomaly, Achromatopsia)