Wikimedia Foundation × Pratt · iOS · Accessibility audit · 2026

When glass gets in the way.

Apple’s new Liquid Glass design puts see-through menus over everything you read. It looks sleek, but it can make Wikipedia harder to use. Our team tested the Wikipedia iOS app against the WCAG 2.1 and 2.2 accessibility standards to find out where.

I was one of five researchers on the team. I helped run the audit and the walkthroughs, and I designed fixes the Wikimedia engineers could actually ship.

HIERARCHY WIREFRAME WIREFRAME LINT CACHE FOCUS HOVER TOKENS 918794818 WIREFRAME FALSE 318 798 FIGMA TEST CLIENT => HOOKS ITERATION GRID DEBUG UI ASYNC PYTHON PUSH ASYNC 515 489
BUILD RETURN WIREFRAME RESEARCH KERNING 918794818 FRAMEWORK BACKLOG SQL COMPILE ALGORITHM UI VARIABLE REACT SCHEMA [] HTML FRAMEWORK FALSE SCHEMA LAYOUT 493151 8641491 JS RECURSION
SYSTEMS ASYNC REFACTOR 318 798 OUTPUT SYSTEMS COMPILE STATE STATE FIX STRING 318 798 ARRAY ROUTE RECURSION 493151 8641491 WIREFRAME LOOP AWAIT SPRINT VARIABLE 71042 ++ KEY REFACTOR
BOOLEAN CACHE ASYNC || OUTPUT SCROLL USABILITY CLIENT RESEARCH PYTHON RENDER ++ REFACTOR ASYNC 454545 BASELINE VARIABLE HIERARCHY ROUTE HOOKS ASYNC QUERY TYPOGRAPHY LEADING TYPE
TEST AUTH MODAL TOKENS USABILITY AUTH SYSTEMS AUTH ALGORITHM REACT ITERATION NULL REACT UI CACHE EM && QUERY ACCESSIBILITY MERGE 318 798 COMPILE <> 318 798 JS AWAIT SPACING REACT 1
DEBUG 318 798 318 798 CLASS 519 491 319 48 ARIA INTERFACE KERNING AUTH && GIT 71042 UI FIGMA JS 519 491 319 48 BASELINE FRAMEWORK LINT WIREFRAME BASELINE LATENCY NULL 454545
HIERARCHY FRAMEWORK ITERATION 454545 TYPE FALSE PROTOTYPE API QUEUE COMPILE 493 151 864 1491 FIX DEBUG RENDER FALSE JSON BASELINE CLIENT TRUE 493151 8641491 JSON FIX INPUT RECURSION
LEADING 71042 ASYNC RETURN SYSTEMS UI HOVER 493 151 864 1491 318 798 454545 STACK CLIENT SYSTEMS 493 151 864 1491 SERVER GIT API BRANCH WIREFRAME KERNING LEADING LAYOUT UX COMPONENT
() FIGMA PYTHON ROUTE UI ASYNC CACHE BACKLOG INPUT 493151 8641491 STACK UX PROPS INTERFACE SERVER 493 151 864 1491 318 798 VARIABLE 318 798 WIREFRAME JS UX FOCUS ARIA SPACING
OUTPUT 493 151 864 1491 493 151 864 1491 918794818 BRANCH 520 318 798 UI MODAL 318 798 SCROLL FIGMA DEBUG ARIA WIREFRAME ROUTE LATENCY HOVER MERGE REFACTOR COMMIT CLIENT CSS REACT
LEADING 520 741 8 HIERARCHY STACK NULL SET ALGORITHM 520 318 798 493151 8641491 SERVER ASYNC DEPLOY QUERY ASYNC 318 798 SYSTEMS GIT 318 798 SPRINT BASELINE FUNCTION GRID
SYSTEMS 493 151 864 1491 318 798 KERNING STACK DEPLOY BACKLOG /> UI GRID AUTH AWAIT RETURN STACK CLIENT FIGMA 519 491 319 48 REFACTOR PIXEL TYPE 493 151 864 1491 QUERY AWAIT HTML
() LOOP ACCESSIBILITY UX LET COMPONENT FUNCTION NULL ASYNC USABILITY VARIABLE STACK RECURSION LAYOUT SYSTEMS MERGE // NULL TOKENS TYPE FLEXBOX PYTHON FALSE 918794818 493151 8641491
BACKLOG // LAYOUT LATENCY 520 VARIABLE DEPLOY ITERATION CSS GRID CONTRAST STATE DEBUG CSS AUTH SERVER CSS 520 AUTH QUEUE FALSE 318 798 NULL TEST DEBUG TYPE PROPS LAYOUT CACHE ASYNC
REFACTOR 520 PUSH SYSTEMS SCHEMA INTERFACE AUTH QUERY BACKLOG RETURN VARIABLE API COMPILE 515 489 520 741 8 318 798 DEPLOY 493151 8641491 FIGMA COMPILE UI ID ASYNC COMPONENT
HIERARCHY BUILD ARIA WIREFRAME PIXEL /> ARIA API 318 798 <> CACHE PIXEL DEPLOY GRID API JS 493 151 864 1491 PROTOTYPE CACHE SCHEMA CLIENT BACKLOG 519 491 319 48 318 798 FRAMEWORK />
DEPLOY IXD && 515 489 SCHEMA RENDER UI IXD MERGE 10 493151 8641491 PROPS 318 798 BOOLEAN CLIENT CONTRAST QUEUE UX RECURSION REACT TEST DEPLOY 918794818 LINT 520 /> 520 REACT
API SPRINT DO DEPLOY CLIENT RESEARCH DEBUG ACCESSIBILITY UI HTML VARIABLE BRANCH SCROLL COMPILE FRAMEWORK OUTPUT SERVER BOOLEAN RESEARCH 520 REM COMPONENT 318 798 MODAL BOOLEAN AUTH
ROUTE BACKLOG FUNCTION CSS BACKLOG AWAIT ROUTE BACKLOG CSS JSON IXD PYTHON KERNING 519 491 319 48 520 741 8 DEPLOY 918794818 LINT HTML INT AUTH BUG DEBUG 515 489 TOKENS COMPONENT
TYPE BUG QUERY INTERFACE REFACTOR QUERY 515 489 TRUE BACKLOG QUERY ASYNC DEBUG KERNING TYPOGRAPHY DEPLOY STATE HTML RECURSION SPACING 454545 71042 318 798 LATENCY INTERFACE WIREFRAME
UI UI ARRAY CLIENT GRID 318 798 CACHE BACKLOG AUTH AWAIT TRUE GRID SCHEMA RESEARCH COMPONENT LAYOUT LATENCY ACCESSIBILITY 318 798 454545 493 151 864 1491 INT CLIENT PYTHON TRUE
ROUTE SYSTEMS API 493151 8641491 493 151 864 1491 493151 8641491 LEADING TEST SQL ID LATENCY BUG 519 491 319 48 LOOP SPACING HOVER 1 318 798 RECURSION CLIENT ASYNC ACCESSIBILITY
TRUE SCROLL FIGMA SERVER FOCUS HTML MODAL MODAL ITERATION VARIABLE 493151 8641491 // LEADING BOOLEAN QUERY FLEXBOX CONTRAST TOKENS RENDER INTERFACE ROUTE INPUT STATE LEADING
520 741 8 UI SYSTEMS GRID TYPE HIERARCHY AUTH CLASS AUTH 515 489 454545 JSON RECURSION 318 798 HTML MODAL KERNING UI LATENCY HOVER 520 HIERARCHY MERGE RESEARCH 493 151 864 1491
TYPE 318 798 515 489 HIERARCHY BASELINE INTERFACE CONTRAST HOOKS PYTHON 918794818 LOOP VARIABLE 01 318 798 CACHE ARRAY API PROPS HOVER STRING BACKLOG 01 AUTH 520 MODAL SPACING PIXEL
515 489 BUILD JSON INT STACK FRAMEWORK INTERFACE PYTHON [] INTERFACE FRAMEWORK SPACING CONTRAST PUSH IXD OUTPUT ITERATION CLIENT STRING PYTHON 493151 8641491 NULL OUTPUT
493151 8641491 SYSTEMS PIXEL ROUTE HTML LAYOUT PUSH FRAMEWORK STRING REFACTOR 520 520 INT 318 798 AUTH STATE QUERY FALSE FIGMA UI ROUTE DEPLOY FOCUS BOOLEAN 454545 BASELINE BOOLEAN
ITERATION 493 151 864 1491 FALSE FRAMEWORK 519 491 319 48 454545 HOVER 519 491 319 48 AUTH PUSH WIREFRAME COMMIT 493 151 864 1491 SCHEMA COMMIT JSON JS COMPILE 318 798 918794818 UI
VARIABLE ARRAY SERVER AUTH MERGE PYTHON BUILD 493151 8641491 STATE MERGE HTML VARIABLE 318 798 ROUTE QUERY 318 798 STACK 318 798 BACKLOG 493151 8641491 493151 8641491 FLEXBOX
LINT CLASS TYPOGRAPHY JSON SQL LAYOUT ARRAY ASYNC STRING IXD QUERY CONTRAST TYPOGRAPHY CLASS STACK GIT () HIERARCHY MODAL OUTPUT STACK RESEARCH INTERFACE SCHEMA AWAIT LATENCY JSON
USABILITY ACCESSIBILITY COMPONENT TOKENS FLEXBOX 454545 AUTH JS 493151 8641491 KERNING FALSE 493151 8641491 TOKENS SCROLL REFACTOR 519 491 319 48 520 STRING SPACING VARIABLE
FIX CONTRAST 454545 TYPOGRAPHY 520 AUTH GIT HOVER 493 151 864 1491 SCHEMA HOVER COMPILE SYSTEMS 918794818 493151 8641491 318 798 REACT SCHEMA RECURSION PUSH QUERY ASYNC WIREFRAME
493 151 864 1491 => CLASS LEADING ACCESSIBILITY BUILD 493151 8641491 STACK SCHEMA QUERY SCHEMA ARIA WIREFRAME LATENCY VARIABLE DEPLOY ASYNC OUTPUT KERNING ID BOOLEAN GIT 918794818
INT AUTH 493151 8641491 AWAIT BRANCH SET CACHE PIXEL BACKLOG STACK 520 741 8 BACKLOG TOKENS INTERFACE ROUTE JSON 493151 8641491 INPUT SCHEMA BUILD SQL 10 REFACTOR DEPLOY USABILITY
CLIENT API 515 489 LAYOUT WIREFRAME 454545 REACT INTERFACE STACK GRID REFACTOR CACHE PUSH PROTOTYPE PUSH COMMIT RESEARCH 493151 8641491 RESEARCH MODAL ASYNC NULL RENDER DEBUG
HOVER SQL CACHE RECURSION PUSH IXD API ROUTE 493151 8641491 AUTH 318 798 BACKLOG PROTOTYPE BOOLEAN FALSE CLIENT LAYOUT API 493151 8641491 STATE ROUTE REACT VARIABLE COMPONENT JS
ASYNC RENDER 515 489 SCROLL STATE UX BRANCH JSON RENDER TRUE KERNING SPACING CLASS SYSTEMS ITERATION SPRINT OUTPUT ACCESSIBILITY SCHEMA HTML SCHEMA QUERY LINT QUEUE CLIENT 318 798
GRID HTML 519 491 319 48 STRING FUNCTION SPRINT FIGMA KERNING BUILD ITERATION /> COMPILE QUEUE LATENCY COMPILE LET // DEPLOY SPACING IF ROUTE SCHEMA BASELINE RESEARCH KERNING 318 798
CLIENT JSON () FIGMA PIXEL 493 151 864 1491 TYPE 520 918794818 BASELINE MODAL TYPOGRAPHY SQL HTML SCROLL STACK GRID PUSH FIX JSON JS AUTH SERVER <> BUG SET 10 HOVER BUILD RESEARCH
CACHE REACT PROPS JS PUSH REFACTOR 454545 STACK QUERY TYPOGRAPHY JSON TYPOGRAPHY TYPE BOOLEAN SET PUSH TRUE 520 493 151 864 1491 520 741 8 OUTPUT CLIENT 71042 918794818 RECURSION />
QUERY PYTHON ARIA SCHEMA RETURN PYTHON PYTHON USABILITY 318 798 SERVER BRANCH FALSE 918794818 FIGMA SPACING PIXEL OUTPUT COMPONENT 493 151 864 1491 GRID HOVER UX UI HIERARCHY 515 489
454545 493151 8641491 RENDER RESEARCH RECURSION ACCESSIBILITY SPACING ASYNC REFACTOR PROPS 493151 8641491 LET 515 489 493 151 864 1491 HOVER 318 798 FOCUS DEBUG ASYNC API
PUSH UX ARIA 918794818 FRAMEWORK STRING TOKENS RENDER HOVER DEBUG INTERFACE 318 798 LATENCY LET BASELINE UI RETURN INPUT 493 151 864 1491 PROTOTYPE 71042 STRING WIREFRAME LOOP QUERY
CLIENT ARIA GIT 493 151 864 1491 ITERATION /> BUILD FUNCTION RECURSION 520 COMMIT SCHEMA 318 798 COMPONENT COMPONENT FOCUS BUG CLASS UX 515 489 TEST KERNING SPRINT 520 BASELINE HTML
USABILITY 318 798 RETURN 318 798 RESEARCH DEBUG VARIABLE PUSH GIT 454545 LET STATE BUILD ACCESSIBILITY REACT CLASS USABILITY ROUTE IXD TYPOGRAPHY QUEUE REFACTOR TYPOGRAPHY LEADING
HOVER ACCESSIBILITY ROUTE USABILITY MODAL ID RESEARCH ASYNC OUTPUT RESEARCH ARRAY PYTHON MERGE SCHEMA TYPE DEBUG LINT CLASS ARIA VARIABLE REACT ARRAY USABILITY TYPE SQL ASYNC STATE
BOOLEAN IXD LEADING LEADING STATE GIT SCROLL TYPE 318 798 CACHE 493 151 864 1491 CONTRAST LET FALSE 493 151 864 1491 MODAL COMMIT QUERY AUTH CLIENT COMPONENT 318 798 NULL
VARIABLE PYTHON CACHE CACHE ALGORITHM 520 JSON BUILD MODAL LAYOUT SYSTEMS LAYOUT 318 798 BUILD RENDER 318 798 RENDER FUNCTION AWAIT HTML HIERARCHY TYPOGRAPHY VARIABLE COMPILE
AUTH INTERFACE CACHE BOOLEAN 520 918794818 BASELINE 318 798 318 798 TYPOGRAPHY 493 151 864 1491 INT LEADING RESEARCH GRID VARIABLE 71042 520 ACCESSIBILITY 493151 8641491 MODAL ASYNC
INTERFACE LEADING 318 798 ITERATION 520 741 8 <> ASYNC <> WIREFRAME 493 151 864 1491 REACT SCHEMA TRUE CSS MERGE IXD SCHEMA CLIENT TYPOGRAPHY INPUT GIT SERVER LINT AUTH LINT
TOKENS SPRINT RECURSION KERNING TEST BUG RETURN 493 151 864 1491 QUEUE PYTHON BUG 318 798 // 318 798 ITERATION ITERATION CLIENT <> STACK SYSTEMS VARIABLE JSON 318 798 UX 918794818
TYPOGRAPHY HOOKS PUSH OUTPUT NULL FOCUS CONTRAST HIERARCHY 918794818 LOOP RECURSION USABILITY DEPLOY BUG UI RECURSION EM 1 WIREFRAME /> /> COMPILE 493151 8641491 REFACTOR UX RENDER
493151 8641491 493 151 864 1491 ALGORITHM FIX FIGMA ALGORITHM BACKLOG 520 PUSH DEPLOY QUEUE ASYNC BASELINE CLASS 918794818 BASELINE CLIENT SERVER SPACING FOCUS TOKENS GRID 520 741 8
LEADING CONTRAST DEBUG CLIENT 493 151 864 1491 USABILITY 493 151 864 1491 JS BRANCH ROUTE LET INT CLASS BRANCH 10 REFACTOR TOKENS TRUE () PUSH 515 489 STATE FLEXBOX ARIA VARIABLE
918794818 () ASYNC 454545 UX TYPOGRAPHY BOOLEAN FOCUS 520 741 8 RENDER CLIENT INTERFACE BACKLOG BRANCH AUTH AUTH SPRINT CSS ASYNC 318 798 CSS ROUTE UI BACKLOG VARIABLE SERVER LEADING
TYPOGRAPHY BOOLEAN 493 151 864 1491 SCHEMA STRING TEST HIERARCHY FUNCTION 493151 8641491 493151 8641491 DO VARIABLE 493151 8641491 INPUT LAYOUT LEADING => REFACTOR SPACING () 515 489
ROUTE FIX CACHE LEADING BACKLOG STATE PUSH PYTHON 918794818 RESEARCH ARRAY 318 798 SCHEMA STACK SCROLL RETURN NULL BACKLOG 454545 GIT ASYNC DEPLOY 454545 JS FALSE QUERY CACHE OUTPUT
ASYNC ACCESSIBILITY 520 PYTHON 515 489 REACT 0 PROTOTYPE BACKLOG SCHEMA USABILITY SQL SERVER JS LAYOUT 493151 8641491 INTERFACE LOOP 493151 8641491 REFACTOR INPUT 515 489
71042 ITERATION DEBUG DEPLOY BOOLEAN GRID SPACING RECURSION FALSE ROUTE 493151 8641491 520 JS API 520 318 798 ARIA VARIABLE 918794818 LOOP 918794818 918794818 71042 INPUT IXD LAYOUT
CSS HTML BRANCH MODAL QUEUE LET REACT CSS 318 798 FRAMEWORK VARIABLE PIXEL BACKLOG 519 491 319 48 SCROLL QUEUE OUTPUT 318 798 FLEXBOX FALSE OUTPUT BACKLOG ITERATION 493151 8641491 UX
INTERFACE REFACTOR BUILD HIERARCHY 918794818 INT CACHE INTERFACE LINT JSON REACT 515 489 IXD COMMIT BUG 519 491 319 48 TYPE JS 493 151 864 1491 RESEARCH SPACING HOOKS KERNING && API
REFACTOR HIERARCHY PIXEL CACHE AUTH IXD SCROLL DEBUG STACK CACHE LEADING UI LOOP HIERARCHY QUERY RENDER 0 SCROLL DEPLOY COMPONENT ARIA 520 NULL FRAMEWORK REACT VARIABLE 318 798 FALSE
=> ACCESSIBILITY ALGORITHM ACCESSIBILITY REACT JS AUTH MODAL FALSE SCHEMA 493151 8641491 CLIENT NULL ARRAY FOCUS 519 491 319 48 BASELINE 493151 8641491 FUNCTION PUSH HTML GRID
ITERATION VARIABLE PUSH 318 798 520 HOOKS 318 798 TRUE 520 SPACING DEPLOY FIGMA 520 741 8 USABILITY HTML 520 741 8 QUERY 318 798 918794818 CLIENT 520 741 8 BUILD BACKLOG UX
519 491 319 48 UI SCROLL BUG QUEUE SCHEMA WIREFRAME 519 491 319 48 520 741 8 COMPONENT QUERY TYPE SCHEMA BOOLEAN CLIENT SPACING COMMIT BUILD AUTH AUTH BACKLOG CSS 918794818 520 741 8
MODAL 520 318 798 HTML REACT STATE KERNING RENDER IF JSON MODAL 318 798 HOVER FOCUS CLASS UI [] 493151 8641491 515 489 493 151 864 1491 918794818 BRANCH LINT SPRINT SCROLL FUNCTION
SPRINT CLASS JS BUG FLEXBOX LOOP BUILD TEST BASELINE ARRAY VARIABLE AWAIT HOOKS STATE 493 151 864 1491 CSS ROUTE BASELINE AUTH SET STRING CACHE 493 151 864 1491 TEST ALGORITHM REACT
493 151 864 1491 QUERY CSS 318 798 OUTPUT CACHE GIT PIXEL RETURN IXD DEPLOY 520 318 798 DEBUG DEPLOY LAYOUT WIREFRAME CSS ASYNC PIXEL LET DO 520 741 8 519 491 319 48 493 151 864 1491
493 151 864 1491 CLIENT QUERY 318 798 918794818 515 489 WIREFRAME PIXEL LOOP BACKLOG VARIABLE DEPLOY PYTHON FRAMEWORK DEPLOY ALGORITHM LEADING 918794818 PIXEL 454545 CACHE FIGMA
CLIENT TOKENS INTERFACE 520 API TEST 519 491 319 48 LOOP 493151 8641491 0 FALSE REACT SYSTEMS 520 741 8 => INPUT QUERY TYPE ASYNC RESEARCH KERNING 318 798 REACT LOOP VARIABLE HOVER
USABILITY CACHE QUERY 454545 493151 8641491 UI ASYNC WIREFRAME 493151 8641491 AUTH HOVER RENDER 454545 COMPONENT GRID TYPOGRAPHY ARIA 493151 8641491 API RENDER STATE PROPS ROUTE
BASELINE REACT AWAIT PROTOTYPE UX JS RENDER QUERY 493 151 864 1491 HIERARCHY FRAMEWORK ITERATION SPRINT TEST TRUE RENDER COMPILE LOOP DEPLOY QUEUE JSON 493 151 864 1491 ASYNC
DEBUG UI 318 798 BACKLOG UX FALSE INTERFACE ASYNC SCROLL SQL 71042 520 741 8 DEPLOY CSS AUTH UI JSON TYPOGRAPHY DEPLOY JS SCROLL UI SQL 493 151 864 1491 WIREFRAME HTML ASYNC BACKLOG
NULL SCHEMA TYPOGRAPHY UI FIX BACKLOG 519 491 319 48 HOVER API FLEXBOX 318 798 API STRING FRAMEWORK TYPE MERGE DO 318 798 493151 8641491 REACT KERNING STACK MERGE FLEXBOX WIREFRAME

