Creating accessible digital experiences is both a social responsibility and, in many cases, a legal obligation. This guide provides a comprehensive overview of what it means to be compliant with the Web Content Accessibility Guidelines (WCAG) and the Americans with Disabilities Act (ADA)—along with visual examples and mobile best practices.

 

What Is WCAG?

WCAG (Web Content Accessibility Guidelines) is a globally accepted framework developed by the W3C for ensuring digital accessibility.

The POUR Principles

WCAG is structured around four core principles:

• Perceivable – Information must be presented in ways users can access (e.g., alt text, captions).
• Operable – Navigation must be functional using various input methods (keyboard, screen reader, etc.).
• Understandable – The interface must behave predictably.
• Robust – Content must be compatible with assistive technologies.
  
  

WCAG Compliance Levels

• Level A – Basic requirements
• Level AA – Industry standard and required for most legal compliance
• Level AAA – Advanced accessibility (ideal but not always practical)
  
  

 

Color Contrast Requirements

One of the most fundamental aspects of accessibility is color contrast, which ensures text is readable by users with vision impairments or color blindness.

Required Contrast Ratios

Visual Examples

• ✅ Pass: Black on White (21:1)

• ⚠️ Fail: Light Gray on White (1.8:1)

• ✅ Pass: Large Gray on White (5.2:1)

UI Template Contrast Ratios

Tips

• Use WebAIM Contrast Checker to validate your design.
• Don’t use color alone to convey information (e.g., use icons or labels with colors).

 

Font Sizes and Readability

Clear, legible text is vital for all users—especially for those with visual impairments, cognitive disabilities, or who are navigating in challenging environments (e.g., small screens or bright light).

WCAG and Font Size Guidelines

• Default body text should be no smaller than 16px. Default size for body fonts in Create are 2vw: this equates to roughly 18pt.
• Large text, as defined by WCAG:
  • 18pt and up (typically 24px) for normal weight
  • 14pt bold (about 18.66px) and up also qualifies
• Ensure line height is at least 1.5× the font size and paragraph spacing is at least 1.5×.
• Avoid using fixed pixel sizes— Create uses vw (viewport width) for all sizes which is a relative pixel size and adjusts to all screen sizes and resolutions. 

UI Template Fonts Sizes

Best Practices

• Use clear and readable font families (e.g., system fonts or accessible web-safe fonts like Arial, Roboto, Helvetica).
• Avoid overly thin or decorative fonts.
• Make sure text resizes correctly when users zoom up to 200% 
• Maintain a high contrast between text and background, especially for smaller or lighter text.

What Is ADA Compliance?

The Americans with Disabilities Act (ADA) prohibits discrimination against individuals with disabilities and extends to digital properties such as websites and mobile apps.

While ADA doesn't specify technical standards, courts and federal agencies typically reference WCAG 2.1 Level AA as the benchmark for ADA compliance.

To Be ADA Compliant:

• Your site/app should conform to WCAG 2.1 Level AA standards.
• Ensure users with visual, auditory, motor, and cognitive disabilities can perceive, understand, navigate, and interact with your platform.
• Remove barriers in navigation, form inputs, media playback, and content structure.
  
  

 

Mobile App Accessibility: Hit Area Guidelines

Mobile accessibility goes beyond color and contrast. Ensuring touch targets (a.k.a. "hit areas") are easy to use is critical, especially for users with motor impairments.

WCAG and Platform Guidelines

In Create, the minimum size for buttons should be 5x5 vw for mobile platforms and 7x7 vw for headsets. Notice that the Primary and Secondary buttons below are slightly smaller than the minimum size. This is ok because their widths are so much larger and they have spacing around them.

UI Template Button Sizes

Best Practices

• Provide sufficient spacing between touchable elements.
• Avoid placing buttons too close to screen edges.

Tools to Help You Get There

• WAVE Accessibility Tool
• axe DevTools by Deque
• Chrome Lighthouse
• Apple Human Interface Guidelines
• Material Design Accessibility
• Hololens 2 Design Principles

Final Thoughts

While full WCAG and ADA compliance takes consistent effort and testing, the payoff is immense: better user experiences, broader audience reach, and reduced legal risk. By integrating these practices into your design and development process from the start, you set your product up for long-term success and inclusivity.