What is contrast ratio?

How the number is worked out

The calculation starts by converting each colour into relative luminance, a value from 0 for pure black to 1 for pure white. The red, green and blue channels are not weighted equally: green contributes most to perceived brightness and blue least, which is why a saturated blue can look vivid yet behave like a dark colour. The two luminance values then go into a simple formula, the lighter one plus 0.05 divided by the darker one plus 0.05. White against black gives 1.05 divided by 0.05, which is 21. A common real example sits right on the line: the mid grey #777777 on white comes out at about 4.48:1 and fails, while the barely darker #767676 reaches about 4.54:1 and passes. Differences invisible to most people decide the result, which is why the check is done by calculation rather than by eye.

Why 4.5 and 3

The thresholds come from the Web Content Accessibility Guidelines, version 2.2, published by the W3C. Success criterion 1.4.3, at level AA, asks for 4.5:1 for normal text. The explanatory material behind it says the figure compensates for the loss of contrast sensitivity typically experienced by people with moderately low vision, and the stricter 7:1 at level AAA covers more severe vision loss. Large text gets a lower bar, 3:1, because wider strokes are easier to see. WCAG defines large as at least 18 point, or at least 14 point when bold. On screens that is roughly 24 and 18.5 CSS pixels. A separate criterion, 1.4.11, applies 3:1 to the parts of graphics people need to understand, such as the line of a chart or the edge of a form field.

When it matters on a flyer

WCAG is written for web content, so a paper flyer is not bound by it, but the eyes reading the flyer are the same. The guidance becomes practical in three places. Social versions of a flyer are seen on phones, often outdoors, at brightness settings nobody controls. Printed flyers pinned to a noticeboard are read from a step or two away, in corridor light. And a meaningful share of any audience has low vision or a colour vision deficiency, which includes many older customers for services such as pharmacies, clinics and councils. For the lines that carry the message, the date, the price and the call to action, meeting 4.5:1 costs nothing and removes a whole category of complaint. Decorative text and logos are exempt in the guidelines, and that exemption is a reasonable one to borrow for print.

Common mistakes

Text over photographs is the classic failure, because the ratio changes across the image; a headline can pass over a dark sky and fail over a white shirt a few centimetres lower. Light grey for secondary information such as dates and addresses is next, even though those are often the details a reader most needs. Brand colours cause trouble when a mid tone orange or teal is used for small text on white. Designers also check one pair and forget the reverse, such as white text on the brand colour used for a button. The ratio does not account for thin typefaces either: a light weight at a passing ratio can still be hard to read, so weight deserves a second look. Finally, checking on an expensive monitor hides problems that a cheap phone screen reveals immediately.

Where contrast shows up in the flyer builder

In the flyer builder, colours come from the theme, and each theme assigns its text colours to the surfaces they sit on. Switching between the 99 themes therefore changes text and background together rather than leaving dark text on a newly dark panel. The place where contrast can go wrong by hand is the Colour control on a text block, which accepts a theme colour or a custom hex value; a custom value is not tied to the surface underneath. Text also has a Drop shadow option, which can help a headline set over a busy photograph. Chart series cycle through theme colours with no colour control of their own. Style overrides are stored per canvas size, so a contrast fix made on the A4 page has to be made again on the story or post size.

Questions people ask