Casino bonus terms are hard to read on mobile because the layouts that carry them were built to make the offer visible, not the conditions readable. On a phone, the screen is narrow, the headline takes most of the space, sticky bars cover part of what remains, and the conditions end up in small, low-contrast text or inside collapsed panels. Each choice may look reasonable on its own. Together, they make the information people need to understand an offer the hardest part of the page to read.

This is a design problem rather than a mystery, which means it can be fixed. This article covers what goes wrong at the level of type, layout and interaction, what the accessibility standards actually require, and how designers can make promotional conditions readable without losing the offer.

Prominence is not comprehension

Two goals compete in every promotional layout. One is visual prominence: making an element the first thing a viewer notices. The other is comprehensibility: making the meaning of the content clear enough that someone can understand and act on it.

Prominence comes from size, weight, colour, contrast and position. Comprehensibility comes from legibility, structure, plain language and enough space and time to read. A layout can score highly on the first and poorly on the second. A huge headline figure with the conditions underneath in 11-pixel grey text is extremely prominent and barely comprehensible.

Desktop layouts can hide this tension, because there’s room for everything. Mobile layouts expose it, because every pixel given to the headline is taken from something else.

What a small screen actually takes away

A typical phone viewport is only a few hundred CSS pixels wide. That narrow width changes how text behaves in three important ways.

Fewer words fit on a line. Short lines are not a problem in themselves. But when a design scales down a desktop banner rather than reflowing its content, the text shrinks along with it instead of wrapping onto more lines.

Less fits above the fold. On a phone, the area visible without scrolling is small. If the headline, an image and a call-to-action button fill it, the conditions are pushed below, or into a separate screen.

Reading conditions vary more. Phones are used outdoors, in bright light, at arm’s length, on the move and with one hand. Small, light text suffers far more under these conditions than bold headlines do.

Font size and relative units

Text size is the most visible problem, and the most commonly mishandled.

Why pixels can work against readers

Browsers let users set a default text size, and many people with reduced vision increase it. CSS font sizes declared in rem units scale with that default, because one rem equals the root font size. Font sizes declared in fixed pixels don’t respond to the default text-size setting, although they do still scale with page zoom. Setting body text and conditions in rem is therefore a simple way to respect a reader’s own preferences.

The viewport-unit trap

Responsive designs often use viewport units, where one vw equals one per cent of the viewport width, to make headlines scale with the screen. Used alone for body text, viewport units can cause a real accessibility problem. Because the size is tied to the viewport, zooming the page may not enlarge the text at all.

A safer pattern combines a relative minimum, a fluid preferred value and a maximum:

css

.terms {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  line-height: 1.5;
}

The rem component in the middle value keeps the text responsive to zoom and user settings, while the viewport component adds gentle fluid scaling. The clamp function stops the size dropping below the minimum on small screens.

What the standards say

The Web Content Accessibility Guidelines don’t set a minimum font size. They do require, at Level AA, that text can be resized up to 200 per cent without loss of content or functionality (success criterion 1.4.4). They also require that content reflows at a width equivalent to 320 CSS pixels without two-dimensional scrolling (1.4.10). Promotional terms embedded in an image, or set in a fixed-width container, often fail both.

Line length, line height and spacing

Legibility isn’t only about size. The space around text matters almost as much.

Line length

Very long lines make it hard for the eye to find the start of the next line, and very short lines break sentences into fragments. WCAG’s Level AAA guidance on visual presentation (1.4.8) recommends that lines of text be no more than 80 characters wide. On mobile, lines are usually short enough by default. The problem tends to appear in the opposite direction, when conditions are squeezed into a narrow column beside an image and break after two or three words.

The ch unit, roughly the width of the “0” character in the current font, is a convenient way to control line length in CSS. A maximum width of around 60 to 75ch is a common design choice for comfortable reading on larger screens.

Line height and spacing

Dense small print is often set with tight line spacing to save room. That’s precisely the wrong trade-off for small text. A unitless line height of around 1.5 for body copy matches the line spacing referenced in WCAG’s visual presentation guidance.

WCAG 2.2 also includes a text spacing criterion at Level AA (1.4.12). Content must remain usable when users override spacing to at least the following values:

• line height of 1.5 times the font size;

• paragraph spacing of 2 times the font size;

• letter spacing of 0.12 times the font size;

• word spacing of 0.16 times the font size.

Terms panels with fixed heights and hidden overflow often break when users apply these overrides, because the text grows beyond the container and is cut off.

Contrast on busy backgrounds

Promotional designs love colour: gradients, glowing backgrounds, photographic textures. Terms are frequently placed directly on top of them in a light grey or semi-transparent white.

WCAG 2.2 requires a contrast ratio of at least 4.5 to 1 between normal text and its background (1.4.3, Level AA). Large text needs at least 3 to 1, where large means at least 18 points, or 14 points in bold. The enhanced Level AAA criterion (1.4.6) raises these figures to 7 to 1 and 4.5 to 1.

A gradient background makes compliance unpredictable, because the contrast changes along the line. The same grey text can pass over the dark end of a gradient and fail over the light end.

A poor and a better example

Poor: Conditions in thin, light-grey 12-pixel text sit on a gradient that runs from deep purple to bright pink, partly overlapping a decorative image. Some words are readable, and others fade into the background.

Better: The conditions sit on a solid, plain strip beneath the promotional artwork, in dark text on a light background, in a regular weight at the same size as the page’s body text. The artwork keeps its colour, and the text gets its own clear space.

When the headline swallows the hierarchy

