The landing page accessibility checklist

An accessible landing page is one a person can read, tab through and submit without a mouse or perfect eyesight. This landing page accessibility checklist starts with the four checks that catch most failures: text contrast of at least 4.5 to 1, interactive controls of at least 24 by 24 CSS pixels, a visible focus state on every control, and a real label on every form field. All four are cheap to fix in design and expensive to retrofit.

Contrast is where most landing pages fail

WCAG sets the minimum contrast ratio for normal text at 4.5 to 1 against its background, at level AA. Large text gets 3 to 1. Large means at least 18 point, or 14 point bold, which is roughly 24px or 18.5px bold in CSS. The values are not rounded, so 4.499 to 1 fails. Light grey body copy on white is the usual culprit. Next comes white text over a photo, where the contrast holds at the top of the image and falls apart at the bottom.

Buttons and icons need contrast too

Text is only half of it. WCAG asks for 3 to 1 on user interface components and meaningful graphical objects against the colours next to them, also at level AA. That covers the border of an input, the outline of a button, a checkbox, a rating star, and any icon that carries meaning on its own. A pale grey input outline on a white card is the most common miss on a landing page. It is also the exact element people have to notice before they can convert.

Give every tap target 24 by 24 pixels

WCAG 2.2 added a target size rule at level AA. Interactive targets should be at least 24 by 24 CSS pixels. Smaller targets are allowed when they sit far enough apart that a 24 pixel circle centred on each one does not overlap another target. Links inside a sentence are excepted. In practice this hits icon buttons, the close button on a modal, social icons in a footer, and the tightly packed links in the legal row at the bottom of the page.

Keyboard access is a five minute test

Put the mouse down and press Tab from the top of the page. Every link, button, input and menu control should take focus in an order that matches the visual layout, and you should always be able to see where you are. Custom components fail here most often. A slider built from divs traps you. A video modal holds on to focus. A sticky header hides the element you just tabbed to. If you cannot reach and fire your primary button with the keyboard, the page is broken.

Give every form field a real label

A placeholder vanishes the second someone types, so anyone who loses their place has nothing to check against. Screen readers handle placeholder text inconsistently. Put a visible label above each field. Keep the placeholder for an example format if you want one, and connect the label to the input properly so tapping the label focuses the field. Error messages have to say what went wrong in words. Colour on its own cannot be the thing that marks a field as invalid.

The EU rules that landed in 2025

The European Accessibility Act came into force on 28 June 2025. It applies to services sold to consumers in the EU, including ecommerce, banking and transport booking. It uses EN 301 549, which is built on WCAG level AA. If you sell to European consumers, accessibility moved from a nice practice to a compliance requirement. Enforcement runs through member states rather than a single body, which makes the exposure harder to predict, and not smaller.

Run this landing page accessibility checklist in twenty minutes

Start with an automated checker, then ignore the score, because automated tools catch only part of what matters. Tab through the whole page. Sample every text and button colour with a contrast checker. Zoom the browser to 200% and confirm that nothing overlaps or gets cut off. Turn on the screen reader built into your operating system and listen to the hero and the form. Fix the contrast values in your design tokens rather than page by page, or the same failure ships again on the next page.