Stop 02 · Design Principles & Visual DesignTopics · 9/11

Accessibility Basics (WCAG)

In short

Lots of people use apps with low vision, shaky hands, colour blindness or a screen reader. Designing for them is not extra work at the end; it makes the product better for everyone.

Designing so people with visual, motor, auditory or cognitive differences can use a product — color contrast, text sizing, and clear labeling are foundational, covered by the WCAG standard.

The jaadu pulls a suitcase up a gentle ramp alongside a person in a wheelchair and a parent with a pram.

Think of it like this

The ramp at the station

A ramp at the railway station was built for wheelchair users. But parents with prams, people with heavy suitcases and the chaiwala with his trolley all use it too. Accessible design works the same way.

Watch it happen

Six checks to run on every screen

Contrast

Text size

Not colour only

Tap targets

Labels

Focus

1/5Contrast: WCAG AA asks for at least 4.5:1 for normal text and 3:1 for large text against its background.

The big ideas

What you need to know

WCAG is the standard

The Web Content Accessibility Guidelines set the rules. Most teams aim for level AA, the middle of three levels.

Design for many eyes

Low vision, colour blindness and bright sunlight all need strong contrast and clear text.

Screen readers read structure

Blind users hear the page. Clear headings, button names and image descriptions make it understandable.

Helps everyone

Big tap targets help someone on a bumpy bus. Captions help someone in a noisy hostel.

See it in code

Walk through the code

html

1<!-- A label linked to its input -->2<label for="phone">Mobile number</label>3<input id="phone" type="tel" autocomplete="tel" />4 5<!-- Describe images that carry meaning -->6<img src="qr.png" alt="UPI QR code to pay ₹250" />7 8<!-- Icon-only buttons need a name -->9<button aria-label="Close dialog">×</button>

1/3The label's 'for' matches the input's id, so screen readers announce 'Mobile number' when the field is focused.

You won't write this code, but knowing it helps you specify labels, alt text and button names in your designs so developers can add them.

Save yourself the pain

Common mistakes

Oops

Leaving accessibility for 'later, after launch'.

Do this instead

Check contrast, labels and tap sizes while designing. Fixing them later costs much more.

Oops

Using placeholder text instead of a label.

Do this instead

Keep a visible label above the field. Placeholders vanish when you type and are often low contrast.

Your mission

Run an accessibility check

~30 min

Quick check

A form shows errors only by turning the field border red. Who struggles most?

Go deeper

1Check a design's color contrast ratios against WCAG AA standards.
2Try navigating a familiar interface using only a keyboard, no mouse.
3Learn why accessibility is often a legal requirement, not just a nice-to-have.