# Updating Navigation Bar Assets for Accessibility Compliance

According to the European Accessibility Act (EAA) and the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA, interactive elements such as navigation bar icons must meet minimum touch target sizes to ensure usability for all users, including those with motor impairments.

iOS recommendation: 44 × 44
Android recommendation: 48 × 48

Since our product uses a unified layout for both iOS and Android, we will adopt the 48 px standard as the baseline.

:::note Current State
Asset size: 40 × 40 px

Navigation height: 56 px

Padding: 8 px (top and bottom) → total height = 40 + 16
:::

## Instructions

**1. Increase Asset Dimensions**

Update asset size to 48 × 48 @3x (144 × 144 pixels).

Keep the icon graphic itself at 24 px to maintain proper scale.

:::note Important
Check Asset Quality
Ensure assets fit the new size (they should be exported at a resolution of three times the standard pixel density – @3x). Replace any assets that become pixelated when scaled.
:::

**2. Adjust Navigation Padding**

Reduce left, right, top, and bottom padding to 4 px.

![](./images/1.png)

**3. Handle Multiple Buttons**

For screens with multiple buttons, remove gutters and set spacing to 0 px.

![](./images/2.png)

**4. Align Logo Heights**

For consistency, ensure the logo height matches the new button height (48 px).

**5. Title Area Adjustments**

On inner screens, left-align titles.

Increase title area spacing from 8 px to 16 px to ensure the title/logo aligns with components (which by default have 20 px padding).

![](./images/New%20Project.png)