# Status bar content color visible against background

- **Pattern:** `ab-001965` (`mobile-ux-patterns.layout-safe-areas.status-bar-contrast`)
- **Severity:** low
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001965
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001965)

## Why it matters

Status bar icons and clock rendered at insufficient contrast against the app background fail WCAG 2.2 SC 1.4.3 (Contrast Minimum) and SC 1.4.11 (Non-text Contrast), both of which apply to UI component contrast. In practice, light icons on a white header or dark icons on a dark screen become invisible — users lose time reference, network status, and battery indication. Apps that support both light and dark themes but hardcode a single `barStyle` will fail on exactly one theme for every user, creating a systemic failure that is easy to reproduce and difficult to miss in App Store review. The fix takes one line but its absence signals that light/dark support was never tested end-to-end.

## Severity rationale

Low because the status bar is ambient UI — invisible icons degrade experience and violate WCAG 1.4.3/1.4.11 but do not block task completion or expose data.

## Remediation

Drive `barStyle` dynamically from your active theme rather than hardcoding it. In `app/_layout.tsx` or your root `App.tsx`, read the current color scheme and set the bar style accordingly.

```tsx
import { StatusBar } from 'react-native';
import { useColorScheme } from 'react-native';

export default function RootLayout() {
  const scheme = useColorScheme();
  const isDark = scheme === 'dark';

  return (
    <>
      <StatusBar
        barStyle={isDark ? 'light-content' : 'dark-content'}
        backgroundColor={isDark ? '#121212' : '#ffffff'}
      />
      <Slot />
    </>
  );
}
```

Test on a physical device in both system themes — simulators do not always reproduce contrast failures accurately. If your app overrides the system theme, ensure the `barStyle` toggles in sync with your in-app theme state, not the OS setting.

## Detection

- **ID:** `status-bar-contrast`
- **Severity:** `low`
- **What to look for:** Count all `StatusBar` component usages. For each, quote the actual `barStyle` value and `backgroundColor` value. Compare against the app's background color to determine contrast.
- **Pass criteria:** At least 1 StatusBar configuration exists. `barStyle` is set to `"dark-content"` when the app background is light (white, light gray, etc.) or `"light-content"` when the app background is dark. Icons and text have sufficient contrast with the background behind them.
- **Fail criteria:** Status bar icons or text are the same color as (or very similar to) the background, making them invisible or very hard to read. Do NOT pass when `barStyle` is hardcoded but the app supports both light and dark themes without switching the barStyle dynamically.
- **Skip (N/A) when:** The app uses default status bar styling without any `StatusBar` component or configuration.
- **Detail on fail:** Quote the actual barStyle and background. `"StatusBar has light icons (barStyle='light-content') but the app background is light gray — icons are nearly invisible."` or `"Dark icons configured but app theme is dark, reducing visibility."`
- **Remediation:** Set StatusBar contrast appropriately based on app background:

  ```tsx
  import { StatusBar } from 'react-native';

  export default function App() {
    const isDarkTheme = useAppTheme().isDark;

    return (
      <>
        <StatusBar
          barStyle={isDarkTheme ? 'light-content' : 'dark-content'}
          backgroundColor={isDarkTheme ? '#1a1a1a' : '#ffffff'}
        />
        <Navigation />
      </>
    );
  }
  ```

  Best practice:
  - Use `barStyle="dark-content"` (dark icons) when the app background is light
  - Use `barStyle="light-content"` (light icons) when the app background is dark
  - Test on actual devices to verify visibility

## External references

- wcag 1.4.11
- wcag 1.4.3

Taxons: user-experience, accessibility

HTML version: https://auditbuffet.com/patterns/ab-001965