Why is this needed?

Accessibility is not optional – it's required by law (WCAG 2.1 is part of ADA compliance).
Many Qtrac users interact with kiosks, booking tools, and mobile pages in public settings — we must design for everyone, including:

• People with low vision or color blindness
• Older adults with limited dexterity
• Users in poor lighting or noisy environments

Bad design choices hurt usability — and ultimately reflect poorly on our product.

How are we affecting our end users?

Poor contrast = users can’t read the screen
Tiny buttons = missed clicks or frustration
Color-only signals = confusion or exclusion for colorblind users
Bad layout or tiny fonts = slow bookings, walk-aways, or calls to support
→ These are real-world usability failures, and they break trust with our Qtrac brand.

WCAG Cheat Sheet for New Qtrac Configurations

Qtrac Custom Designs
Make your kiosk, monitor, bookings calendar & mobile pages usable for everyone!

1. 🎨 Color Contrast – Keep It Clear

• Text must stand out from the background:
  Normal text: 4.5:1 contrast ratio
  Large text (18pt+ or bold 14pt+): 3:1 contrast ratio
• ❌ Avoid light gray on white, or red on dark backgrounds
• ✅ Use black or dark navy on white/light background (and vice versa)

🛠 Pro tip: Use the WebAIM Contrast Checker before finalizing colors.

2. 🚫 No Color-Only Indicators

• Don’t use just color to show status (e.g., “red = error”)
  ✅ Add icons or text labels like:
  • ✅ “Success”
  • ⚠️ “Check input”
  • ❌ “Error – missing info”

3. 🖼️ Avoid Background Clutter

• Don’t use busy images, gradients, or videos behind text.
• ✅ Use solid, muted colors for backgrounds
• ✅ Add a semi-transparent overlay if you must use an image

4. 📱 Touch Target Size

• Make buttons, icons, and links at least 44px x 44px
• ✅ Leave space around them for fingers (especially on mobile)

5. 🧭 Logical Order = Happy Users

• Put content in the expected order:
  • Header → Info → Action buttons
  • Booking flow should guide users step-by-step
• Don’t force users to hunt around for the next step

6. 🗣️ Alt Text for Images

• If your design includes icons or images that convey meaning:
  • ✅ Include a label or explanation as the file name.
  • 📝 No need for decorative images (just mark them as decorative)

7. ⌨️ Keyboard-Friendly

• Make sure everything can be selected using Tab + Enter
• Avoid hover-only menus or interactions

🔁 Quick Checklist Before You Submit a Design:

✅ Good contrast?
✅ Clear, readable text?
✅ No color-only info?
✅ Clean background?
✅ Big enough buttons?
✅ Logical flow?