Ruby not red: color theory for the rest of us
summary
About 4.5% of users (about one in 12 men, one in 200 women) have colour-vision deficiencies, so rely on WCAG contrast ratios 4.5:1 / 7:1 and don’t use colour alone to convey information. Concrete tactics: add icons and error text to forms, use patterns/text in charts, label colour swatches, underline links, and ensure text-over-image legibility with opaque overlays or shadows. Tooling recommended: WebAIM contrast checker, NoCoffee simulator, coloursafe.co, and Trello’s colour-blind mode.
AI-written summary · about
chapters (12)
- 0:00Start
- 7:21Color Blindness What is it?
- 10:14Full Color Vision
- 11:20Common Types of Color Vision Deficiency
- 17:25Typography The Impact of Color, Contrast, and Size on Legibility
- 18:10A quick typography crash course
- 18:5545-90 characters per line
- 19:22Contrast is key
- 19:55What the heck is contrast ratio?
- 20:14Ratios range from 1 to 21
- 20:304.5:1 minimum contrast ratio
- 22:067:1 contrast ratio for users with vision loss
related talks
06mDesign Accessibly: Color Contrast Tips and Tools
40mBeyond Aesthetics: Designing with Color for Accessibility and Inclusion
44mError 404: Color Not found
41mColor - The Shadow Ruler of UX
41mTMNT Guide to Color Theory
49mInclusive Color: from Photons and Physiology to Psychology and Philosophy
19mWhen colour theory meets technology
11mThis 1 simple 600-year-old trick makes your website more accessible!