RoleUX Researcher
& Designer

Team5 UX researchers

MethodsWCAG 2.1/2.2 audit
Cognitive walkthrough
Personas

Timeline4 weeks + shareout
Delivered May 2026

01 — The context

What’s the cost of making something more attractive, but not usable? Accessibility.

Apple rebuilt iOS around Liquid Glass: see-through toolbars, tab bars and menus that float over the page and change brightness as you scroll. The Wikipedia app inherits all of them. Through Pratt, the Wikimedia Foundation asked us one question: can people with low vision, hand tremors, or a need for predictable layouts still read and search?

We audited the app two ways.

We ran two methods side by side, because each covers the other’s blind spot. Scope stayed narrow on purpose: searching for an article, and reading one.

standards-based

WCAG 2.1 / 2.2 audit

Every screen in both flows mapped against 27 success criteria. Catches what fails on paper, regardless of who is using the app.

persona-based

Cognitive walkthrough

Both flows stepped through as Mia and Arun, tap by tap, against seven questions. Catches what a technically compliant screen still gets wrong.

Wk 1Scoping call, personas started, TestFlight set up

Wk 2Audit begins, screens captured

Wk 3Audit + walkthroughs split across the team

Wk 4Findings tiered, deck built

May 12Shareout to Wikimedia

