Ultimate Performance Academy

Accessibility

WCAG 2.1 Level AA compliance ensuring our design system is accessible to all users.

WCAG Compliance Checklist

Every element in the UPA Design System has been designed and tested for accessibility:

Contrast: All text meets 4.5:1 minimum (AA standard)
Large Text: All headings meet 3:1 minimum
UI Components: All interactive elements meet 3:1 minimum
Focus States: All interactive elements have visible focus indicators
Colour Blindness: Traffic light system works for all types of colour vision
Touch Targets: All interactive elements are minimum 44x44px
Text Sizing: Body text never below 16px

Colour Contrast Ratios

All colour combinations have been tested and verified for WCAG AA compliance (4.5:1 minimum for body text):

PASSES AAA

Black 950 on White

Body text example with excellent readability

Contrast: 17.72:1
Exceeds WCAG AAA (7:1)
PASSES AAA

Black 800 on White

Softer black reduces eye strain for extended reading

Contrast: 14.93:1
Exceeds WCAG AAA (7:1)

Semantic Colours (WCAG AA: 4.5:1 minimum)

Success

Green 700
5.02:1 - Passes AA

Warning

Orange 700
5.18:1 - Passes AA

Error

Red 600
4.83:1 - Passes AA

Info

Blue 600
5.17:1 - Passes AA

Why Yellow Can't Be Body Text

This yellow text on white background is VERY difficult to read

Yellow (#facc15) on white: 1.53:1 contrast - Fails WCAG at all levels

Yellow is ONLY used for:
  • Backgrounds (with dark text on top)
  • Buttons and CTAs
  • Accents and highlights
  • Decorative elements
Never for body text or small text on light backgrounds.

Colour Blindness Considerations

Our semantic colour system (Green/Amber/Red) works for all types of colour vision deficiency because we never rely on colour alone:

NORMAL VISION

Success

Warning

Error

Protanopia

Red-Blind

Icons and text labels ensure meaning is conveyed beyond colour. Sufficient luminance difference between red/green.

Deuteranopia

Green-Blind (Most Common)

Green and red are distinguishable by brightness. Icons provide additional meaning cues.

Tritanopia

Blue-Blind

Blue used sparingly, always paired with icons or text to convey meaning clearly.

Design Patterns for Colour Blind Users

  • Never rely on colour alone - Always include icons, text labels, or patterns
  • Use the traffic light system - Universally recognized and tested pattern
  • Sufficient contrast - All colours have adequate luminance difference
  • Text labels - "Success", "Warning", "Error" labels in addition to colour
  • Icons - Checkmark (success), warning triangle, X (error)

Best Practices

Keyboard Navigation

  • Name
    Tab Order
    Description

    Logical tab order matching visual layout

  • Name
    Focus Indicators
    Description

    2px ring, clearly visible in all themes

  • Name
    Skip Links
    Description

    Allow users to skip to main content

  • Name
    Keyboard Shortcuts
    Description

    Document all keyboard shortcuts

Screen Readers

  • Name
    Semantic HTML
    Description

    Use proper heading hierarchy (h1-h6)

  • Name
    ARIA Labels
    Description

    Meaningful labels for all interactive elements

  • Name
    Alt Text
    Description

    Descriptive alt text for all images

  • Name
    Live Regions
    Description

    Announce dynamic content changes

Touch Targets

  • Name
    Minimum Size
    Description

    44x44px for all interactive elements

  • Name
    Spacing
    Description

    8px minimum between touch targets

  • Name
    Feedback
    Description

    Visual feedback on touch/click