Responsive Design & Accessibility
5 min read + 20 min hands-on
Target audience: Anyone building production-quality UIs who needs their design to work across devices and for users with disabilities.
Prerequisites: Basic understanding of CSS helps, but not required.
Responsive Design
Section titled “Responsive Design”Breakpoint Reference
Section titled “Breakpoint Reference”| Breakpoint | Range | Layout approach |
|---|---|---|
| Mobile | 0–767px | Single column, large touch targets |
| Tablet | 768–1023px | Two-column, flexible grid |
| Desktop | 1024px+ | Multi-column, hover states, dense layouts |
Mobile Considerations
Section titled “Mobile Considerations”Touch targets, single-column layouts, and thumb-friendly placement are critical on small screens.
Design the mobile version (0–767px) of this card grid:
- Single-column layout, full-width cards
- Touch targets minimum 44px height
- 16px horizontal padding on all elements
- Navigation collapses to bottom tab bar
- Text size minimum 16px to prevent zoom on iOSTablet Considerations
Section titled “Tablet Considerations”Tablets bridge mobile and desktop — use flexible two-column layouts that adapt to both orientations.
Design the tablet version (768–1023px):
- Two-column card grid with 16px gap
- Navigation becomes a side rail (collapsed by default, icon-only)
- Touch targets remain 44px minimum
- Content width capped at 720px, centered
- Responsive images scale with container widthDesktop Considerations
Section titled “Desktop Considerations”Desktop allows hover states, denser information, and keyboard navigation support.
Design the desktop version (1024px+):
- Three-column card grid with 24px gap
- Persistent sidebar navigation (240px width)
- Hover states on all interactive elements
- Keyboard focus rings visible on Tab navigation
- Tooltip on hover for icon-only buttons
- Content area max-width 1280px, centeredResponsive Prompt Template
Section titled “Responsive Prompt Template”Include all three breakpoints in one prompt for complete coverage.
Create a responsive card grid for a blog listing page:
Mobile (0–767px): Single column, full-width cards, 44px touch targets,
16px horizontal padding, stacked image-title-excerpt layout.
Tablet (768–1023px): Two-column grid, 16px gap between cards,
image on left / text on right within each card.
Desktop (1024px+): Three-column grid, 24px gap, hover shadow effect
(medium to large, 200ms transition), focus ring on keyboard navigation.
Use Tailwind CSS: grid-cols-1 md:grid-cols-2 lg:grid-cols-3Accessibility
Section titled “Accessibility”WCAG Contrast Requirements
Section titled “WCAG Contrast Requirements”WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios to ensure text is readable for users with low vision.
| Level | Contrast ratio | Applies to |
|---|---|---|
| AA (minimum) | 4.5:1 | Normal text (under 18px or 14px bold) |
| AA (large text) | 3:1 | Large text (18px+ or 14px+ bold) |
| AAA (enhanced) | 7:1 | Normal text, highest accessibility |
Ensure WCAG AA compliance throughout:
- Body text (#1F2937) on white background — contrast ratio 16:1 ✅
- Secondary text (#6B7280) on white — contrast ratio 4.6:1 ✅
- Primary button (#2563EB) with white text — contrast ratio 5.9:1 ✅
- Warn me if any combination falls below 4.5:1♿ Accessibility Checklist
Section titled “♿ Accessibility Checklist”Color & Contrast
Section titled “Color & Contrast”- Maintain 4.5:1 contrast ratio for normal text
- Maintain 3:1 for large text (18px or larger)
- Never rely solely on color to convey information — add icons or labels
Design the form error state without relying on color alone:
- Red border (#DC2626) around the invalid input
- Error icon (⚠) to the left of the error message
- Descriptive error text below the field ("Email must include @")
- aria-invalid="true" on the input elementInteractive Elements
Section titled “Interactive Elements”- Focus rings visible when navigating by keyboard
- Touch targets at least 44×44px
- Use semantic HTML elements (button, not div)
Ensure all interactive elements meet accessibility standards:
- Focus ring: 2px solid #3B82F6, 2px offset, visible on all focusable elements
- Minimum button height: 44px
- Icon-only buttons include aria-label
- Form inputs have associated label elements (not just placeholder text)Semantic Color Use
Section titled “Semantic Color Use”Colors should reinforce meaning that is also conveyed in another way (text, icon, shape). This ensures users who are color blind still understand the interface.
| State | Color | Also use |
|---|---|---|
| Error | Red | Error icon + descriptive message |
| Success | Green | Checkmark icon + confirmation text |
| Warning | Yellow | Warning icon + explanatory text |
| Disabled | Gray | Opacity 50% + cursor: not-allowed |
Design state indicators that don't rely on color alone:
Success: green (#10B981) border + ✓ checkmark icon + "Saved successfully" text
Error: red (#EF4444) border + ⚠ icon + specific error message
Warning: yellow (#F59E0B) border + ! icon + warning explanation
Disabled: gray-300 background + 40% opacity + not-allowed cursorCombined Responsive & Accessibility Prompt
Section titled “Combined Responsive & Accessibility Prompt”Bringing both concerns into a single prompt:
Design a WCAG AA-compliant responsive contact form:
Layout:
- Mobile: single column, full-width inputs, 44px input height
- Desktop: two-column layout for name+email fields, single column for message
Accessibility:
- Each input has a visible label above (not just placeholder)
- Error states use red border + icon + text message (not color alone)
- Focus rings: 2px solid #3B82F6 on all interactive elements
- Submit button: 44px height, sufficient color contrast (white text on #2563EB, ratio 5.9:1)
Colors:
- Label text: #374151 (gray-700), contrast 10:1 on white ✅
- Input border: #D1D5DB at rest, #3B82F6 on focus
- Error: #DC2626 border, #DC2626 icon and message text, ⚠ icon included📱 Breakpoint Strategy Summary
Section titled “📱 Breakpoint Strategy Summary”Mobile (0–640px): Single column, large touch targets (44px+), simplified navigation, minimum 16px text
Tablet (641–1024px): Two-column layouts, medium touch targets, adaptive navigation
Desktop (1025px+): Multi-column layouts, hover states, detailed interactions, keyboard navigation
See the references for the external specifications and background sources used on this page.[1][2]
References
Section titled “References”- W3C Web Accessibility Initiative, WCAG 2 Overview
- MDN Web Docs, Learn web development