Accessible website design practices are decisions — text contrast, tap-target size, labels, focus states — made while the design is still a file you can change cheaply, not a certificate you buy at the end. This guide gives the exact WCAG 2.2 numbers and a 20-minute review to run before build.
The short answer: the five patterns, with the numbers
Specify these five patterns in your brief, and re-check at handover:
| Pattern | The number or rule |
|---|---|
| Text contrast | At least 4.5:1 for normal text, 3:1 for large text (WCAG 2.2, Level AA) |
| Non-text contrast | At least 3:1 for input borders, icons and focus indicators |
| Tap targets | At least 24×24 CSS px at AA; design primary actions at 44×44 |
| Colour | Never the only signal — pair it with text or an icon |
| Forms | Visible label, instruction before the field, errors explained in words |
The problem: accessibility is decided in the design file, not the audit
Most failures are chosen, not coded: pale grey text picked for elegance, a button shrunk to fit a crowded header, labels deleted because placeholders look cleaner. Each is free to reverse in the file and expensive after build. Wider standards background sits in our web accessibility compliance guide; the owner needs a pattern list to brief and check.
Contrast: the ratios, what counts as large text, and the grey-text trap
WCAG 2.2 Success Criterion 1.4.3, Contrast (Minimum), Level AA, requires at least 4.5:1 for normal text and 3:1 for large text — large meaning at least 18 point, or 14 point bold (roughly 24 CSS pixels, or about 18.5 in bold). Logos and incidental text are excepted; body copy, headings and button labels are not.
The grey-text trap is the most common failure. Light-grey copy on white typically lands well under 4.5:1, so test the pair, not the impression: if a checker returns 2.9:1 for 16-pixel body text, it fails — and would still fail at 3.5:1, because the large-text allowance does not apply at that size. Approve colours as named pairs with the ratio recorded, and check text over photographs at the lightest point behind the words.
Interfaces need contrast too: under Success Criterion 1.4.11, Non-text Contrast, input borders, checkbox outlines, meaningful icons and the focus indicator need at least 3:1 against adjacent colours. A form with a whisper-pale border fails even when its labels pass.
Never by colour alone: status, errors and links that still read in greyscale
Success Criterion 1.4.1, Use of Color, states the rule: colour must not be the only means of conveying information. An error announced only by a red border disappears for readers who cannot distinguish the colours — and for everyone in bright sunlight.
The fix is a second signal: pair the red border with an error message in words and an icon, mark required fields with the word "required", and underline links in body text. Quick check: view the mockup in greyscale — if status, errors and links still read, it passes.
Tap targets: sizes, spacing and the buttons people actually miss
WCAG 2.2 Success Criterion 2.5.8, Target Size (Minimum), Level AA, sets the floor: pointer targets are at least 24 by 24 CSS pixels, with exceptions including undersized targets spaced so they cannot be hit by mistake, equivalent full-size controls, and inline links. Treat 24 as a floor, not a goal. Success Criterion 2.5.5, Target Size (Enhanced), Level AAA, sets 44 by 44 CSS pixels — design primary buttons and icon controls to this size, because fingers are less precise than a mouse.
Spacing matters as much as size: crowded icon rows and dense footer links cause mis-taps even when each target passes alone. Measure the tappable area, including padding, not just the glyph.
Readable type: size, line height, line length and spacing that survives zoom
Keep body text at a comfortable size, line height generous, and lines short enough for the eye to find the next one — our essential principles of effective web design covers the visual side. Accessibility adds two requirements.
Success Criterion 1.4.4, Resize Text: text must be resizable up to 200 percent without loss of content or functionality, so avoid fixed-height boxes that clip enlarged text. Success Criterion 1.4.12, Text Spacing: nothing may be lost when line height is set to at least 1.5 times the font size, paragraph spacing to 2 times, letter spacing to 0.12 times and word spacing to 0.16 times.
Forms people can finish: visible labels, honest instructions, errors that help
The W3C's WAI guidance on forms reduces to four rules. Give every field a visible label that stays visible while typing — placeholder text disappears exactly when needed and is not a label. Put instructions, such as a required format, before the field. Identify errors in text: Success Criterion 3.3.1, Error Identification, requires the error to be described in text, and good design names the field, says what is wrong and how to fix it. Keep labels and hints at full contrast.
Our Arabic form design guide covers Arabic specifics, and our guide to enquiry form field count and the WhatsApp fallback covers how many fields to ask for; this article owns the layer underneath.
Focus, keyboard order and states: designing what happens without a mouse
Many visitors navigate by keyboard. Success Criterion 2.4.7, Focus Visible, requires a visible focus indicator; design it deliberately — a clear outline meeting the 3:1 non-text contrast rule — instead of accepting a faint default or removing it for looks. WCAG 2.2 Success Criterion 2.4.11 adds that a focused component must not be entirely hidden by content such as a sticky header.
Specify the focus order: it should follow the visual reading order without jumping. Design every state — hover, focus, active, disabled — differing by more than colour alone, so the current state reads in greyscale.
The same patterns in Arabic: RTL, Arabic type and mixed-direction forms
The numbers do not change in Arabic; their application does. Arabic type generally needs more size and line height to stay readable, so test Arabic pages as their own design, not a mirror of the English ones. Focus and reading order run right to left, and mixed-direction forms — an Arabic label beside an English email address — need deliberate alignment. Our RTL website design checklist owns the full mechanics.
The National Digital Accessibility Policy, published through official UAE channels with the TDRA supporting implementation, promotes barrier-free digital services for people of determination and senior citizens; federal government entities are guided toward WCAG Level AA. Its scope is government digital services — not a blanket duty on private businesses — but it sets the benchmark buyers expect.
How to check a design before build: a 20-minute owner review
You do not need audit software. With the design file or a staging link:
- Run the five text-and-background pairs through a contrast checker, and record the ratios.
- Measure three primary buttons and menu items. Under 24×24 CSS px fails outright; under 44×44 goes back for more room.
- View the mockup in greyscale. Confirm errors, required fields, links and selected states still read without colour.
- Tab through the page by keyboard. Confirm focus is always visible and follows the visual order.
- Submit the main form empty, then with one deliberate mistake. Confirm every error is named in words, beside its field.
- Zoom to 200 percent and increase text spacing. Confirm nothing clips or overlaps.
Anything failing goes back as a design comment, while fixing it still costs minutes — see our overview of web design in the UAE for where this review sits.
Common mistakes
The recurring mistakes: treating 24×24 pixels as a target rather than a floor, approving colours by eye instead of by pair, deleting the focus outline because it offends the design, accepting placeholder-only labels, checking only the homepage while templates fail, and assuming a widget added later can repair decisions baked into the design. It cannot.
FAQ
What contrast ratio does my website text need?
At WCAG Level AA, normal text needs at least 4.5:1, and large text — at least 18 point, or 14 point bold — at least 3:1. Input borders and focus indicators need at least 3:1 against adjacent colours.
Is 24×24 pixels really big enough for buttons on a phone?
It is the WCAG 2.2 Level AA minimum, not a comfort target. The enhanced criterion sets 44 by 44 CSS pixels; design primary buttons and icon controls to that size where space allows, with clear spacing between neighbours.
Why can't I use placeholder text instead of a label?
Placeholder text disappears as soon as the visitor starts typing — the instruction vanishes exactly when it is needed — and is often too low in contrast to read. A visible label stays present throughout; placeholders can still add an example inside the field.
Does UAE law require my private business website to meet WCAG?
The National Digital Accessibility Policy is directed at government digital services, with federal entities guided toward WCAG Level AA; it is not a blanket legal duty on private businesses. Treat AA as the practical benchmark, and check contracts you sign for specific requirements.
How can I check a design for accessibility before it is built?
Run the 20-minute review above: check colour pairs, measure buttons, view the mockup in greyscale, tab through it by keyboard, submit the form with deliberate errors, and zoom to 200 percent.
Want these patterns built into your redesign? (CTA)
If your site fails these checks, the cheapest fix is the planned redesign. WebStackRank builds these patterns in from the first mockup, with an itemised proposal within 24 business hours. Talk to our web design company in Dubai team, and ask to see the contrast pairs, target sizes and form patterns before approving.
