{"course":{"slug":"design-foundations","title":"Design, before Any Software","url":"https://addaly.com/learn/design-foundations","level":"beginner","track":"create"},"lesson":{"slug":"contrast-beats-palette","title":"A palette will not save an unreadable page","url":"https://addaly.com/learn/design-foundations/contrast-beats-palette","position":35,"of":74,"minutes":10,"answer":"Build palettes by moving lightness rather than hue, check every text pair against a contrast number, and never let colour be the only thing carrying a meaning.","keyIdea":"Build palettes by moving lightness rather than hue, check every text pair against a contrast number, and never let colour be the only thing carrying a meaning."},"body":{"format":"markdown","text":"## Why palette generators disappoint\n\nThe usual first move is to visit a colour-palette site, spin the wheel until five swatches look pleasant together, and paste them in. The result is often worse than three greys would have been.\n\nThe reason is mechanical. Most of those tools vary **hue** while holding lightness roughly constant, because that is what makes a strip of swatches look harmonious. Convert the result to greyscale and the five colours collapse into nearly the same tone. You now have a page where nothing is lighter or darker than anything else: no ranking, and text sitting on its background at about two to one.\n\nHue is the least useful of the three properties you control. Lightness is the most useful, and it is the one those tools hold still.\n\n### Use hue, saturation, lightness, and mostly move lightness\n\nThe working model is HSL: hue (which colour), saturation (how much of it), lightness (how close to white or black). Photoshop's picker is HSB, sometimes called HSV, where the third slider is brightness and full brightness gives the pure colour rather than white. Photopea, GIMP and Krita offer both. Know which you are looking at, because the same number means different things.\n\nA method that takes two minutes:\n\n1. Pick **one** hue you like.\n2. Build a five-step ramp by moving lightness only: roughly 95, 80, 55, 30, 12. Drop saturation a little at the extremes so the pale end is not milky and the dark end not muddy.\n3. Add **one** accent hue, well separated on the wheel, reserved for the single thing you want people to act on.\n\nThat is a complete palette. It has hierarchy built into it, because it was built out of the property that produces hierarchy.\n\n## Contrast is a number you can check in twenty seconds\n\nText legibility is not a matter of opinion. There is a standard ratio, computed from the relative luminance of two colours, that runs from 1:1 (identical) to 21:1 (black on white).\n\nThe thresholds worth memorising, from the Web Content Accessibility Guidelines:\n\n- **4.5:1** for normal body text.\n- **3:1** for large text (roughly 24px, or 18.7px bold) and for interface components and meaningful graphics, such as the border of an input box or a line on a chart.\n- **7:1** if you are aiming at the stricter AAA level.\n\nSome numbers to make this concrete. Mid-grey **#767676** on white is 4.54:1 and passes. **#777777** on white is 4.48:1 and fails. That is one hex step. The habit of setting secondary text in a light grey because it looks refined usually fails by a margin that small, and the person it fails for is on a bus in the sun.\n\nMore: pure yellow **#FFFF00** on white is about 1.07:1: effectively invisible, which is why yellow highlighter works on paper and yellow text does not work anywhere. Pure blue **#0000FF** on white is about 8.6:1 and is fine. The same blue on black is about 2.4:1 and fails badly. So \"blue is readable\" is not a fact about blue. Contrast is always a property of a pair.\n\nFree ways to check:\n\n- The WebAIM Contrast Checker, a web page that works in a phone browser.\n- Chrome and Firefox developer tools show the ratio inside the colour picker when you inspect text.\n\n### Why 4.5:1 is a floor and not a goal\n\nYour design is being read in conditions you did not test.\n\nA phone at 30 per cent brightness in daylight loses most of the difference between a pale grey and white. Cheap panels have poorer contrast than the screen you designed on and often a colour cast. And eyes age: the lens yellows and the pupil narrows, so a sixty-year-old retina receives roughly a third of the light a twenty-year-old's does.\n\nNone of this is an argument for ugly high-contrast design. It is an argument for treating a marginal pass as a fail: at 4.6:1 you have no headroom for any of the conditions above.\n\n## Colour vision deficiency is a constraint, not a charity\n\nRoughly one man in twelve and one woman in two hundred has some form of colour vision deficiency, most commonly a reduced ability to separate red from green. In a room of thirty, assume someone cannot read your red-versus-green chart.\n\nThe fix is not \"choose friendlier colours\". Blue and orange are easier to tell apart than red and green, but swapping hues only moves the problem: some deficiency defeats every hue pair, and none survive a black-and-white photocopy.\n\nThe actual rule: **never encode information in hue alone.** Add a second channel.\n\n- A red cross and a green tick differ in shape as well as colour. Two coloured dots do not.\n- Label chart lines at the end of each line instead of colour-matching them to a legend.\n- Give the two states different lightness as well as hue, or add a pattern, icon or position as the second signal.\n\nTo test free: Coblis, a browser-based colour blindness simulator you upload an image to; GIMP has display filters for several deficiency types under View, Display Filters. Or the cheapest test of all: desaturate the image, and see whether the meaning survives.\n\n## Dark mode is not the same colours inverted\n\nPure white text on pure black is uncomfortable for many people and bad for readers with astigmatism, where bright text on a dark field blurs and smears: an effect called halation. The common fix is to back off both ends: something near **#E6E6E6** on something near **#121212**.\n\nAnd check your ratios again: a colour that passed comfortably on white often fails on a dark background.\n\n## Today\n\nTake a design you have made. Desaturate a copy and ask whether the hierarchy survives. Then pick your two most-used text colours and run them through a contrast checker against their actual backgrounds. If either comes in under 5:1, darken it until it does not."},"check":{"question":"A dashboard shows each server as a small red or green dot, and both dots pass a 4.5:1 contrast check against the page background. Some users still misread the status. What is the mechanism?","options":[{"text":"The status is carried by hue alone, so a reader with red-green colour vision deficiency gets no signal at all; contrast against the background says nothing about telling two states apart from each other.","correct":true},{"text":"The dots are too small: contrast ratios are defined for text and need a larger area to have any effect.","correct":false,"tempting":"Recasts a colour-coding problem as a size problem, and misreads what the contrast figure actually measures."},{"text":"Red and green should be replaced with blue and orange, which are safer for colour blindness.","correct":false,"tempting":"Swaps one hue pair for another instead of adding a second channel such as shape, position or a label."},{"text":"Small graphics should be checked at the stricter 7:1 level rather than 4.5:1.","correct":false,"tempting":"Applies a stricter version of the wrong test, treating a legibility threshold as if it governed distinguishability."}]},"prev":{"slug":"make-it-pop","title":"Make it pop is a symptom report","url":"https://addaly.com/learn/design-foundations/make-it-pop"},"next":{"slug":"why-hsl-lies-about-lightness","title":"The lightness slider is not lightness","url":"https://addaly.com/learn/design-foundations/why-hsl-lies-about-lightness"},"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) 'A palette will not save an unreadable page', in Design, before Any Software. Edited by M. Mun. Addaly. Available at: https://addaly.com/learn/design-foundations/contrast-beats-palette (Accessed: 31 October 2026).","licence":{"name":"CC BY-NC-SA 4.0","url":"https://creativecommons.org/licenses/by-nc-sa/4.0/"},"reader":{"schema":1,"title":"A palette will not save an unreadable page","courseTitle":"Design, before Any Software","module":{"index":4,"slug":"colour-measured","title":"Colour, measured"},"answer":null,"keyIdea":"Build palettes by moving lightness rather than hue, check every text pair against a contrast number, and never let colour be the only thing carrying a meaning.","hero":{"kind":"plate","image":null,"alt":null,"caption":null},"blocks":[{"t":"h2","id":"why-palette-generators-disappoint","runs":[{"text":"Why palette generators disappoint"}]},{"t":"p","runs":[{"text":"The usual first move is to visit a colour-palette site, spin the wheel until five swatches look pleasant together, and paste them in. The result is often worse than three greys would have been."}]},{"t":"p","runs":[{"text":"The reason is mechanical. Most of those tools vary "},{"text":"hue","b":true},{"text":" while holding lightness roughly constant, because that is what makes a strip of swatches look harmonious. Convert the result to greyscale and the five colours collapse into nearly the same tone. You now have a page where nothing is lighter or darker than anything else: no ranking, and text sitting on its background at about two to one."}]},{"t":"p","runs":[{"text":"Hue is the least useful of the three properties you control. Lightness is the most useful, and it is the one those tools hold still."}]},{"t":"h3","id":"use-hue-saturation-lightness-and-mostly-move-lightness","runs":[{"text":"Use hue, saturation, lightness, and mostly move lightness"}]},{"t":"p","runs":[{"text":"The working model is HSL: hue (which colour), saturation (how much of it), lightness (how close to white or black). Photoshop’s picker is HSB, sometimes called HSV, where the third slider is brightness and full brightness gives the pure colour rather than white. Photopea, GIMP and Krita offer both. Know which you are looking at, because the same number means different things."}]},{"t":"p","runs":[{"text":"A method that takes two minutes:"}]},{"t":"ol","start":1,"items":[[{"text":"Pick "},{"text":"one","b":true},{"text":" hue you like."}],[{"text":"Build a five-step ramp by moving lightness only: roughly 95, 80, 55, 30, 12. Drop saturation a little at the extremes so the pale end is not milky and the dark end not muddy."}],[{"text":"Add "},{"text":"one","b":true},{"text":" accent hue, well separated on the wheel, reserved for the single thing you want people to act on."}]]},{"t":"p","runs":[{"text":"That is a complete palette. It has hierarchy built into it, because it was built out of the property that produces hierarchy."}]},{"t":"h2","id":"contrast-is-a-number-you-can-check-in-twenty-seconds","runs":[{"text":"Contrast is a number you can check in twenty seconds"}]},{"t":"p","runs":[{"text":"Text legibility is not a matter of opinion. There is a standard ratio, computed from the relative luminance of two colours, that runs from 1:1 (identical) to 21:1 (black on white)."}]},{"t":"p","runs":[{"text":"The thresholds worth memorising, from the Web Content Accessibility Guidelines:"}]},{"t":"ul","items":[[{"text":"4.5:1","b":true},{"text":" for normal body text."}],[{"text":"3:1","b":true},{"text":" for large text (roughly 24px, or 18.7px bold) and for interface components and meaningful graphics, such as the border of an input box or a line on a chart."}],[{"text":"7:1","b":true},{"text":" if you are aiming at the stricter AAA level."}]]},{"t":"p","runs":[{"text":"Some numbers to make this concrete. Mid-grey "},{"text":"#767676","b":true},{"text":" on white is 4.54:1 and passes. "},{"text":"#777777","b":true},{"text":" on white is 4.48:1 and fails. That is one hex step. The habit of setting secondary text in a light grey because it looks refined usually fails by a margin that small, and the person it fails for is on a bus in the sun."}]},{"t":"p","runs":[{"text":"More: pure yellow "},{"text":"#FFFF00","b":true},{"text":" on white is about 1.07:1: effectively invisible, which is why yellow highlighter works on paper and yellow text does not work anywhere. Pure blue "},{"text":"#0000FF","b":true},{"text":" on white is about 8.6:1 and is fine. The same blue on black is about 2.4:1 and fails badly. So “blue is readable” is not a fact about blue. Contrast is always a property of a pair."}]},{"t":"p","runs":[{"text":"Free ways to check:"}]},{"t":"ul","items":[[{"text":"The WebAIM Contrast Checker, a web page that works in a phone browser."}],[{"text":"Chrome and Firefox developer tools show the ratio inside the colour picker when you inspect text."}]]},{"t":"h3","id":"why-4-5-1-is-a-floor-and-not-a-goal","runs":[{"text":"Why 4.5:1 is a floor and not a goal"}]},{"t":"p","runs":[{"text":"Your design is being read in conditions you did not test."}]},{"t":"p","runs":[{"text":"A phone at 30 per cent brightness in daylight loses most of the difference between a pale grey and white. Cheap panels have poorer contrast than the screen you designed on and often a colour cast. And eyes age: the lens yellows and the pupil narrows, so a sixty-year-old retina receives roughly a third of the light a twenty-year-old’s does."}]},{"t":"p","runs":[{"text":"None of this is an argument for ugly high-contrast design. It is an argument for treating a marginal pass as a fail: at 4.6:1 you have no headroom for any of the conditions above."}]},{"t":"h2","id":"colour-vision-deficiency-is-a-constraint-not-a-charity","runs":[{"text":"Colour vision deficiency is a constraint, not a charity"}]},{"t":"p","runs":[{"text":"Roughly one man in twelve and one woman in two hundred has some form of colour vision deficiency, most commonly a reduced ability to separate red from green. In a room of thirty, assume someone cannot read your red-versus-green chart."}]},{"t":"p","runs":[{"text":"The fix is not “choose friendlier colours”. Blue and orange are easier to tell apart than red and green, but swapping hues only moves the problem: some deficiency defeats every hue pair, and none survive a black-and-white photocopy."}]},{"t":"p","runs":[{"text":"The actual rule: "},{"text":"never encode information in hue alone.","b":true},{"text":" Add a second channel."}]},{"t":"ul","items":[[{"text":"A red cross and a green tick differ in shape as well as colour. Two coloured dots do not."}],[{"text":"Label chart lines at the end of each line instead of colour-matching them to a legend."}],[{"text":"Give the two states different lightness as well as hue, or add a pattern, icon or position as the second signal."}]]},{"t":"p","runs":[{"text":"To test free: Coblis, a browser-based colour blindness simulator you upload an image to; GIMP has display filters for several deficiency types under View, Display Filters. Or the cheapest test of all: desaturate the image, and see whether the meaning survives."}]},{"t":"h2","id":"dark-mode-is-not-the-same-colours-inverted","runs":[{"text":"Dark mode is not the same colours inverted"}]},{"t":"p","runs":[{"text":"Pure white text on pure black is uncomfortable for many people and bad for readers with astigmatism, where bright text on a dark field blurs and smears: an effect called halation. The common fix is to back off both ends: something near "},{"text":"#E6E6E6","b":true},{"text":" on something near "},{"text":"#121212","b":true},{"text":"."}]},{"t":"p","runs":[{"text":"And check your ratios again: a colour that passed comfortably on white often fails on a dark background."}]},{"t":"h2","id":"today","runs":[{"text":"Today"}]},{"t":"p","runs":[{"text":"Take a design you have made. Desaturate a copy and ask whether the hierarchy survives. Then pick your two most-used text colours and run them through a contrast checker against their actual backgrounds. If either comes in under 5:1, darken it until it does not."}]}],"check":{"question":[{"text":"A dashboard shows each server as a small red or green dot, and both dots pass a 4.5:1 contrast check against the page background. Some users still misread the status. What is the mechanism?"}],"options":[{"text":[{"text":"The status is carried by hue alone, so a reader with red-green colour vision deficiency gets no signal at all; contrast against the background says nothing about telling two states apart from each other."}],"correct":true,"tempting":null},{"text":[{"text":"The dots are too small: contrast ratios are defined for text and need a larger area to have any effect."}],"correct":false,"tempting":[{"text":"Recasts a colour-coding problem as a size problem, and misreads what the contrast figure actually measures."}]},{"text":[{"text":"Red and green should be replaced with blue and orange, which are safer for colour blindness."}],"correct":false,"tempting":[{"text":"Swaps one hue pair for another instead of adding a second channel such as shape, position or a label."}]},{"text":[{"text":"Small graphics should be checked at the stricter 7:1 level rather than 4.5:1."}],"correct":false,"tempting":[{"text":"Applies a stricter version of the wrong test, treating a legibility threshold as if it governed distinguishability."}]}],"order":[2,3,1,0],"why":null},"prev":{"slug":"make-it-pop","title":"Make it pop is a symptom report","minutes":9},"next":{"slug":"why-hsl-lies-about-lightness","title":"The lightness slider is not lightness","minutes":9}}}