Level A - Perceivable
Last modified on Fri 17 Mar 2023

All content on the page/screen must be presented in a way users can perceive it.


Include text alternatives

Actionable elements must have an appropriate ID name. At the same time, images need to be provided with a brief description of what is on the image so the users who use screen readers can understand the meaning and intent behind the read elements. Decorative elements do not require a text alternative.

Figma example

Include audio & video captions/transcripts

For audio & video content, there needs to be a provided set of transcripts or captions for the users with hearing and vision difficulties to be able to access the content through reading or listening to the text alternative with screen readers. Communicate this to content providers and include an access point in your design where users can get to those transcripts or content descriptions.

Figma example

Avoid image dependancy

Avoid placing important information inside an image. Images can be stretched; the right color contrast may not be met, and the content inside can become blurred or pixelated, making it harder for users to perceive.

Figma example

Have an automatic audio playing control

Avoid using automatic audio playing as the sound may interfere with users who use screen readers. Make sure your design includes volume and play/pause controls.

Figma example

Color & Contrast

Respect small text ⁠–⁠ 4:5:1 color contrast ratio

Small text (defined below) needs to pass the 4:5:1 color contrast ratio in order to achieve maximum readability. Bold text = 13pt and belowRegular text = 17pt and below.

Figma example

Respect large text ⁠–⁠ 3:1 color contrast ratio

Large text (defined below) needs to pass the 3:1 color contrast ratio in order to achieve maximum readability. Bold text = 14pt and upRegular text = 18pt and up.

Figma example

Respect non-text elements contrast ratio

For every actionable or critical element you need to make sure there is enough contrast to be easily distinguishable. For the elements 16px and above, follow the rule of 3:1, and for the elements below 16px, follow the rule of 4:5:1.

Figma example

Avoid color dependency

Don’t rely solely on color to convey information. It will be harder to perceive different colors on the screen for different lighting conditions and visually impaired or color blind users. Add visual cues that help users distinguish the difference between the elements they are looking at (e.g., the underline for links, active tabs with a dot or a line indicator, different stroke and fill options, etc.).

Figma example