القائمة
WCAG contrast ratios, non-text contrast, and color-blind-safe patterns for mobile UI. Use this when designing palettes, tokens, or auditing a screen for color accessibility.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | contrast-and-color |
| description | WCAG contrast ratios, non-text contrast, and color-blind-safe patterns for mobile UI. Use this when designing palettes, tokens, or auditing a screen for color accessibility. |
Contrast failures are the single most common accessibility bug in mobile apps. Treat color decisions as engineering decisions with measurable acceptance criteria.
| Content | Minimum ratio |
|---|---|
| Body text (< 18pt regular, < 14pt bold) | 4.5:1 |
| Large text (>= 18pt regular or >= 14pt bold) | 3:1 |
| Icon / graphical UI component | 3:1 (1.4.11) |
| Focus indicator outline | 3:1 vs adjacent colors |
| Disabled states | Exempt from 1.4.3 but still should aim for 3:1 where possible |
For AAA (optional), raise body text to 7:1 and large text to 4.5:1.
Do the math once, at the design-token layer; do not eyeball it per screen.
// utility — WCAG relative luminance
fun luminance(c: Color): Double {
fun ch(x: Float): Double {
val v = x.toDouble()
return if (v <= 0.03928) v / 12.92 else Math.pow((v + 0.055) / 1.055, 2.4)
}
return 0.2126 * ch(c.red) + 0.7152 * ch(c.green) + 0.0722 * ch(c.blue)
}
fun contrast(a: Color, b: Color): Double {
val la = luminance(a); val lb = luminance(b)
val (hi, lo) = if (la > lb) la to lb else lb to la
return (hi + 0.05) / (lo + 0.05)
}
require(contrast(Tokens.onSurface, Tokens.surface) >= 4.5)
Add a unit test that fails if a token pair drops below threshold.
Pair color with a second cue:
SwiftUI status chip:
Label {
Text("Payment failed")
} icon: {
Image(systemName: "exclamationmark.octagon.fill")
}
.foregroundStyle(.red)
.accessibilityLabel("Error. Payment failed.")
Roughly 1 in 12 men and 1 in 200 women have some color vision deficiency (CVD). The three concerns:
Safe strategies:
Low-contrast disabled text is tempting visually but confuses everyone.
Focus outlines, selection highlights, and progress bars must contrast 3:1 against the surrounding color — in both themes.
// SwiftUI
.overlay(
RoundedRectangle(cornerRadius: 8)
.stroke(isFocused ? Color.accentColor : .clear, lineWidth: 2)
)
// Compose
Modifier.border(
width = 2.dp,
color = if (isFocused) MaterialTheme.colorScheme.primary else Color.Transparent,
shape = RoundedCornerShape(8.dp)
)
#000 backgrounds with pure #FFF text create "halation" for astigmatism users. Prefer #121212 with #E6E6E6.#121212.Honor user overrides:
UIAccessibility.isDarkerSystemColorsEnabled (Increase Contrast). Provide a higher-contrast variant of your token set.Settings.Secure.high_text_contrast_enabled — rendered automatically by the system for text, but still test custom drawables.@Environment(\.accessibilityShowButtonShapes) private var showButtonShapes
// render bordered buttons when true
Color.red semantic meaning without a non-color backup.Labels, errors, grouping, and autofill for mobile forms. Use this when building any screen that collects user input — login, signup, checkout, profile editing.
Announcing validation results, shaping error messages, and recovering focus. Use this when implementing client-side validation or async server-side errors in forms.
POUR (Perceivable, Operable, Understandable, Robust) principles translated to mobile contexts. Use this when kicking off a new feature or doing an accessibility triage of an existing screen.
WCAG 2.2 success criteria translated to mobile platforms — gestures, inputs, orientation, focus, and target size. Use this when scoping accessibility acceptance criteria for a mobile feature.
Keyboard, D-pad, and hardware-switch support on iOS (Full Keyboard Access), Android, Flutter, and React Native. Use this when building screens that must be usable without touch.
Supporting iOS Switch Control + Voice Control, Android Switch Access + Voice Access, and AssistiveTouch. Use this when building any interactive UI, especially custom gestures, drag-and-drop, or non-standard controls.