Display and preference examples.
Compare a few shop details at different text sizes, spacing and color settings. The faults stay inside their named examples.
Delivery copy in two themes
The same sentence uses fixed light and dark teaching palettes. Compare the colors and ratios below.
Your fictional delivery address can be changed before you complete the demo purchase.
Foreground #575e57; background #ffffff; contrast 6.68:1.
Above 4.5:1 for the baseline normal-size text.
Your fictional delivery address can be changed before you complete the demo purchase.
Foreground #bdc6bb; background #263229; contrast 7.61:1.
Above 4.5:1 for the baseline normal-size text.
Baseline: 16 CSS px (12 pt), weight 400, opaque solid colors, no text shadow. Ratios use sRGB relative luminance. Changing text size changes the font context; a ratio alone is not a page audit.
Choosing a delivery option
At 320 CSS pixels, check whether both the description and action remain available.
Standard demo delivery
A fictional delivery option for your home and desk accessories.
No delivery option selected in this example.
A notice with room to grow
Apply text spacing or 200% text size in Display tests. Look for missing words at the bottom of this notice.
You can change the delivery address before completing the demo checkout. Check the street, house number and postal code.
An option in system colors
Tab to the checkbox and press Space. Compare the boundary, selected mark and focus indicator.
Option not selected.
For native testing, enable a Windows contrast theme and confirm the detected forced-colors preference above. The component-only preview helps compare styles; native Windows testing is still a separate check.
Reduced motion
These fixtures contain no animation or automatic movement. The app disables CSS animation and transitions when reduced motion is requested. No motion-specific WCAG failure is asserted here.