# Guideline 4.0 - Design: Insufficient Color Contrast

**Guideline:** 4.0 · **Store:** Apple App Store · **Risk:** low · **Difficulty:** easy · **Typical turnaround:** 2-4 hours

Canonical URL: https://appstorereject.com/rejections/apple/4/guideline-40-design-insufficient-color-contrast

## Description

Apple flagged your app for insufficient color contrast between text and its background, or between interactive elements and their surroundings. Low contrast makes content difficult to read for users with normal vision and nearly impossible for users with low vision. Apple expects apps to meet accessibility contrast standards, particularly for text, buttons, and form fields.

## Common variations

- Light gray text (#CCCCCC) on white background
- Placeholder text that is nearly invisible against the input field background
- Buttons with low-contrast borders or fill colors
- Text over images or gradients without a scrim or shadow
- Disabled-state styling used for active, interactive elements

## Example rejection email

```
We noticed an issue in your app that contributes to a lower quality user experience than Apple users expect:

- Your app included hard to read type or typography.

Specifically, several screens use light gray text on a white background and light-colored buttons that are difficult to distinguish from the background. This reduces readability and does not meet accessibility expectations. Next Steps: Please revise your app to ensure sufficient color contrast for all text and interactive elements.
```

## Resolution steps

## How to Fix Insufficient Color Contrast

1. **Audit all text colors** — Use Xcode’s Accessibility Inspector (Xcode → Open Developer Tool → Accessibility Inspector) to check contrast ratios across your app. You can also use online tools like WebAIM Contrast Checker.

2. **Meet WCAG AA minimums** — Ensure at least **4.5:1** contrast ratio for normal text (below 18pt) and **3:1** for large text (18pt+ or 14pt bold). Interactive elements need at least **3:1** against their background.

3. **Use semantic system colors** — Replace hardcoded color values with system colors that automatically provide proper contrast:
   - `Color.primary` / `UIColor.label` for primary text
   - `Color.secondary` / `UIColor.secondaryLabel` for secondary text
   - `Color(.systemBackground)` / `UIColor.systemBackground` for backgrounds

4. **Fix text over images** — Add a semi-transparent scrim, shadow, or material blur behind text overlaid on images to guarantee readability regardless of the image content.

5. **Check both light and dark modes** — A color combination that passes in Light Mode may fail in Dark Mode, and vice versa. Test both.

6. **Support Increase Contrast** — Respect the `UIAccessibility.isDarkerSystemColorsEnabled` setting (or `@Environment(\.colorSchemeContrast)` in SwiftUI) and boost contrast when the user has enabled it.

7. **Document your contrast ratios** — In your reviewer notes, mention specific contrast ratios you’ve achieved for key elements.

## Appeal guidance

Do not appeal this rejection — the fix is straightforward and fast. Improving contrast benefits all users and is the right thing to do. Only appeal if you have measured your contrast ratios and they already meet WCAG AA and you believe the reviewer made an error.

## Before / after examples

**Before:** // Low contrast: light gray text on white — ratio ~1.6:1
Text("Important information")
    .foregroundColor(Color(red: 0.8, green: 0.8, blue: 0.8)) // #CCCCCC
    .background(Color.white)
**After:** // High contrast: semantic color — ratio 10:1 in light, 15.7:1 in dark
Text("Important information")
    .foregroundStyle(.primary)    // maps to UIColor.label
    .background(Color(.systemBackground))
**Why it works:** Color.primary / UIColor.label provides near-black text (#000000) in Light Mode and near-white (#FFFFFF) in Dark Mode, both with excellent contrast ratios against their respective system backgrounds.

**Before:** // Text on image with no readability protection
ZStack {
    AsyncImage(url: imageURL) { image in
        image.resizable().scaledToFill()
    }
    Text(caption)
        .foregroundColor(.white)
}
**After:** // Text on image with gradient scrim for guaranteed contrast
ZStack(alignment: .bottom) {
    AsyncImage(url: imageURL) { image in
        image.resizable().scaledToFill()
    }
    LinearGradient(
        colors: [.clear, .black.opacity(0.7)],
        startPoint: .center,
        endPoint: .bottom
    )
    Text(caption)
        .foregroundStyle(.white)
        .padding()
}
**Why it works:** A dark gradient scrim behind white text ensures readable contrast regardless of the underlying image content. The 0.7 opacity black provides roughly a 4.5:1 ratio with white text.

## Common questions

**Can you appeal a 4.0 rejection?**

Do not appeal this rejection — the fix is straightforward and fast. Improving contrast benefits all users and is the right thing to do. Only appeal if you have measured your contrast ratios and they already meet WCAG AA and you believe the reviewer made an error.

**How long does this typically take to fix?**

Typical turnaround is 2-4 hours (difficulty: easy). After resubmission, most re-reviews complete within 24-48 hours.

---
*Machine-readable source: https://api.appstorereject.com/api/rejections/detail?slug=guideline-40-design-insufficient-color-contrast*