{"course":{"slug":"visual-storytelling","title":"Making It Say Something","url":"https://addaly.com/learn/visual-storytelling","level":"beginner","track":"create"},"lesson":{"slug":"contrast-makes-meaning","title":"The eye reports differences, never values","url":"https://addaly.com/learn/visual-storytelling/contrast-makes-meaning","position":11,"of":64,"minutes":9,"answer":"The visual system reports differences rather than values, so legibility is a measurable relationship (at least 4.5:1 for body text) and a hierarchy built on hue alone vanishes in greyscale.","keyIdea":"The visual system reports differences rather than values, so legibility is a measurable relationship (at least 4.5:1 for body text) and a hierarchy built on hue alone vanishes in greyscale, in one-colour print and for anyone with colour vision deficiency."},"body":{"format":"markdown","text":"## Your visual system does not measure brightness\n\nA patch of grey on a dark background looks light. The same patch on a white background looks dark. Nothing about the patch changed. This is not an illusion in the sense of a trick: it is how the system works. Retinal cells respond strongly to edges and differences and weakly to steady, uniform values, so what reaches your awareness is already a map of contrasts rather than a map of brightnesses.\n\nEvery practical consequence in this lesson follows from that one fact. A colour has no properties on its own. It only has a relationship to what surrounds it, and design is the business of arranging those relationships.\n\n## Contrast is measurable, and there is a free way to check it\n\nFor text legibility, the widely used figure comes from the Web Content Accessibility Guidelines: a contrast ratio of at least **4.5:1** between text and its background for normal-size text, and **3:1** for large text, large meaning about 18pt regular or 14pt bold and upward. The ratio runs from 1:1 (identical) to 21:1 (pure black on pure white).\n\nThose numbers were derived for screens and for people with moderately reduced vision, and they are a floor rather than a target. They are worth knowing because they turn an argument about taste into a number anybody can check. Free checkers exist in every browser's developer tools, in the Colour Contrast Analyser, and inside Inkscape and Figma via extensions.\n\nThe usual failures, all of which pass a designer's eye on a good monitor in a dark room and fail on a phone in sunlight:\n\n- Light grey body text on white: often around 2.5:1.\n- White text on a photograph, where the ratio varies across the image and is fine over the dark half and invisible over the sky.\n- Two mid-tone brand colours placed on each other because they are \"the brand colours\".\n\n## Contrast is not only tonal\n\nTone is the strongest axis, but there are others, and mixing them is what makes work feel composed rather than merely loud:\n\n- **Scale**: one large shape among small ones.\n- **Shape**: one curve in a field of rectangles.\n- **Texture**: a photograph against flat colour.\n- **Direction**: one diagonal in a grid of horizontals.\n- **Density**: a crowded block beside an open one.\n\nA design with strong tonal contrast and nothing else tends to look like a warning sign. A design with five kinds of contrast at once looks chaotic. Two is usually right, which is the same arithmetic as the emphasis levers, for the same reason.\n\n## The test that settles it: remove the colour\n\nConvert the work to greyscale. It takes one keystroke in GIMP (Image → Mode → Grayscale), Krita, Photopea or Photoshop, and there is a greyscale filter in browser developer tools. If the hierarchy survives, your contrast is doing real work. If everything turns into the same mid-grey soup, you built the hierarchy out of hue alone.\n\nHue alone is the specific trap. Red and green of identical lightness are strikingly different in colour and almost identical in tone. Around one in twelve men and one in two hundred women has some form of colour vision deficiency, most commonly in exactly that red-green axis, so a chart or a status indicator distinguished only by hue is unreadable to a meaningful share of any audience. It also disappears entirely in a one-colour photocopy, which is how a surprising number of flyers end up being reproduced.\n\nThe fix is never to avoid colour. It is to make sure colour is the second signal and tone, shape or position is the first: a red line that is also thicker, a green tick that is also a tick.\n\n## Why it fails in the room it was not designed in\n\nYou are looking at a bright, calibrated screen at arm's length in controlled light. The viewer is looking at a cheap phone at 30% brightness in daylight, or at a print where the ink has spread slightly into uncoated paper and thin type has thickened and closed up. Every one of those conditions **reduces** effective contrast; none increases it.\n\nSo design with headroom. If 4.5:1 is the floor, land nearer 7:1 for anything that has to work outdoors, on cheap paper, or at a distance. The cost of extra contrast is almost always aesthetic restraint. The cost of insufficient contrast is that the piece does not function at all for part of your audience, and you never hear about it, because people who cannot read something do not send feedback; they move on."},"check":{"question":"A dashboard marks healthy items green and failing ones red, at identical lightness. It tests well in the studio. What is the mechanism of its failure in use?","options":[{"text":"Hue is the only signal, and hue is the channel that colour vision deficiency degrades.","correct":true},{"text":"Red and green carry opposite cultural meanings in some markets, so the semantics do not transfer internationally.","correct":false,"tempting":"Raises a real localisation concern but not the failure here, which affects viewers inside the same culture as the designers."},{"text":"Saturated colours fatigue the eye over long viewing sessions, so users stop distinguishing the states.","correct":false,"tempting":"Invokes fatigue rather than perception; the states are indistinguishable at first glance, not after prolonged use."},{"text":"The dashboard needs a legend, since colour coding is only meaningful once its key has been learned.","correct":false,"tempting":"Addresses convention rather than perception: a legend does not help a viewer who cannot tell the two marks apart in the first place."}]},"prev":{"slug":"the-five-levers","title":"There are only five ways to make something look important","url":"https://addaly.com/learn/visual-storytelling/the-five-levers"},"next":{"slug":"where-the-eye-goes","title":"You see far less at once than you think","url":"https://addaly.com/learn/visual-storytelling/where-the-eye-goes"},"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) 'The eye reports differences, never values', in Making It Say Something. Edited by M. Mun. Addaly. Available at: https://addaly.com/learn/visual-storytelling/contrast-makes-meaning (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":"The eye reports differences, never values","courseTitle":"Making It Say Something","module":{"index":2,"slug":"making-one-message-survive","title":"Making one message survive"},"answer":null,"keyIdea":"The visual system reports differences rather than values, so legibility is a measurable relationship (at least 4.5:1 for body text) and a hierarchy built on hue alone vanishes in greyscale, in one-colour print and for anyone with colour vision deficiency.","hero":{"kind":"plate","image":null,"alt":null,"caption":null},"blocks":[{"t":"h2","id":"your-visual-system-does-not-measure-brightness","runs":[{"text":"Your visual system does not measure brightness"}]},{"t":"p","runs":[{"text":"A patch of grey on a dark background looks light. The same patch on a white background looks dark. Nothing about the patch changed. This is not an illusion in the sense of a trick: it is how the system works. Retinal cells respond strongly to edges and differences and weakly to steady, uniform values, so what reaches your awareness is already a map of contrasts rather than a map of brightnesses."}]},{"t":"p","runs":[{"text":"Every practical consequence in this lesson follows from that one fact. A colour has no properties on its own. It only has a relationship to what surrounds it, and design is the business of arranging those relationships."}]},{"t":"h2","id":"contrast-is-measurable-and-there-is-a-free-way-to-check-it","runs":[{"text":"Contrast is measurable, and there is a free way to check it"}]},{"t":"p","runs":[{"text":"For text legibility, the widely used figure comes from the Web Content Accessibility Guidelines: a contrast ratio of at least "},{"text":"4.5:1","b":true},{"text":" between text and its background for normal-size text, and "},{"text":"3:1","b":true},{"text":" for large text, large meaning about 18pt regular or 14pt bold and upward. The ratio runs from 1:1 (identical) to 21:1 (pure black on pure white)."}]},{"t":"p","runs":[{"text":"Those numbers were derived for screens and for people with moderately reduced vision, and they are a floor rather than a target. They are worth knowing because they turn an argument about taste into a number anybody can check. Free checkers exist in every browser’s developer tools, in the Colour Contrast Analyser, and inside Inkscape and Figma via extensions."}]},{"t":"p","runs":[{"text":"The usual failures, all of which pass a designer’s eye on a good monitor in a dark room and fail on a phone in sunlight:"}]},{"t":"ul","items":[[{"text":"Light grey body text on white: often around 2.5:1."}],[{"text":"White text on a photograph, where the ratio varies across the image and is fine over the dark half and invisible over the sky."}],[{"text":"Two mid-tone brand colours placed on each other because they are “the brand colours”."}]]},{"t":"h2","id":"contrast-is-not-only-tonal","runs":[{"text":"Contrast is not only tonal"}]},{"t":"p","runs":[{"text":"Tone is the strongest axis, but there are others, and mixing them is what makes work feel composed rather than merely loud:"}]},{"t":"ul","items":[[{"text":"Scale","b":true},{"text":": one large shape among small ones."}],[{"text":"Shape","b":true},{"text":": one curve in a field of rectangles."}],[{"text":"Texture","b":true},{"text":": a photograph against flat colour."}],[{"text":"Direction","b":true},{"text":": one diagonal in a grid of horizontals."}],[{"text":"Density","b":true},{"text":": a crowded block beside an open one."}]]},{"t":"p","runs":[{"text":"A design with strong tonal contrast and nothing else tends to look like a warning sign. A design with five kinds of contrast at once looks chaotic. Two is usually right, which is the same arithmetic as the emphasis levers, for the same reason."}]},{"t":"h2","id":"the-test-that-settles-it-remove-the-colour","runs":[{"text":"The test that settles it: remove the colour"}]},{"t":"p","runs":[{"text":"Convert the work to greyscale. It takes one keystroke in GIMP (Image → Mode → Grayscale), Krita, Photopea or Photoshop, and there is a greyscale filter in browser developer tools. If the hierarchy survives, your contrast is doing real work. If everything turns into the same mid-grey soup, you built the hierarchy out of hue alone."}]},{"t":"p","runs":[{"text":"Hue alone is the specific trap. Red and green of identical lightness are strikingly different in colour and almost identical in tone. Around one in twelve men and one in two hundred women has some form of colour vision deficiency, most commonly in exactly that red-green axis, so a chart or a status indicator distinguished only by hue is unreadable to a meaningful share of any audience. It also disappears entirely in a one-colour photocopy, which is how a surprising number of flyers end up being reproduced."}]},{"t":"p","runs":[{"text":"The fix is never to avoid colour. It is to make sure colour is the second signal and tone, shape or position is the first: a red line that is also thicker, a green tick that is also a tick."}]},{"t":"h2","id":"why-it-fails-in-the-room-it-was-not-designed-in","runs":[{"text":"Why it fails in the room it was not designed in"}]},{"t":"p","runs":[{"text":"You are looking at a bright, calibrated screen at arm’s length in controlled light. The viewer is looking at a cheap phone at 30% brightness in daylight, or at a print where the ink has spread slightly into uncoated paper and thin type has thickened and closed up. Every one of those conditions "},{"text":"reduces","b":true},{"text":" effective contrast; none increases it."}]},{"t":"p","runs":[{"text":"So design with headroom. If 4.5:1 is the floor, land nearer 7:1 for anything that has to work outdoors, on cheap paper, or at a distance. The cost of extra contrast is almost always aesthetic restraint. The cost of insufficient contrast is that the piece does not function at all for part of your audience, and you never hear about it, because people who cannot read something do not send feedback; they move on."}]}],"check":{"question":[{"text":"A dashboard marks healthy items green and failing ones red, at identical lightness. It tests well in the studio. What is the mechanism of its failure in use?"}],"options":[{"text":[{"text":"Hue is the only signal, and hue is the channel that colour vision deficiency degrades."}],"correct":true,"tempting":null},{"text":[{"text":"Red and green carry opposite cultural meanings in some markets, so the semantics do not transfer internationally."}],"correct":false,"tempting":[{"text":"Raises a real localisation concern but not the failure here, which affects viewers inside the same culture as the designers."}]},{"text":[{"text":"Saturated colours fatigue the eye over long viewing sessions, so users stop distinguishing the states."}],"correct":false,"tempting":[{"text":"Invokes fatigue rather than perception; the states are indistinguishable at first glance, not after prolonged use."}]},{"text":[{"text":"The dashboard needs a legend, since colour coding is only meaningful once its key has been learned."}],"correct":false,"tempting":[{"text":"Addresses convention rather than perception: a legend does not help a viewer who cannot tell the two marks apart in the first place."}]}],"order":[1,3,0,2],"why":null},"prev":{"slug":"the-five-levers","title":"There are only five ways to make something look important","minutes":9},"next":{"slug":"where-the-eye-goes","title":"You see far less at once than you think","minutes":9}}}