We looked for things such as

FACTOR 01Severity & exclusionDoes it block someone with a disability outright, or add friction along the way?

FACTOR 02Ease of fixA five-minute contrast tweak ranks ahead of a navigation rebuild.

FACTOR 03ReachHow many screens and flows repeat the same failure across the app.

FACTOR 04Persona overlapWhether Mia and Arun both hit it, on their own, in separate walkthroughs.

Together they sort 13 findings into three tiers.

We found 13 accessibility issues.

Every finding carries a tier and the WCAG criterion it fails. The five most urgent get a full redesign below; the complete list, tier by tier, follows them.

27criteria audited

12passed

11failed

3partial

13findings

Five redesigns for the most urgent issues.

Each redesign answers one finding: the criterion it fails, what it costs the reader, and the smallest change that fixes it. The before is the app as shipped; the after is my redesign.

Tier 11.4.1 Use of Color

Hyperlinks Lack Non-Color Differentiation

Before · as shipped

After · bold link weight

The finding

Inline links differ from body text by color alone. Mia’s blurred central vision flattens color cues first, so links disappear into the paragraph.

The redesign

One consistent, heavier weight on every inline link across the app, so links stand out from body text even without seeing color. No underline, no new color: just weight.

How it gets built · CSS

article.cssCSS

