FE6: Interfaces everyone can use
Responsive layouts, contrast and comfort
🎯You'll be able to
Make layouts that work from 320 px wide and at 200% zoom, with enough contrast.
🏠The everyday picture
A good kurta pattern can be cut for different sizes without redrawing it from scratch. A responsive layout adapts to each screen the same way, from a small phone to a wide monitor.
📘What it really is
- Responsive design:
- start mobile first, then add layout for wider screens with media queries or container queries;
- use flexible layouts (flexbox, grid) and relative units;
- content should reflow without horizontal scrolling at 320 px wide, and text should work at 200% zoom;
-
test on real phones, not only a resized desktop window.
-
Touch targets: make buttons and links big enough to tap; WCAG 2.2 AA asks for at least 24 × 24 CSS pixels (with exceptions), and many design systems use 44–48 px for comfort.
-
Colour contrast: at least 4.5:1 for normal text and 3:1 for large text and for important UI parts such as input borders and icons. Don't rely on colour alone to show meaning (add text or icons).
-
Comfort: respect
prefers-reduced-motionfor people who feel ill with animation; avoid auto-playing motion; support dark mode where possible. -
Set the page language (
<html lang="en">orlang="hi") so screen readers use the right voice.
📝A worked example
Kirana's product card on a 360 px-wide phone:
| Issue | Measure | Fix |
|---|---|---|
| Grey price text on white | Contrast 2.8:1 | Darker grey: 5.9:1 |
| "−" and "+" quantity buttons | 20 × 20 px | 44 × 44 px tap area |
| "Out of stock" shown only by greying the card | Colour only | Text label "Out of stock" plus disabled button |
| Card text at 200% zoom | Overlaps the image | Layout stacks vertically |
| Bouncing "Sale" badge | Constant motion | Static unless the user allows motion |
🌍Where it's used
- Every public site, since most traffic in India is mobile.
- Apps for older users, who often zoom text.
- Outdoor use: delivery partners reading screens in sunlight.
📝Case scenario
An older customer calls to say she can't read prices and keeps tapping the wrong quantity button. Contrast and target size checks show both fail. Darkening the price text and enlarging the buttons fixes it for her, and mis-taps on the quantity stepper drop across all users in analytics.
🖱️Try it
Check your Kirana product card at 360 px wide and at 200% zoom. Measure contrast for every text colour and the size of every tap target, fix anything below the thresholds, and add a reduced-motion style for any animation.
⚠️Common mistakes
- Light grey text on white. Sign: contrast below 4.5:1. Fix: check with a contrast tool and darken the text.
- Fixed heights that cut off zoomed text. Sign: text hidden at 200% zoom. Fix: let boxes grow with their content.
🛠️For your project
The kit's journey tests run on a Pixel 7 sized screen; check your Project 2 pages at 375 px too.
✅Quick check
What contrast ratio does WCAG AA require for normal text?
Show the answer
At least 4.5:1.
Why shouldn't colour alone show meaning, such as "out of stock"?
Show the answer
People with colour blindness or low vision may not notice it; text or an icon makes it clear to everyone.