Accessibility
Designing Accessible Color Schemes and Contrast Ratios
This prompt helps teams create accessible color schemes that adhere to UI/UX best practices, ensuring designs are inclusive for users with visual impairments. It focuses on optimizing contrast ratios and color combinations for readability and usability.
Responsible:
Product Design
Accountable, Informed or Consulted:
Design, Product, Engineering
THE PREP
Creating effective prompts involves tailoring them with detailed, relevant information and uploading documents that provide the best context. Prompts act as a framework to guide the response, but specificity and customization ensure the most accurate and helpful results. Use these prep tips to get the most out of this prompt:
Review existing color palettes and branding guidelines.
Use accessibility standards like WCAG 2.1 to define minimum contrast requirements.
Gather user feedback or analytics data on readability challenges in the current design.
THE PROMPT
Help create accessible color schemes for [specific product, feature, or platform]. Ensure compliance with accessibility standards by focusing on:
Contrast Ratios: Meeting WCAG guidelines for text and background contrast, especially for small text.
Color Combinations: Avoiding reliance on color alone to convey information (e.g., use patterns or labels alongside color indicators).
Testing: Suggesting tools or methods for testing color contrast, such as online contrast checkers or browser extensions.
Brand Alignment: Balancing accessibility needs with maintaining brand identity and aesthetics.
User Experience: Ensuring that all color choices support usability and visual clarity for all users.
Provide specific recommendations for primary, secondary, and background colors, along with guidelines for text and interactive elements. If additional information about the product’s audience or existing color palette is needed, ask clarifying questions to refine the suggestions.
Bonus Add-On Prompts
Propose accessible alternatives for color combinations in [specific UI element, e.g., buttons, notifications].
Suggest ways to incorporate accessibility improvements without compromising brand identity.
Highlight tools to test color schemes for accessibility compliance.
Use AI responsibly by verifying its outputs, as it may occasionally generate inaccurate or incomplete information. Treat AI as a tool to support your decision-making, ensuring human oversight and professional judgment for critical or sensitive use cases.
SUGGESTIONS TO IMPROVE
Focus on color schemes tailored for specific impairments, such as color blindness.
Include dynamic color mode suggestions, like dark mode or high-contrast themes.
Highlight accessible color schemes for interactive elements, such as hover states and form fields.
Propose adaptive color solutions based on user preferences or device settings.
Add visual examples of compliant and non-compliant color combinations.
WHEN TO USE
During the creation or redesign of a product’s visual identity.
To ensure designs meet accessibility standards for inclusivity.
When improving readability or usability for diverse user groups.
WHEN NOT TO USE
If the product relies on monochromatic or single-tone designs.
When focusing on non-visual design elements like audio or tactile feedback.