Resolving text accessibility dilemmas in UIs Roman Shamin Head of design at Evil Martians

Rule 1 The larger the text, the better Rule 2 The higher
 contrast,
 the better

Dilemma is like a seesaw Max A Min B Min A Max B

Does a dilemma imply that you can’t win?

When it comes to a11y, we can’t blindly adhere to rules

Dilemma #1

Bruno Figueiredo • Sep 25 Who’s attending ? Build your virtual badge! #foflayers Hugo Raymond • Sep 25 My heart is definitely full after the workshop yesterday with the crew. Obrigadão pelo acolhimento caloroso e para o tudo o apoio! Thanks for the invite! #foflayers Significa • Sep 25 Wondering how our talk at went? Beautifully! You had to be there to see it. As a treat, here’s our closing video where we share some thoughts about @fof_portugal @figma

Bruno Figueiredo • Sep 25 Who’s attending ? Build your virtual badge! #foflayers Hugo Raymond • Sep 25 My heart is definitely full after the workshop yesterday with the crew. Obrigadão pelo acolhimento caloroso e para o tudo o apoio! Thanks for the invite! #foflayers Significa • Sep 25 Wondering how our talk at went? Beautifully! You had to be there to see it. As a treat, here’s our closing video where we share some thoughts about @fof_portugal @figma Rule ? The larger the text, the better

Bruno Figueiredo • Sep 25 Who’s attending ? Build your virtual badge! #foflayers Hugo Raymond • Sep 25 My heart is definitely full after the workshop yesterday with the crew. Obrigadão pelo #foflayers

Bruno Figueiredo • Sep 25 Who’s attending ? Build your virtual badge! #foflayers Hugo Raymond • Sep 25 My heart is definitely full after the workshop yesterday with the crew. Obrigadão pelo acolhimento caloroso e para o tudo o apoio! Thanks for the invite! #foflayers Significa • Sep 25 Wondering how our talk at went? Beautifully! You had to be there to see it. As a treat, here’s our closing video where we share some thoughts about @fof_portugal @figma Bruno Figueiredo • Sep 25 Who’s attending ? Build your virtual badge! #foflayers Hugo Raymond • Sep 25 Hard to read Less scroll Easy to read More scroll

Hard to read Less scroll Easy to read More scroll

Dilemma #1 Text size VS scroll usage Text size Scroll usage

Resolving Text size VS
 scroll usage dilemma 1. Opt for slightly smaller text for professional tools and slightly larger text for consumer apps 2. Test your apps at a minimum of 200% zoom

Dilemma #2

Accessible design from the get-go July 26, 2021 For many people, vision starts deteriorating in school, and studies show that just about a third of adults in the States have 20/20 vision without glasses, contact lenses, or eye surgery. Far-sightedness, which will make your interface appear blurry to anyone not wearing glasses or lenses, affects about a half of people after the age of 40. If you rely too much on auditory cues, your effort will go to waste in any noisy environment.

Rule ? The higher
 contrast,
 the better

Accessible design from the get-go July 26, 2021 For many people, vision starts deteriorating in school, and studies show that just about a third of adults in the States have 20/20 vision without glasses, contact lenses, or eye surgery. Far-sightedness, which will make your interface appear blurry to anyone not wearing glasses or lenses, affects about a half of people after the age of 40. If you rely too much on auditory cues, your effort will go to waste in any noisy environment.

Accessible design from the get-go July 26, 2021 For many people, vision starts deteriorating in school, and studies show that just about a third of adults in the States have 20/20 vision without glasses, contact lenses, or eye surgery. Far-sightedness, which will make your interface appear blurry to anyone not wearing glasses or lenses, affects about a half of people after the age of 40. If you rely too much on auditory cues, your effort will go to waste in any noisy environment.

Accessible design from the get-go July 26, 2021 For many people, vision starts deteriorating in school, and studies show that just about a third of adults in the States have 20/20 vision without glasses, contact lenses, or eye surgery. Far-sightedness, which will make your interface appear blurry to anyone not wearing glasses or lenses, affects about a half of people after the age of 40. If you rely too much on auditory cues, your effort will go to waste in any noisy environment. Importance level: 1 3 4 2

Two types of contrast

Black text White background Gray text Contrast Every text
 against its
 background

Black text White background Gray text Hierarchy Between text blocks

Both contrasts
 are important If everything stands out,
 then nothing stands out

For many people, vision starts deteriorating in school, and studies show that just about a third of adults in the States have 20/20 vision without glasses, contact lenses, or eye surgery. Far-sightedness, which will make your interface appear blurry to anyone not wearing glasses or lenses, affects about a half of people after the age of 40. If you rely too much on auditory cues, your effort will go to waste in any noisy environment.

For many people, vision starts deteriorating in school, and studies show that just about a third of adults in the States have 20/20 vision without glasses, contact lenses, or eye surgery. Far-sightedness, which will make your interface appear blurry to anyone not wearing glasses or lenses, affects about a half of people after the age of 40. If you rely too much on auditory cues, your effort will go to waste in any noisy environment.

A darker background (with black text) reduces the available hierarchy range Text Text BG BG

Professional apps, as opposed to consumer ones, tend to utilize a wider range of hierarchy

Dilemma #2 Contrast VS hierarchy Contrast Hierarchy

ng in school, and ults in the contact lenses, make your ring glasses or the age of 40. If you rely too much on auditory cues, your effort will go to waste in any noisy environment. If you rely too much on auditory cues, your effort will go to waste in any noisy environment. If you rely too much on auditory cues, your effort will go to waste in any noisy environment. If you rely too much on auditory cues, your effort will go to waste in any noisy environment. Resolving
 dilemma #2 Consider using alternatives to color| z font sizey z font styley z different fonty z different design.

When it comes to a11y, we can’t blindly adhere to rules

Polychrom Harmony OKLCH.com Martian Mono Martian Grotesk Roman Shamin @romanshamin_en