TL;DR:
Two colors can look different to you yet have nearly the same brightness, which makes them hard to tell apart for many people and for software.
Contrast ratio is a measured number; 4.5 to 1 is the usual minimum for normal text.
Direct labels, patterns and shapes make a chart readable without depending on color.
A line chart has two lines, one red and one green. To you they look clearly different. To a colleague with red-green color blindness they might look like the same muddy brown, and an assistant describing the picture may confuse them too. Color is a poor way to carry the only meaning in a picture, and contrast is how you measure why.
The short answer
Colors differ in hue, which is what we name them by, and in brightness, which is how light or dark they are. People with color blindness, and also software looking at a downsized or compressed picture, rely heavily on brightness. If two colors have the same brightness, they blur together even when the hues differ.
Contrast is a number that compares the brightness of two colors. A widely used accessibility standard measures it as a ratio, and asks for at least 4.5 to 1 between normal-size text and its background. Black on white is 21 to 1, the highest possible.
What happens step by step
Each color is converted to a brightness value, called relative luminance, from its red, green and blue parts.
The two values are compared in the ratio
(lighter + 0.05) / (darker + 0.05).The ratio ranges from 1 to 1 (identical) up to 21 to 1 (black on white).
A low ratio means the two colors are hard to separate when hue cannot be relied on.
Walk-through: a chart with similar colors
Take a chart with a red line #C0392B and a green line #1E8449, on white. Their brightness values come out at about 0.143 for the red and 0.173 for the green. The ratio between them is (0.173 + 0.05) / (0.143 + 0.05) = 0.223 / 0.193 ≈ 1.15, so about 1.15 to 1.
That is barely above 1 to 1. In a grayscale printout, the two lines are nearly the same gray. For someone who cannot easily tell red from green, they are close to indistinguishable. An assistant looking at a small, compressed screenshot can also confuse which line is which, especially where the two cross.
Compare the lines with the white background. Grey #767676 on white scores 4.54 to 1, just above the 4.5 minimum for normal text. A lighter grey, #AAAAAA, scores 2.32 to 1, below it. So the pale grey text some designs use for axis labels is hard to read for the same reason.
How do you fix the chart? Don't depend on the hue difference. Make one line darker or lighter, use a dashed line for one, and label each line at its end with its name. Now someone who sees only brightness, a printer, or an assistant can say which line is which without guessing colors.
Tip: A quick test: take a screenshot and turn it to grayscale. If you can no longer tell your series apart, color is carrying too much of the meaning.
Color blindness and charts
Red and green are the classic trouble pair, but blue and purple, or similar-brightness greens and browns, can also merge.
Add a second cue: dashes, markers with different shapes, or patterns in bars.
Use direct labels next to the data instead of a legend that sends the eye back and forth.
Check contrast for text on top of colored backgrounds, not just on white.
What it can't do
See color the way you do. An assistant may describe a color roughly, or miss a subtle difference after compression.
Replace a contrast checker. For design work, use a tool that computes the ratio.
Know which colors matter to you unless you point them out.
Fix a chart that has no labels. Ask the author, or add labels yourself.
Why a downsized picture hides differences
Pictures sent for reading are often compressed or shrunk. Compression blends neighbouring pixels, so a thin line of one color next to a thin line of another can merge into a single band. When the two colors also have nearly the same brightness, as with the 1.15 to 1 pair above, there is little left to separate them. A higher-contrast pair survives the shrinking much better.
Recompute the contrast of black text on white to see the other end of the scale: black has luminance 0 and white has 1, so the ratio is (1 + 0.05) / (0 + 0.05) = 1.05 / 0.05 = 21, the 21 to 1 maximum.
Privacy and control
When you ask an assistant about a chart, the chart is in the picture it reads. Charts often hold real numbers from work or school, so check what else is visible around them. If it is a draft for a meeting, ask only about the chart region.
For a screen that is hard to read, DuckyHelper can point things out and talk you through them out loud, and it only looks while the pill is open.
Try it yourself
Make a two-line chart in a spreadsheet using two colors of similar brightness, and take a screenshot. Turn the screenshot to grayscale and ask an assistant which line goes up faster. Then add direct labels and a dashed style and ask again. The second version should be easy for everyone, you included.
Frequently asked questions
Is contrast only about people with color blindness?
No. Glare, small screens, poor eyesight and low-quality captures all make low-contrast pictures harder to read for everyone.
What is the easiest fix for a color-only chart?
Label the lines or bars directly and add a second cue such as dashes or markers.
Get started
