Making “buy” buttons visible to everyone

Why you are seeing a color contrast warning

When you save your design settings, ThunderTix compares the colors you chose against the accessibility standard used across the web. If a text color and its background are too close in brightness, we show you a notice like this one.

×

Color contrast warnings

• font color does not have enough contrast with hover background color for Sell Button Styles. This may cause the button to be hard to read.
• font color does not have enough contrast with background color for Header Navigation Styles. This may cause the button to be hard to read.
• icon color does not have enough contrast with background color for Header Navigation Styles. This may cause the button to be hard to read.

The standard behind the check

The check follows WCAG 2.1 Level AA, the Web Content Accessibility Guidelines. It measures the difference in brightness between two colors and expresses it as a ratio, from 1:1 (identical and invisible) to 21:1 (black on white).

What is being checked	Minimum ratio
Normal body text	4.5 to 1
Large text (18pt, or 14pt bold)	3 to 1
Icons, borders, and interface components	3 to 1

The same brand color, two ways

Nothing changes about the brand color below. Only the text on top of it changes.

Hover states cause most of the warnings

A button can pass at rest and fail the moment someone moves a mouse over it. It usually happens like this. You pick a strong color for the button and white text. Then you pick a lighter version for the hover state, because lighter feels like a highlight. White on the darker color passes. White on the lighter color does not.

Hover over both buttons.

The fix is to go the other direction. Make the hover state darker than the resting state, not lighter. It still reads as a change, and the text stays readable.

Check your own colors

Enter the two colors from your design settings. The ratio updates as you type.

Why this matters on a ticketing page

• Sunlight. Most of your buyers are on a phone. Screens wash out outdoors and low contrast disappears entirely.
• Age. Contrast sensitivity declines with age. If your audience skews older, and for most performing arts venues it does, this affects a real part of your patron base.
• Color vision differences. Some 300 million people worldwide have a color vision deficiency. It is far more common in men, because the genes involved sit on the X chromosome. Low contrast compounds it.
• Older screens. What looks crisp on your monitor may not exist on a ten year old laptop.

How to clear a warning

You do not have to abandon your brand palette. In almost every case you only need to adjust one value.

1. Change the text, not the brand color. If your brand color is light or mid tone, put near black text on it instead of white. If it is dark, use white.
2. Reserve the light tint for decoration. Light versions of a brand color work well as page backgrounds, dividers, and borders. They struggle as button fills with white text on top.
3. Darken the hover state instead of lightening it. Reduce the resting color's lightness by roughly 10 to 15 percent.
4. Treat icons like text. A cart or menu icon needs 3 to 1 against its background. Icons are often set to a soft gray that disappears on a colored header bar.
5. Do not rely on color alone. Underline your links or add an icon. Color by itself is not a signal everyone receives.
6. Re-save and confirm the warning clears. The check runs on every save.

Tools we recommend

You do not have to take our word for any of this. WebAIM, the accessibility group at Utah State University, publishes the checker most designers use. Its lightness slider is the fastest way to fix a failing pair while keeping your hue.

• WebAIM Contrast Checker, with an eyedropper and a lightness slider
• WAVE, which scans every text element on a page at once
• The WebAIM bookmarklet, which runs the checker inside any page you are viewing

This page passes the standard it describes. Every text and background pair on it clears 4.5:1, and most clear 7:1. Check it yourself with any of the tools above.

If your venue is publicly operated, this is a deadline

Everything above is worth doing whether or not anyone requires it. For a good number of our venues, someone does.

The Department of Justice adopted WCAG 2.1 Level AA as the technical standard for the websites and mobile apps of state and local government entities under ADA Title II. In April 2026 the DOJ extended the compliance dates by one year:

Entity	Deadline
Public entities serving 50,000 or more people	April 26, 2027
Smaller entities and special district governments	April 26, 2028

The rule covers services and content delivered through third party vendors, which includes your ticketing pages. If you are a city venue, a school district auditorium, or a public university performing arts center, your ticketing platform is part of your compliance picture.

Private venues are not covered by that specific rule, but ADA Title III web accessibility claims against private businesses are common and ticketing pages are a frequent target.

We are not attorneys and this is not legal advice. If you are a public entity, your general counsel or ADA coordinator should know where your ticketing pages sit in your compliance plan. We are glad to join that conversation.