Color Palette
Contrast Matrix
Understanding Contrast Ratios
WCAG 2.2 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). Higher ratios (7:1) are required for AAA compliance. The checkmark indicates if the combination meets AA standards.
Color Blindness Simulation
Color Blindness Considerations
About 8% of men and 0.5% of women experience color vision deficiency. When designing, ensure your color choices work for all users by not relying solely on color to convey information. Use patterns, shapes, or text labels alongside color to create more accessible designs.
Gradient Combinations
Gradient Accessibility Tips
When using gradients with text, ensure there's sufficient contrast throughout the entire gradient. Consider adding a semi-transparent overlay to improve text readability or use the gradient for decorative elements only.
Font Size Contrast
Pattern Combinations
Pattern Accessibility Notes
Patterns can help users distinguish between different areas when color alone might not be sufficient. For optimal accessibility, patterns should have sufficient contrast between their elements and maintain a clear visual hierarchy. Patterns that are too busy may be difficult for users with visual or cognitive impairments.