Keystone Documentation

Appearance

Accessibility Settings ​

Overview ​

Accessibility Settings help make the Keystone Loyalty Rewards app more usable for merchants with visual impairments or preferences. Adjust display, text size, font weight, and color filters to improve visibility and readability throughout the app.

Accessing Accessibility Settings ​

  1. Open Keystone Loyalty Rewards app
  2. Navigate to Settings > Accessibility Settings

Enable Accessibility Settings ​

Master toggle to enable or disable all accessibility features at once.

Configuration:

  • Toggle Enable accessibility settings ON
  • When enabled, all configured accessibility options take effect
  • When disabled, app returns to default display settings

Use Case: Quickly turn accessibility features on/off without losing your configured settings.

Display & Text Size ​

Bold Font ​

Apply bold font weight to all text throughout the app for improved readability.

Configuration:

  1. Enable accessibility settings
  2. Toggle Bold font ON
  3. All text in app becomes bold immediately

Benefits:

  • Improved text contrast
  • Easier to read at a glance
  • Reduces eye strain
  • Better for users with low vision

When to Use:

  • Difficulty reading standard font weights
  • Need higher text contrast
  • Prefer bolder typography
  • Working in bright environments

Font Size Adjustment ​

Adjust the size of text, icons, and UI elements throughout the app.

Configuration:

  1. Enable accessibility settings
  2. Use Font size adjustment slider
  3. Drag slider left to decrease size
  4. Drag slider right to increase size
  5. Changes apply immediately

Slider Range:

  • Small A (left) = Smaller text
  • Large A (right) = Larger text
  • Default position in middle

What's Affected:

  • All text content
  • Button labels
  • Navigation elements
  • Table headers and data
  • Form fields and labels

Recommendations:

  • Start with default and adjust incrementally
  • Test readability across different pages
  • Consider your typical working distance from screen

Color Blindness Settings ​

Apply color filters to help users with color vision deficiencies distinguish between colors in the app.

Available Filters ​

Off ​

No color filter applied. Default app colors displayed.

Use Case: No color vision deficiency or testing different filter options.

Red/Green Filter (Protanopia) ​

Filter for protanopia (red-blind) color vision deficiency.

Characteristics:

  • Difficulty distinguishing red and green
  • Red appears darker
  • Most common type of red-green color blindness

How It Helps:

  • Adjusts red and green tones for better differentiation
  • Increases contrast between similar colors
  • Makes status indicators more visible

Green/Red Filter (Deuteranopia) ​

Filter for deuteranopia (green-blind) color vision deficiency.

Characteristics:

  • Difficulty distinguishing green and red
  • Green appears more red
  • Common form of red-green color blindness

How It Helps:

  • Adjusts green and red tones
  • Improves color differentiation
  • Enhances UI element visibility

Blue/Yellow Filter (Tritanopia) ​

Filter for tritanopia (blue-blind) color vision deficiency.

Characteristics:

  • Difficulty distinguishing blue and yellow
  • Blue appears green
  • Yellow appears violet or gray
  • Rare form of color blindness

How It Helps:

  • Adjusts blue and yellow tones
  • Improves contrast between cool and warm colors
  • Makes blue UI elements more distinguishable

Gray (Achromatopsia) ​

Filter for achromatopsia (total color blindness) or strong preference for grayscale.

Characteristics:

  • No color perception (complete color blindness)
  • See only shades of gray
  • Very rare condition

How It Helps:

  • Converts entire interface to grayscale
  • Relies on contrast and brightness differences
  • Removes color as differentiating factor

Filter Intensity Adjustment ​

Fine-tune the strength of the selected color filter.

Configuration:

  1. Select a color filter (not available for "Off")
  2. Use intensity slider
  3. Adjust from subtle to strong effect
  4. Changes apply in real-time

Intensity Scale:

  • Lower values = Subtle filter effect
  • Higher values = Stronger filter effect
  • Displayed as decimal (e.g., 1.20)

Recommendations:

  • Start with moderate intensity
  • Increase if colors still hard to distinguish
  • Decrease if filter too strong or distracting
  • Test across different pages and charts

