Customizing Appearance and Accessibility

Configure visual preferences and accessibility options to personalize your SupportRetriever experience.

Overview

The Appearance section in Settings lets you customize how the interface looks and functions, with powerful accessibility features for users with different needs.

Accessing Appearance Settings

1. Navigate to Settings from the sidebar
2. Scroll to the Appearance section
3. Adjust any setting to your preference
4. Changes apply immediately and save automatically

Theme Settings

Available Themes

Light Mode

• Bright, cream-colored background
• Dark text for maximum readability
• Traditional daytime interface

Dark Mode

• Dark backgrounds with reduced eye strain
• Light text for comfortable night viewing
• Battery-saving on OLED screens

System (Recommended)

• Automatically matches your device settings
• Switches between light/dark based on time of day
• Seamless experience across devices

How to Change Theme

1. Click the theme you prefer: Light, Dark, or System
2. Interface updates immediately
3. Preference saves to your account
4. Syncs across all your devices

Font Size Options

Adjust text size for comfortable reading across the entire application.

Available Sizes

Size	Base Text	Use Case
Small	14px	Compact view, see more content
Default	16px	Standard web size, balanced
Large	20px	Comfortable reading, easier on eyes
Extra Large	24px	Maximum accessibility, vision assistance

What Gets Scaled

When you change font size, everything scales proportionally:

• All body text and paragraphs
• Headings and titles
• Buttons and form fields
• Navigation and menus
• Conversation messages
• Statistics and charts
• Form labels and inputs

How to Adjust Font Size

1. Click your preferred size: Small, Default, Large, or Extra Large
2. All text throughout the app scales immediately
3. Setting saves automatically
4. Works on all pages (admin, conversations, forms, stats)

Color Vision Modes

Specialized color palettes for users with color blindness or visual preferences.

Available Modes

Standard Colors

• Default SupportRetriever color scheme
• Mint green primary, earth tones
• Works for most users

Protanopia (Red-blind)

• Affects ~1% of males
• Blue/Orange/Purple palette
• Avoids red/green combinations
• Clear distinction between success and errors

Deuteranopia (Green-blind)

• Affects ~1% of males
• Same as Protanopia (Blue/Orange palette)
• Most common form of color blindness
• Optimized for safety and clarity

Tritanopia (Blue-blind)

• Very rare (~0.001% of people)
• Magenta/Teal palette
• Warm vs cool color contrast
• Blue appears gray, so avoided

High Contrast

• Maximum readability for any vision condition
• Meets WCAG AAA standards
• Pure black/white with strong colors
• Helpful for low vision or bright sunlight
• Works in both light and dark themes

How Colors Change

Each mode adjusts:

• Primary action colors (buttons, links)
• Success indicators (completed actions)
• Error messages (warnings, problems)
• Warning notifications (attention needed)
• All UI elements throughout the app

Selecting a Color Mode

1. Click the Color Vision Mode dropdown
2. Choose your preferred mode
3. All colors update immediately
4. Navigate to any page to see the changes
5. Setting syncs across devices

Line Height Adjustment

Control spacing between lines of text for improved readability.

How It Works

• Default: 1.0x spacing (standard)
• Range: 0.8x (tighter) to 1.5x (more spacious)
• Use 0.1 increments for fine-tuning

When to Adjust

Increase line height (1.2x - 1.5x) for:

• Dyslexia or reading difficulties
• Long reading sessions
• Reduced eye strain
• Better focus on individual lines

Decrease line height (0.8x - 0.9x) for:

• Compact view preference
• Seeing more content at once
• Dense information scanning

How to Adjust

1. Drag the Line Height slider left or right
2. See changes in real-time as you drag
3. Release to auto-save
4. Click Reset to return to 1.0x default

Letter Spacing Adjustment

Control spacing between characters for enhanced readability.

How It Works

• Default: 1.0x spacing (standard)
• Range: 0.8x (tighter) to 1.5x (wider)
• Use 0.1 increments for precision

When to Adjust

Increase letter spacing (1.2x - 1.5x) for:

• Dyslexia support
• Character recognition difficulties
• Improved word distinction
• Reduced visual crowding

Decrease letter spacing (0.8x - 0.9x) for:

• Compact text preference
• Fitting more text on screen
• Personal visual preference

