Can you see that OK? CSS tips for low-vision accessibility
summary
Demo pages show browser zoom vs text-only resize problems and a live walkthrough uses Chrome/Firefox tools plus a grayscale filter and Windows high‑contrast to reveal failures. Concrete fixes include switching to responsive layouts using relative units (em/rem), moving widths/heights to flexible grid/flexbox, adding a 1px solid transparent border to outline overlays, using drop shadows or translucent panels for contrast, and restoring click affordance with underlines or text-decoration-skip-ink. 9% of Australians are affected.
AI-written summary · about
chapters (16)
- 0:00Start
- 2:47using browser tools to resize
- 4:40works in all of the major browsers
- 5:34resize your website
- 6:04using a text-only zoom to go to 300
- 7:47switch to a grid or a flexbox
- 9:07rely on color as a source of information
- 9:53change the color to white
- 10:08add a little drop shadow
- 11:33use a grayscale filter
- 12:18reverse the color of the background
- 12:46match your selectors to area
- 16:19select your own colors
- 17:13strips out background color
- 18:23outline any overlaid
- 18:59applying borders
related talks
30mWriting CSS with Accessibility in Mind
48mDesigning for Users With Low Vision
05mMake your website accessible for everyone
51mWriting even more CSS with Accessibility in Mind
01h 01mA web for anyone, anywhere, anytime
33mAccessibility Done Right
22mWeb Accessibility - a better user experience for everyone!
09mAccessible CSS in Everyday Life