App Store Reject

Guideline 4.0

Guideline 4.0 - Design: Insufficient Color Contrast

Low RiskEasyTypical Fix: 2-4 hours0 Reports
Also known as:Light gray text (#CCCCCC) on white backgroundPlaceholder text that is nearly invisible against the input field backgroundButtons with low-contrast borders or fill colorsText over images or gradients without a scrim or shadowDisabled-state styling used for active, interactive elements

Our Take

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.

Resolution Guide

01

**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.


02

**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.


03

**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

    04

    **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.


    05

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


    06

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


    07

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


    Example Rejection Email

    From:Apple App Review Team
    Subject:Guideline 4.0 - Design: Insufficient Color Contrast
    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.

    Consider Appealing

    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.

    Generate Appeal

    Before & After

    Before — Rejected

    // 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 — Approved

    // 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))

    What changed: 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 — Rejected

    // Text on image with no readability protection

    ZStack {

    AsyncImage(url: imageURL) { image in

    image.resizable().scaledToFill()

    }

    Text(caption)

    .foregroundColor(.white)

    }

    After — Approved

    // 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()

    }

    What changed: 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.

    Community Solutions · 0

    Sign in to share your solution.

    More Guideline 4 (Design) rejections

    View all Guideline 4 rejections