How to Adjust

1. Drag the Letter Spacing slider
2. Changes apply instantly
3. Release to save automatically
4. Click Reset to return to default

Combining Settings

All accessibility settings work together for maximum personalization.

Example Combinations

For Maximum Readability:

• Font Size: Extra Large
• Line Height: 1.4x
• Letter Spacing: 1.3x
• Result: Spacious, easy-to-read text

For Dyslexia Support:

• Font Size: Large or Extra Large
• Line Height: 1.3x - 1.5x
• Letter Spacing: 1.2x - 1.4x
• Color Mode: High Contrast (optional)

For Color Blindness:

• Choose appropriate Color Vision Mode
• Combine with any font/spacing preferences
• Works with both light and dark themes

For Compact View:

• Font Size: Small
• Line Height: 0.9x
• Letter Spacing: 0.9x
• See more content, less scrolling

Automatic Saving

All appearance settings:

• Save automatically when changed
• Sync across all your devices
• Persist through logout/login
• Apply before page loads (no flash)
• Work offline (stored locally)

Device Synchronization

Your preferences follow you everywhere:

• Desktop computers
• Mobile phones
• Tablets
• Different browsers (when logged in)
• Public/shared devices (after login)

Accessibility Standards

SupportRetriever's accessibility features comply with:

• WCAG 2.1 (Web Content Accessibility Guidelines)
• Section 508 requirements
• ADA (Americans with Disabilities Act) standards

Specific Compliance

• Font scaling: Up to 150% (WCAG Level AA requirement)
• High contrast: 7:1 text ratio (WCAG Level AAA)
• Color independence: Information not conveyed by color alone
• Keyboard accessible: All controls work without mouse

Testing Your Settings

After changing settings, test on different pages:

1. Admin Dashboard: Check conversation list readability
2. Conversations: Verify message text is comfortable
3. Statistics: Ensure charts and numbers are clear
4. Forms: Test form field visibility
5. Mobile: Check settings work on phone/tablet

Resetting to Defaults

To reset all appearance settings:

1. Theme: Select System
2. Font Size: Select Default
3. Color Mode: Select Standard Colors
4. Line Height: Click Reset button (sets to 1.0x)
5. Letter Spacing: Click Reset button (sets to 1.0x)

Changes apply immediately.

Troubleshooting

Settings Not Saving

Problem: Changes revert after refresh

Solutions:

• Check browser allows localStorage
• Disable private/incognito mode
• Clear browser cache
• Try different browser
• Contact support if persists

Text Too Large/Small

Problem: Can't find comfortable size

Solutions:

• Try Large (20px) as middle ground
• Adjust line height independently
• Use browser zoom as supplement
• Combine with letter spacing

Colors Not Changing

Problem: Color mode seems ineffective

Solutions:

• Check color mode dropdown shows your selection
• Try switching themes (light/dark)
• Refresh the page
• Clear browser cache
• Some elements may not use color indicators

Performance Issues

Problem: App feels slow after changes

Solutions:

• Extra Large font may affect rendering
• Try Large instead of Extra Large
• Reduce line/letter spacing
• Restart browser
• Close unused tabs

Best Practices

For Daily Use

• Start with Default font and adjust if needed
• Use System theme for automatic day/night switching
• Test settings on your most-used pages first
• Give yourself time to adjust to new settings

For Accessibility

• Prioritize readability over fitting content
• Don't hesitate to use Extra Large if needed
• Combine multiple adjustments for best results
• Share settings that work with others who have similar needs

For Teams

• Individual settings don't affect teammates
• Each user has personal preferences
• Recommend settings to team members
• Admin can't override user accessibility choices

Related Topics

• Accessing Settings
• Updating Your Profile
• Understanding Subscription Plans
• Mobile vs Desktop Experience
• Understanding Permissions

Additional Resources

External Tools

• Browser Zoom: Supplement app font sizing
• Screen Readers: Work with all accessibility settings
• Color Blindness Simulators: Test how colors appear
• Operating System Accessibility: Combine with OS features

Learning More

• WCAG Guidelines: w3.org/WAI/WCAG21/quickref
• Color Blindness: Research different types and impacts
• Dyslexia Resources: Typography and readability studies
• Web Accessibility: Best practices and standards