Sign In

Accessible SwiftUI Color Palette Checker

Check WCAG contrast ratios and instantly export accessible color variables for SwiftUI.

Accessibility Contrast Checker

PREVIEW CANVAS
The quick brown fox

Large Text (24px+ or 18px bold)

Jumps over the lazy dog. This text represents standard body copy. WCAG guidelines require a higher contrast ratio for normal text because it is smaller and more difficult to read. Ensuring proper contrast isn't just about compliance—it's about building a better, more inclusive web.

Normal Text (16px)

extension Color {
  static let customBackground = Color(hex: "#3B82F6")
  static let customForeground = Color(hex: "#FFFFFF")
}

WCAG 2.1 Results

3.68 : 1
Normal AA
Req: 4.5:1
Large AA
Req: 3.0:1
Normal AAA
Req: 7.1:1
Large AAA
Req: 4.5:1

Color Configuration

Why SwiftUI Color Accessibility Matters

Ensuring that your application's text is legible against its background is not just a UX best practice—it's often a strict legal requirement. The Web Content Accessibility Guidelines (WCAG) 2.1 define precise mathematical contrast ratios that digital products must meet to accommodate users with low vision, color blindness, or age-related visual impairments.

When building digital interfaces, designers often rely on intuition to determine if a color combination "looks right." However, human perception is highly subjective and easily fooled by surrounding colors. This tool eliminates guesswork by calculating the exact relative luminance of your chosen colors to guarantee mathematical compliance, and then instantly exports the exact SwiftUI color definitions you need to safely theme your app.

Understanding WCAG 2.1 Contrast Ratios

The WCAG standards categorize text into two distinct sizes, applying different contrast requirements to each. Normal text (typically 16px or smaller) is harder to read, so it requires a higher contrast ratio of 4.5:1 for Level AA compliance, and 7.1:1 for the stricter Level AAA compliance.

Large text (defined as 18pt regular, or 14pt bold and above) is inherently easier to read. Therefore, the WCAG guidelines relax the requirement to 3.0:1 for Level AA and 4.5:1 for Level AAA. Our cross-platform accessibility tool calculates both of these thresholds simultaneously so you can be absolutely certain your UI passes before writing a single line of code.

SwiftUI, Dynamic Type, and Color Accessibility

Apple's Human Interface Guidelines (HIG) heavily emphasize accessibility, dynamic type, and support for system-wide features like Dark Mode. SwiftUI allows developers to define custom colors via the Color struct, but initializing a Color directly from a hex string requires a custom extension, as the native initializer only accepts RGB float values between 0.0 and 1.0.

This generator bridges that gap. Once you verify your contrast ratios pass the necessary WCAG thresholds, the tool outputs an elegant Color extension struct written in Swift. This gives your iOS app immediate access to statically typed, strictly accessible colors (e.g., Color.customBackground) without the hassle of manually converting your hex codes to RGB float values.

Related Tools