Example:

Filter: Green/Red Filter (Deuteranopia)
Intensity: 1.20

Result: Moderate filter strength for improved
red-green differentiation

Configuration Steps ​

Setting Up Accessibility Features ​

Step 1: Enable Accessibility

  1. Navigate to App Settings > Accessibility Settings
  2. Toggle Enable accessibility settings ON

Step 2: Configure Display (Optional)

  1. Toggle Bold font ON if needed
  2. Adjust Font size slider to preference
  3. Test readability on different pages

Step 3: Configure Color Filter (Optional)

  1. Select appropriate color blindness filter:
    • Protanopia (Red-blind)
    • Deuteranopia (Green-blind)
    • Tritanopia (Blue-blind)
    • Achromatopsia (Total color blind)
  2. Adjust filter intensity slider
  3. Test on pages with status indicators and charts

Step 4: Verify Settings

  1. Navigate through app pages
  2. Check readability and color differentiation
  3. Adjust settings as needed
  4. Settings save automatically

Use Cases ​

Low Vision ​

Configuration:

  • Enable accessibility settings: ON
  • Bold font: ON
  • Font size: Increased (slide right)
  • Color filter: As needed

Result: Larger, bolder text that's easier to read.

Red-Green Color Blindness ​

Configuration:

  • Enable accessibility settings: ON
  • Color filter: Red/Green or Green/Red Filter
  • Intensity: 1.0-1.5
  • Font settings: As preferred

Result: Better differentiation between red and green status indicators, graphs, and UI elements.

Bright Work Environment ​

Configuration:

  • Enable accessibility settings: ON
  • Bold font: ON
  • Font size: Slightly increased
  • Color filter: OFF

Result: Improved text visibility in bright lighting conditions.

Total Color Blindness ​

Configuration:

  • Enable accessibility settings: ON
  • Color filter: Gray (Achromatopsia)
  • Bold font: ON (optional)
  • Font size: As preferred

Result: Grayscale interface that relies on contrast rather than color.

Best Practices ​

Testing Filters ​

Process:

  1. Enable accessibility settings
  2. Try each color filter option
  3. Check pages with:
    • Status indicators (active/inactive)
    • Graphs and charts
    • Color-coded labels
    • Error and success messages
  4. Adjust intensity for optimal visibility
  5. Save preferred configuration

Font Size ​

Recommendations:

  • Don't increase excessively (may cause layout issues)
  • Test on different screen sizes
  • Check that all content remains visible
  • Verify scrolling still works properly

Combination Settings ​

Example Combinations:

Maximum Visibility:

Bold font: ON
Font size: +2 clicks right
Color filter: As needed

Subtle Enhancement:

Bold font: OFF
Font size: +1 click right
Color filter: Low intensity

Grayscale Focus:

Bold font: ON
Font size: Default
Color filter: Gray

Troubleshooting ​

Text Too Large ​

Issue: Text or UI elements appear too large or overlap.

Solution:

  • Move font size slider back toward center
  • Disable bold font if enabled
  • Refresh browser if changes don't apply

Color Filter Too Strong ​

Issue: Color filter makes interface look unnatural or hard to view.

Solution:

  • Reduce filter intensity slider
  • Try different filter type
  • Disable filter if not helpful

Settings Not Applying ​

Issue: Changes to accessibility settings don't take effect.

Solution:

  • Ensure "Enable accessibility settings" is ON
  • Refresh the page
  • Clear browser cache
  • Re-save settings

Layout Issues ​

Issue: Increased font size causes layout problems.

Solution:

  • Reduce font size slightly
  • Report issue to support
  • Use browser zoom as alternative temporarily

Summary ​

Accessibility Settings make the loyalty program app more usable for merchants with visual impairments or preferences. Enable accessibility features to apply bold fonts, adjust text size, and use color filters for various types of color blindness. The font size slider increases or decreases all text and UI elements. Five color filter options help users with different color vision deficiencies distinguish colors in the interface, each with adjustable intensity. All settings save automatically and apply immediately throughout the app.