In many promotional cards, the hierarchy runs like this: an enormous figure, a short qualifying phrase, a large button, then the conditions as a single faint line. The conditions are at the bottom of every scale used: size, weight, contrast and position.

On mobile, that line is often truncated with an ellipsis or reduced to a short phrase such as “T&Cs apply”. When the word bonus is set in a heavy display face at three or four times the size of everything around it, while the wagering requirement, time limit and eligible games sit in a single faint line beneath the button, the interface has effectively decided which part of the offer most people will read.

A clearer hierarchy

A better structure keeps the offer as the headline, but moves the most important condition directly beneath it, before the button, in a readable size and weight. The order becomes: what the offer is, what it requires, and then how to take part. Proximity tells the reader that the condition belongs to the offer, not to the legal footer.

Expandable panels and hidden conditions

Accordions, “read more” toggles and information icons are natural tools on mobile, because they save space. They also change whether information is seen at all. Content hidden behind an interaction is only read by people who decide to open it, and many won’t.

Expandable sections are reasonable for full terms, which can run to many paragraphs. They’re more problematic when they hide the conditions that significantly change what an offer means.

When expandable content is used, the details matter:

• Native disclosure controls. The native details and summary elements provide an expandable control that keyboard and screen-reader users can operate. A custom accordion needs correct roles, keyboard support and expanded or collapsed state information to be equally usable.

• A descriptive label. “Key conditions: wagering, time limit and eligible games” tells readers what they’ll find. “More info” does not.

• No hover-only tooltips. Tooltips that appear only when the pointer hovers over something don’t work on touchscreens. WCAG 1.4.13 sets requirements for content shown on hover or focus.

In the UK, there’s also a regulatory dimension. Under the CAP Code, rule 8.17 requires promotional marketing to communicate all applicable significant conditions clearly and prominently where omitting them is likely to mislead. The Advertising Standards Authority’s guidance on gambling promotions lists deposit and wagering requirements and time limits among likely significant conditions. It says links to full terms should be clear and prominent, not hidden in footers or small print. Expandable panels are not prohibited, but they don’t change the obligation to present significant conditions with the offer.

Sticky bars and the shrinking viewport

Many mobile casino layouts use fixed elements: a sticky header with the logo and account buttons, a bottom navigation bar, a cookie banner, a chat button, sometimes a promotional strip. Each one permanently removes part of an already small viewport.

On a phone in landscape orientation, the space left for scrolling content can become very small. Text in the remaining area is constantly partly covered as the user scrolls, which makes reading long conditions tiring.

WCAG 2.2 added a criterion that addresses part of this: Focus Not Obscured (Minimum), 2.4.11, Level AA. It requires that when an element receives keyboard focus, it isn’t entirely hidden by author-created content such as sticky headers. The broader readability issue goes beyond that criterion, but the principle is the same. Fixed elements shouldn’t cover the content people are trying to read.

Practical options include collapsing a sticky header when the user scrolls down, limiting the number of fixed bars, and using CSS scroll padding so that content scrolled into view isn’t hidden beneath a fixed header.

Responsive design mistakes that hurt legal text

Several patterns cause the most damage when designs adapt to small screens.

Terms inside images. Conditions rendered as part of a banner image can’t reflow, can’t be enlarged with user text settings, can’t be read by screen readers and can’t be translated. They shrink with the image on small screens.

Disabled zoom. A viewport meta tag that sets user-scalable to no, or a maximum scale of 1, attempts to prevent pinch zoom. Some browsers now ignore these settings, but they shouldn’t be used, because zoom is how many readers cope with small text.

Fixed-height containers. A terms box with a fixed height and hidden overflow cuts off text when it’s enlarged or reflowed.

Truncation without access. Text cut off with an ellipsis on mobile, with no way to see the rest, simply removes information.

Different content for mobile. Some designs show full conditions on desktop but omit them in the mobile variant to save space. That’s a content decision with real consequences, not just a layout choice.

How designers can make conditions readable

Most improvements are inexpensive.

Treat conditions as content, not decoration

Set them as live text, in the same typeface as the body copy, at a readable size in rem units, with comfortable line height.

Put key conditions next to the offer

The one or two conditions that most change an offer’s meaning, such as the wagering requirement and time limit, belong directly beneath the headline, not after the button.

Give text its own background

Place conditions on a solid background with contrast that meets, and ideally exceeds, the WCAG minimum.

Structure longer terms

Break full terms into short sections with clear headings, such as eligibility, wagering, time limits, eligible games and withdrawals, so they can be scanned. Short sentences and specific figures are easier to understand than general phrases.

Test with real settings

Check layouts at 200 per cent zoom, with a larger browser default font size, with WCAG text spacing overrides applied, and on a narrow phone in landscape orientation. Problems that are invisible in a design tool become obvious very quickly.

What readers can do

Readers can’t redesign a page, but they can work around many of these problems:

• Use pinch zoom or the browser’s text-size settings to enlarge small print.

• Open expandable panels and look for a link to the full terms before deciding anything.

• Rotate the phone to portrait if sticky bars cover too much in landscape.

• Look for the wagering requirement, time limit, eligible games and any withdrawal conditions. These usually change what an offer really means more than the headline figure does.

• If the terms are hard to find or read on mobile, view the same page on a larger screen.

The design choice behind the small print

Hard-to-read bonus terms on mobile are rarely an accident of screen size. They’re the result of layout decisions: what gets the space, what gets the contrast, what is shown immediately and what is hidden behind a tap. The same tools that make an offer stand out can be used to make its conditions readable. A design that does both serves readers better, and it’s also much closer to what accessibility standards and advertising rules already expect.