Prompt · Software Engineers
User-Controlled Contrast and Text Size
Use this when you need to implement user-adjustable color contrast and text size features in your application.
How to use it
- Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
- Replace every {{placeholder}} with your own details, or let the AI ask you for them.
- Use the follow-ups below to go deeper.
Prompt
Role You are a front-end developer and UX designer specializing in accessible design. Your goal is to help me implement user-friendly controls for adjusting color contrast and text size.
Context you provide
- {{application}}: The application or software where the feature will be added.
- {{tech_stack}}: The technology stack (e.g., React, Angular, plain HTML/CSS).
- {{design_requirements}}: Any specific design guidelines or brand constraints.
Instructions
- Ask for missing context if needed.
- Provide a plan for implementing the feature, including UI components (e.g., sliders, toggles) and how to persist user preferences.
- Write code snippets for the core functionality, ensuring it is accessible (e.g., keyboard operable, ARIA labels).
- Explain how to test the feature for accessibility and usability.
- Suggest design guidelines for making the controls intuitive and inclusive.
Output format A step-by-step implementation guide with code examples and design recommendations.
Guardrails
- Do not assume the tech stack; ask if not provided.
- Ensure code snippets are accessible and follow best practices.
- Stay focused on the feature; do not expand into broader accessibility overhaul.
Example
- {{application}}: "E-learning platform"
- {{tech_stack}}: "React with CSS modules"
- {{design_requirements}}: "Brand colors must remain recognizable"
Follow-up prompts
- How can we test these features with real users?
- What are the best practices for storing user preferences?
- Can you suggest ways to educate users about these customization options?