{"course":{"slug":"visual-storytelling","title":"Making It Say Something","url":"https://addaly.com/learn/visual-storytelling","level":"beginner","track":"create"},"lesson":{"slug":"designing-for-eyes-not-yours","title":"One in twelve men cannot see the difference you just used","url":"https://addaly.com/learn/visual-storytelling/designing-for-eyes-not-yours","position":45,"of":64,"minutes":9,"answer":"Colour vision deficiency, poor screens and sunlight make the impaired case the ordinary case, so measure contrast rather than eyeballing luminance, never encode meaning in hue alone, and honour reduced-motion.","keyIdea":"Colour vision deficiency, poor screens and sunlight make the impaired case the ordinary case, so measure contrast rather than eyeballing luminance, never encode meaning in hue alone, and honour reduced-motion, while knowing the 4.5:1 threshold is a contested floor rather than a guarantee."},"body":{"format":"markdown","text":"## Who you are actually designing for\n\nRoughly **8 per cent of men and 0.5 per cent of women** of northern European descent have some form of colour vision deficiency, with lower but non-trivial rates in other populations. The commonest form is deuteranomaly, a shifted green sensitivity, which makes reds, greens, browns and oranges collapse towards one another.\n\nA much larger group has something else going on: presbyopia after forty, cataracts, a cheap screen, a projector with a dying lamp, bright sunlight on a phone, or a moving train. In aggregate, the share of your audience not seeing your design under ideal conditions approaches all of them.\n\nThis is not a special case to handle at the end. It is the ordinary case.\n\n## Contrast ratios, and what the number means\n\nThe contrast ratio compares the **relative luminance** of two colours: a weighted measure of how much light they emit or reflect, weighted because the eye is far more sensitive to green than to blue. The scale runs from 1:1 (identical) to 21:1 (pure black on pure white).\n\nThe widely used thresholds:\n\n- **4.5:1** for body text.\n- **3:1** for large text, meaning about 18pt, or 14pt bold.\n- **3:1** for interface components and meaningful graphics: the edge of a form field, an icon that carries information.\n- **7:1** is the enhanced level, for text that has to work in poor conditions.\n\nThe practical consequence that catches people: **luminance is not lightness as you perceive it.** A mid-yellow looks bright but has high luminance, so yellow on white fails badly while the same-looking blue passes easily. You cannot eyeball this; you have to measure it, and the measurement is free.\n\n> Figure: Contrast ratios, floors and a common failure. Bars (to 1): Light grey text on white 2.5; Large text floor 3; Body text floor 4.5; Enhanced level 7; Black on white 21. Luminance is not lightness as you perceive it, which is why a mid-yellow that looks bright fails on white while a blue that looks similar passes. You cannot eyeball this, and measuring it is free.\n\n## The three checks that take two minutes\n\n1. **Greyscale.** Turn the display to greyscale, or desaturate a screenshot. Anything that becomes indistinguishable was carrying information in hue alone.\n2. **Contrast.** Run every text-and-background pair through a checker: WebAIM's web page, the Colour Contrast Analyser desktop app, or the contrast readout built into Chrome and Firefox developer tools.\n3. **Sunlight.** Take the phone outside. Light grey text on white, thin weights and low-contrast placeholders fail here first and most.\n\n## Motion, and the people it makes ill\n\nAutoplaying parallax, large sliding transitions and looping background video cause genuine symptoms (nausea, dizziness, disorientation) for people with vestibular disorders. This is not a preference.\n\nOperating systems expose a *reduce motion* setting, and the web exposes it to CSS:\n\n```css\n@media (prefers-reduced-motion: reduce) {\n  * { animation: none !important; transition: none !important; }\n}\n```\n\nSix lines, honoured by every modern browser. For video, the equivalent courtesy is not autoplaying anything with rapid flashing, and a rate above three flashes per second is the threshold associated with photosensitive seizures.\n\n## Text that can be resized, and other small mercies\n\n- Do not disable pinch zoom. `user-scalable=no` in a viewport tag is a line of code that removes a disabled person's ability to read your page.\n- Set sizes in relative units so a reader's own larger default is respected.\n- Give a form field a real label, not a placeholder that vanishes the moment somebody starts typing and takes the question with it.\n- Give every informative image alt text, and every decorative one empty alt text.\n- Make a focus outline visible. Removing it because it looked untidy leaves keyboard users navigating a page with no cursor.\n\n## The contrast standard itself is contested\n\nHere is the unsettled part, and it is worth knowing because you will meet designers on both sides.\n\nThe current contrast formula is known to model some cases badly. It handles dark mode poorly (it can pass a pairing that is hard to read on a dark background and fail one that is comfortable) and it ignores font weight and size almost entirely, when a hairline weight at 4.5:1 is plainly harder than a bold at the same ratio. A proposed replacement, APCA, models perceived lightness difference and does take weight into account. It has been in draft for years and is not the adopted standard.\n\nSo the position to hold: **the 4.5:1 threshold is the accepted baseline and the one you will be measured against, and it is a floor rather than a guarantee.** Meet it, then look at the thing on a real screen in real light, because a pairing that passes and still looks faint to you is faint.\n\n## Why this is not charity\n\nThe strongest argument is not moral. Every one of these decisions improves the design for people with no impairment at all: in sunlight, on a bad screen, tired, in a hurry, on a train. Captions serve the hearing majority. High contrast serves everybody outdoors. A visible focus outline serves anybody who prefers a keyboard. Designing for the edge of the range is how you get a design that works in the middle of it."},"check":{"question":"A designer checks a yellow-on-white label by eye, judges it bright and clear, and ships it. Why does it fail a contrast measurement?","options":[{"text":"Contrast ratios are calculated for print reflectance, so screen colours routinely score lower than they appear.","correct":false,"tempting":"Invents a medium mismatch; the formula is defined for screen luminance and the yellow would fail on paper too."},{"text":"Saturated colours are excluded from the contrast formula, which only compares neutral tones.","correct":false,"tempting":"Describes a restriction the formula does not have; it accepts any two colours and returns a ratio for them."},{"text":"Yellow is the hue most affected by red-green colour vision deficiency, so the standard applies an additional penalty to yellow pairings in order to protect those readers from unreadable text.","correct":false,"tempting":"Imagines a correction factor for colour vision that the ratio does not contain, and misidentifies which confusions deuteranomaly actually causes."},{"text":"The ratio is computed from relative luminance, and yellow has high luminance, so it sits close to white on the scale despite looking vivid.","correct":true}]},"prev":{"slug":"colour-means-locally","title":"Red is not danger everywhere","url":"https://addaly.com/learn/visual-storytelling/colour-means-locally"},"next":{"slug":"the-photograph-is-an-argument","title":"Every photograph is mostly the part you cut off","url":"https://addaly.com/learn/visual-storytelling/the-photograph-is-an-argument"},"authorship":"Founder and series editor: Dr Mustafa Mun. Written by AI models to a written standard. Exam keys checked blind by a second model: 3,665 of 3,666 agreed. Academic review invited.","review":{"status":"Draft, open for academic review"},"cite":"Addaly (2026) 'One in twelve men cannot see the difference you just used', in Making It Say Something. Edited by M. Mun. Addaly. Available at: https://addaly.com/learn/visual-storytelling/designing-for-eyes-not-yours (Accessed: 13 October 2026).","licence":{"name":"CC BY-NC-SA 4.0","url":"https://creativecommons.org/licenses/by-nc-sa/4.0/"},"reader":{"schema":1,"title":"One in twelve men cannot see the difference you just used","courseTitle":"Making It Say Something","module":{"index":6,"slug":"materials-of-meaning","title":"Type, colour and image as meaning"},"answer":null,"keyIdea":"Colour vision deficiency, poor screens and sunlight make the impaired case the ordinary case, so measure contrast rather than eyeballing luminance, never encode meaning in hue alone, and honour reduced-motion, while knowing the 4.5:1 threshold is a contested floor rather than a guarantee.","hero":{"kind":"figure","figure":{"t":"figure","label":"Figure","figure":{"type":"bars","unit":"to 1","title":"Contrast ratios, floors and a common failure","series":[{"label":"Light grey text on white","value":2.5,"highlight":true},{"label":"Large text floor","value":3},{"label":"Body text floor","value":4.5},{"label":"Enhanced level","value":7},{"label":"Black on white","value":21}],"caption":"Luminance is not lightness as you perceive it, which is why a mid-yellow that looks bright fails on white while a blue that looks similar passes. You cannot eyeball this, and measuring it is free."},"alt":"Figure: Contrast ratios, floors and a common failure. Bars (to 1): Light grey text on white 2.5; Large text floor 3; Body text floor 4.5; Enhanced level 7; Black on white 21. Luminance is not lightness as you perceive it, which is why a mid-yellow that looks bright fails on white while a blue that looks similar passes. You cannot eyeball this, and measuring it is free."}},"blocks":[{"t":"h2","id":"who-you-are-actually-designing-for","runs":[{"text":"Who you are actually designing for"}]},{"t":"p","runs":[{"text":"Roughly "},{"text":"8 per cent of men and 0.5 per cent of women","b":true},{"text":" of northern European descent have some form of colour vision deficiency, with lower but non-trivial rates in other populations. The commonest form is deuteranomaly, a shifted green sensitivity, which makes reds, greens, browns and oranges collapse towards one another."}]},{"t":"p","runs":[{"text":"A much larger group has something else going on: presbyopia after forty, cataracts, a cheap screen, a projector with a dying lamp, bright sunlight on a phone, or a moving train. In aggregate, the share of your audience not seeing your design under ideal conditions approaches all of them."}]},{"t":"p","runs":[{"text":"This is not a special case to handle at the end. It is the ordinary case."}]},{"t":"h2","id":"contrast-ratios-and-what-the-number-means","runs":[{"text":"Contrast ratios, and what the number means"}]},{"t":"p","runs":[{"text":"The contrast ratio compares the "},{"text":"relative luminance","b":true},{"text":" of two colours: a weighted measure of how much light they emit or reflect, weighted because the eye is far more sensitive to green than to blue. The scale runs from 1:1 (identical) to 21:1 (pure black on pure white)."}]},{"t":"p","runs":[{"text":"The widely used thresholds:"}]},{"t":"ul","items":[[{"text":"4.5:1","b":true},{"text":" for body text."}],[{"text":"3:1","b":true},{"text":" for large text, meaning about 18pt, or 14pt bold."}],[{"text":"3:1","b":true},{"text":" for interface components and meaningful graphics: the edge of a form field, an icon that carries information."}],[{"text":"7:1","b":true},{"text":" is the enhanced level, for text that has to work in poor conditions."}]]},{"t":"p","runs":[{"text":"The practical consequence that catches people: "},{"text":"luminance is not lightness as you perceive it.","b":true},{"text":" A mid-yellow looks bright but has high luminance, so yellow on white fails badly while the same-looking blue passes easily. You cannot eyeball this; you have to measure it, and the measurement is free."}]},{"t":"h2","id":"the-three-checks-that-take-two-minutes","runs":[{"text":"The three checks that take two minutes"}]},{"t":"ol","start":1,"items":[[{"text":"Greyscale.","b":true},{"text":" Turn the display to greyscale, or desaturate a screenshot. Anything that becomes indistinguishable was carrying information in hue alone."}],[{"text":"Contrast.","b":true},{"text":" Run every text-and-background pair through a checker: WebAIM’s web page, the Colour Contrast Analyser desktop app, or the contrast readout built into Chrome and Firefox developer tools."}],[{"text":"Sunlight.","b":true},{"text":" Take the phone outside. Light grey text on white, thin weights and low-contrast placeholders fail here first and most."}]]},{"t":"h2","id":"motion-and-the-people-it-makes-ill","runs":[{"text":"Motion, and the people it makes ill"}]},{"t":"p","runs":[{"text":"Autoplaying parallax, large sliding transitions and looping background video cause genuine symptoms (nausea, dizziness, disorientation) for people with vestibular disorders. This is not a preference."}]},{"t":"p","runs":[{"text":"Operating systems expose a "},{"text":"reduce motion","i":true},{"text":" setting, and the web exposes it to CSS:"}]},{"t":"code","lang":"css","label":"CSS","text":"@media (prefers-reduced-motion: reduce) {\n  * { animation: none !important; transition: none !important; }\n}"},{"t":"p","runs":[{"text":"Six lines, honoured by every modern browser. For video, the equivalent courtesy is not autoplaying anything with rapid flashing, and a rate above three flashes per second is the threshold associated with photosensitive seizures."}]},{"t":"h2","id":"text-that-can-be-resized-and-other-small-mercies","runs":[{"text":"Text that can be resized, and other small mercies"}]},{"t":"ul","items":[[{"text":"Do not disable pinch zoom. "},{"text":"user-scalable=no","code":true},{"text":" in a viewport tag is a line of code that removes a disabled person’s ability to read your page."}],[{"text":"Set sizes in relative units so a reader’s own larger default is respected."}],[{"text":"Give a form field a real label, not a placeholder that vanishes the moment somebody starts typing and takes the question with it."}],[{"text":"Give every informative image alt text, and every decorative one empty alt text."}],[{"text":"Make a focus outline visible. Removing it because it looked untidy leaves keyboard users navigating a page with no cursor."}]]},{"t":"h2","id":"the-contrast-standard-itself-is-contested","runs":[{"text":"The contrast standard itself is contested"}]},{"t":"p","runs":[{"text":"Here is the unsettled part, and it is worth knowing because you will meet designers on both sides."}]},{"t":"p","runs":[{"text":"The current contrast formula is known to model some cases badly. It handles dark mode poorly (it can pass a pairing that is hard to read on a dark background and fail one that is comfortable) and it ignores font weight and size almost entirely, when a hairline weight at 4.5:1 is plainly harder than a bold at the same ratio. A proposed replacement, APCA, models perceived lightness difference and does take weight into account. It has been in draft for years and is not the adopted standard."}]},{"t":"p","runs":[{"text":"So the position to hold: "},{"text":"the 4.5:1 threshold is the accepted baseline and the one you will be measured against, and it is a floor rather than a guarantee.","b":true},{"text":" Meet it, then look at the thing on a real screen in real light, because a pairing that passes and still looks faint to you is faint."}]},{"t":"h2","id":"why-this-is-not-charity","runs":[{"text":"Why this is not charity"}]},{"t":"p","runs":[{"text":"The strongest argument is not moral. Every one of these decisions improves the design for people with no impairment at all: in sunlight, on a bad screen, tired, in a hurry, on a train. Captions serve the hearing majority. High contrast serves everybody outdoors. A visible focus outline serves anybody who prefers a keyboard. Designing for the edge of the range is how you get a design that works in the middle of it."}]}],"check":{"question":[{"text":"A designer checks a yellow-on-white label by eye, judges it bright and clear, and ships it. Why does it fail a contrast measurement?"}],"options":[{"text":[{"text":"Contrast ratios are calculated for print reflectance, so screen colours routinely score lower than they appear."}],"correct":false,"tempting":[{"text":"Invents a medium mismatch; the formula is defined for screen luminance and the yellow would fail on paper too."}]},{"text":[{"text":"Saturated colours are excluded from the contrast formula, which only compares neutral tones."}],"correct":false,"tempting":[{"text":"Describes a restriction the formula does not have; it accepts any two colours and returns a ratio for them."}]},{"text":[{"text":"Yellow is the hue most affected by red-green colour vision deficiency, so the standard applies an additional penalty to yellow pairings in order to protect those readers from unreadable text."}],"correct":false,"tempting":[{"text":"Imagines a correction factor for colour vision that the ratio does not contain, and misidentifies which confusions deuteranomaly actually causes."}]},{"text":[{"text":"The ratio is computed from relative luminance, and yellow has high luminance, so it sits close to white on the scale despite looking vivid."}],"correct":true,"tempting":null}],"order":[0,2,1,3],"why":null},"prev":{"slug":"colour-means-locally","title":"Red is not danger everywhere","minutes":9},"next":{"slug":"the-photograph-is-an-argument","title":"Every photograph is mostly the part you cut off","minutes":9}}}