Tips for designing for accessibility - Thu - Feb 12, 2026 - 2:22pm

Cayla Support
Thu - Feb 12, 2026 - 2:22pm ⚬ 0 Comments General Support
---
Accessibility Tips for Your Event Site


Making your event site easy to read and use helps everyone, including customers with low vision, color blindness, or who simply prefer larger text. This guide gives you practical tips you can use in your Web Design Tools so your design meets widely used Web Content Accessibility Guidelines (WCAG) 2.1. You don’t need to be technical; these are simple choices that make a big difference!


Note: The default settings in ThunderTix already meet the WCAG Guidelines so if you plan to keep the default colors and design, you do not need to worry about accessibility, we've got you covered!



Color contrast: text that’s easy to read


If text and background are too similar in color, many people can’t read it comfortably. WCAG recommends a minimum contrast so text stands out clearly.


• Normal-sized text (like body copy and descriptions): aim for at least 4.5:1 contrast.  
• Large text (around 18px and up, or 14px bold) and buttons: aim for at least 3:1 contrast.


Where to check in Web Design Tools:
• General Styles — Content text color vs. content background color (and body background)
• Event Title Styles — Event title and date font color vs. the background they sit on
• Event Description Styles — Description text color vs. background
• Top Nav Styles — Button text color and icon color vs. button background
• Sell Button / Continue Shopping Button — Button text color vs. button background (and hover)
• Checkout page styles — Any text vs. its background.


Tip: Use a color contrast checker (e.g. WebAIM’s free tool). Enter your text color and background color; it will tell you if you meet WCAG Standards. Dark text on light backgrounds (or the reverse) usually passes; very light gray on white or dark gray on black often fails.




Font sizes: not too small


 Small text is hard for many people to read, especially on phones. WCAG doesn’t set a single “minimum” size, but  we recommend 16px, as it is a common comfortable baseline for body text.


Where to check in Web Design Tools:
• General Styles → Content text font size: At least 14px; 16px is better for main content
• Event Title Styles → Font size (Event Title): 16px or larger so titles stand out
• Event Title Styles → Font size (Event Date): 14px or larger
• Top Nav Styles → Text size: 14px or larger so nav is readable
• Sell / Continue shopping buttons → Text size: 14px or larger so labels are clear.


Tip: Avoid going below 12px for any text customers need to read.




Clear, readable fonts


Fancy or decorative fonts can look great but are often harder to read. For body text and important labels, simple fonts work best.

Where to check in Web Design Tools:
• General Styles → Content text font family: Choose a clear, readable font (e.g. from Google Fonts). Sans-serif fonts like Open Sans, Source Sans Pro, or Lato are usually easier to read on screen than heavy script or display fonts
• Event Title Styles → Font family: You can use a more distinctive font for titles if you like, but keep event dates and descriptions in something simple and legible
• Avoid: Very thin or “hairline” weights for body text; they can disappear for people with vision issues. Prefer normal or semi-bold for main content
• Custom CSS / Google Fonts: If you add your own fonts, use them for headings or accents rather than long paragraphs, unless they’re known to be highly readable.


Line spacing and letter spacing


Cramped lines and letters make reading harder, especially for people with dyslexia or low vision.


Where to adjust:
• General Styles: “Text line spacing” and “Spacing between letters” — a bit more space (e.g. line height around 1.4–1.5) often improves readability.
• Event Title and Event Description sections: Same idea; slightly increased line spacing helps for multi-line text.


You don’t need exact numbers; if text feels crowded, nudge these values up a little and preview.




Buttons and links: visible and understandable


Buttons and links need to be easy to see and to understand. WCAG says they shouldn’t rely on color alone.


Where to check in Web Design Tools:
• Top Nav, Sell Button, Continue Shopping: Ensure text color and background color have enough contrast (see above). If you use borders, make sure the button is still obvious without relying only on a thin colored outline.
• Keep button labels clear (e.g. “Buy tickets,” “Continue shopping”) so purpose is obvious from the words, not just the color.




Quick checklist


Before you publish your layout, run through this:


1. Contrast: Use a contrast checker on text + background in General Styles, Event Title, Event Description, Top Nav, and buttons.
2. Font size: Body and description text at least 14px (16px is better); titles and nav at least 14px.
3. Font choice: Readable fonts for body and descriptions; avoid very thin or decorative fonts for long text.
4. Spacing: Slightly increase line spacing if blocks of text feel tight.
5. Preview: Check your main event listing and checkout on a phone or with the browser zoomed in (e.g. 150%) to make sure nothing becomes unreadable.



Google Lighthouse for Chrome Browsers

After you’ve reviewed colors, fonts, spacing, and buttons in Web Design Tools, it’s a good idea to run one last automated check using Google Lighthouse. Lighthouse is a free tool built into the Google Chrome browser that scans your page and highlights accessibility issues you may have missed. 


This is not required, but it’s a helpful final step before publishing. 

What Lighthouse checks 


Lighthouse reviews things like: 


• Color contrast issues
• Missing alternative text for images
• Button and link accessibility
• Proper heading structure
• Mobile friendliness
• Basic performance and best practices
  
  
It provides a score and a list of suggestions so you can quickly see if anything needs attention.
 
How to run Lighthouse
 
1. Open your event site in Google Chrome.
2. Right-click anywhere on the page and choose Inspect.
3. Click the Lighthouse tab in the panel that opens.
   
   
4. Select:
   • Accessibility (required)
   • You may also include Performance and Best Practices if desired.
     
     
5. Click Analyze page load (or Generate report).
6. Wait for the report to generate.
   
   
You’ll see an accessibility score along with detailed results.
 
How to use the results
 
• If your Accessibility score is high (90–100), you are in great shape.
• If Lighthouse flags contrast issues, return to Web Design Tools and adjust text and background colors.
• If it flags image alt text, ensure your event images and content include descriptive alternative text where applicable.
• If it highlights button or heading structure issues, review labels and layout.
  
  
You do not need to achieve a perfect score, but Lighthouse helps identify obvious accessibility gaps before customers encounter them.


Learn more


Web Content Accessibility Guidelines (WCAG) 2.1 — The standard this guide is based on.  
WebAIM Contrast Checker — Free tool to test text and background colors for WCAG compliance.


Small changes in your Web Design Tools  can make your event site more welcoming and easier to use for everyone!

• Sign up today and start selling tickets Login