Contrast Ratio
AccessibilityA measurement of the luminance difference between foreground and background colors, expressed as a ratio (e.g., 4.5:1), determining text readability and accessibility compliance.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Contrast Ratio coming soon.
How It Works in Apps/Websites
Contrast ratio is calculated by comparing the relative luminance of two colors. WCAG guidelines require: 4.5:1 for normal text, 3:1 for large text (18px+ bold or 24px+ regular), and 3:1 for UI components. Higher ratios mean better readability. White on black is 21:1 (maximum), while similar colors have ratios close to 1:1.
How AI Interprets This Term
When you say 'contrast ratio', AI understands this as a numerical measure of color accessibility. Will consider: dark text on light backgrounds (or vice versa), avoiding low-contrast combinations like light gray on white, and ensuring text remains readable.
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Ensure text meets WCAG contrast requirements
Design a color system with accessible contrast: primary text #1a1a1a on white (ratio 16:1), secondary text #6b7280 on white (ratio 5.3:1), placeholder #9ca3af on white (minimum 4.5:1). Include contrast ratios for dark mode equivalents.
Show the same text at different contrast ratios: failing (2:1), AA compliant (4.5:1), AAA compliant (7:1)
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
Usage Guidelines
When to Use
- •All text content
- •Important UI elements
- •Icons and graphics
- •Focus indicators
When NOT to Use
- •Decorative elements
- •Disabled states (though still should be visible)