/* article theme, applied to every page */
.content a { font-weight: 600; }

Articles render in a web view, so one rule in the shared article stylesheet reaches every inline link at once. Weight scales with Dynamic Type, and no link colors change.

Tier 11.4.11 Non-text Contrast

Icon Stroke Insufficient for Frosted Glass Navigation Bar Overlay

Before · as shipped

After · heavier icon strokes

The finding

Icons in the frosted glass navigation bar are too thin and fall below the 3:1 minimum. The blurred background shifts with whatever scrolls underneath, so contrast fluctuates and key controls get harder to find for people with low vision or cognitive disabilities.

The redesign

A heavier stroke weight on every navigation bar icon, so they stay legible whatever the glass is blurring. A bolder stroke also gives a larger visual target and holds contrast better.

How it gets built · UIKit

Toolbar.swiftSwift

let cfg = UIImage.SymbolConfiguration(weight: .bold)
item.image = icon.applyingSymbolConfiguration(cfg)

The toolbar icons are SF Symbols, so a heavier stroke is a single symbol configuration, not new artwork. One config applied to every toolbar item keeps them consistent.

When glass gets in the way.

What’s the cost of making something more attractive, but not usable? Accessibility.

We audited the app two ways.

WCAG 2.1 / 2.2 audit

Cognitive walkthrough

We found 13 accessibility issues.

Five redesigns for the most urgent issues.

Hyperlinks Lack Non-Color Differentiation

Icon Stroke Insufficient for Frosted Glass Navigation Bar Overlay

No Clear Indicator of Images in Photo Galleries

Search Highlights Hidden Behind the Keyboard

Lack of Single Pointer Equivalent for Search History Options

All 13 findings, by tier.

We delivered the audit to Wikimedia.

What I learned

Two methods beat one.

Write fixes engineers can ship.