Color Contrast Checker for Mobile Apps and iOS

WCAG color contrast requirements apply to mobile apps — not just websites. App Store review does not currently reject apps for contrast failures, but accessibility guidelines from both Apple (HIG) and Google (Material Design) align with WCAG AA. If your app is used by enterprise or government clients, contrast compliance may be contractually required. Here is how to check it.

Does WCAG apply to iOS and Android apps?

WCAG 2.1 was written for web content, but its principles are applied to mobile apps through several frameworks:

• Apple Human Interface Guidelines recommend a minimum contrast ratio of 4.5:1 for text — matching WCAG AA exactly
• Google Material Design specifies a minimum 4.5:1 contrast ratio for body text and 3:1 for large text — also matching WCAG AA
• Section 508 (US federal law) applies to mobile apps used by federal agencies and their contractors, using WCAG 2.0 Level AA as the standard
• EN 301 549 (EU accessibility standard) covers mobile apps and references WCAG 2.1 AA

In practice: if you are building a consumer app, contrast compliance is best practice. If you are building for enterprise, government, or healthcare clients, it is often required.

How to check contrast ratios for your mobile app UI

The WildandFree Color Contrast Checker works in any browser, including Safari on iPhone and Chrome on Android. To check a color pair from your app design:

1. Identify the foreground color (text, icon) and background color from your design file or app screenshot
2. Open the contrast checker
3. Enter the foreground hex code in the first field
4. Enter the background hex code in the second field
5. The tool shows the contrast ratio and pass/fail results for all four WCAG criteria instantly

For common mobile UI patterns, the pairs you should check include: body text on card background, placeholder text on input field background, icon color on button background, and tab bar labels against the tab bar background.

Sell Custom Apparel — We Handle Printing & Free Shipping

WCAG contrast requirements for mobile UI — quick reference

Element	Minimum ratio (AA)	Target ratio (AAA)
Body text (under 18pt / 24px)	4.5:1	7:1
Large text (18pt+ / 24px+ regular, 14pt+ bold)	3:1	4.5:1
UI components (button borders, input borders)	3:1	No AAA requirement
Icons that convey meaning	3:1	No AAA requirement
Placeholder text	4.5:1 recommended	Treat as body text

On mobile, text tends to render smaller than on desktop because screen density varies. A 16px font on a 1x desktop screen is readable, but on a high-DPI phone it may render at an effective visual size closer to 12pt depending on device settings. When in doubt, target higher ratios than the minimum.

Dark mode contrast — extra considerations for mobile

Most mobile apps now support both light and dark mode. This doubles the number of color pairs you need to check — every text and UI element needs to pass contrast in both themes.

Common dark mode mistakes:

• Using pure white on dark surfaces — #FFFFFF on #121212 gives a ratio of 18.1:1, which is technically fine but causes eye strain. Many design systems recommend off-white (#E8E8E8 or similar) at 15:1 to reduce glare
• Reusing light mode secondary text color — a gray that works on white (#767676 on #FFFFFF = 4.5:1) fails completely on dark backgrounds (#767676 on #121212 = 4.7:1 — barely passes, but common gray variants fail)
• Assuming brand colors work in both modes — a brand blue that passes on white may fail on a dark surface. Check both

Use the contrast checker to verify each color pair for both your light and dark theme.

Frequently Asked Questions

Does WCAG apply to native mobile apps?

WCAG was written for web content, but Apple HIG and Google Material Design both align with WCAG AA contrast ratios. For apps used by US federal agencies or contractors, Section 508 requires WCAG 2.0 AA compliance. For EU markets, EN 301 549 applies WCAG 2.1 AA to mobile apps.

How do I check color contrast on an iPhone?

Open Safari on your iPhone and go to the WildandFree color contrast checker. Enter your foreground and background hex codes to see the contrast ratio and WCAG pass/fail results. The tool works fully in Safari on iOS — no app or extension required.

What contrast ratio does Apple require for iOS apps?

Apple's Human Interface Guidelines recommend a minimum 4.5:1 contrast ratio for text, matching WCAG AA. Apple does not currently reject apps in App Store review for contrast failures, but accessibility compliance is required for apps used by enterprise and government clients.