Tech●●●●●Difficulty 5 of 5

How much contrast does text need to be readable by people with low vision?

Web accessibility rules turn faint-grey-on-white into a number you can calculate, and the number 4.5 comes from simple arithmetic about eyes that see less sharply.

▶ Start the story

Under the Web Content Accessibility Guidelines, normal text needs a contrast ratio of at least 4.5:1 against its background, and large text needs at least 3:1. Large means 18 point text, or 14 point bold. The guidelines, known as WCAG, are a set of recommendations for improving web accessibility, primarily for people with disabilities. The contrast rule exists so that people with moderately low vision can read text.

Where does 4.5 come from? A contrast ratio of 3:1 is the minimum recommended by international and American standards for standard text and vision. People with moderately low vision need more. of 20/40 is associated with a loss of roughly 1.5, so such a user needs 3 times 1.5, which is 4.5 to 1. And 20/40 is commonly reported as typical visual acuity of elders at roughly age 80.

Where 4.5 comes from
  1. Step 1: Normal vision

    Minimum recommended ratio: 3:1.

  2. Step 2: 20/40 vision

    loss of roughly 1.5.

  3. Step 3: Multiply

    3 × 1.5 = 4.5.

  4. Step 4: Level AA

    Normal text needs at least 4.5:1.

The ratio itself is simple. It compares the , the brightness on a scale from 0 for darkest black to 1 for lightest white, of the lighter and darker colours, using (L1 + 0.05) / (L2 + 0.05). Ratios range from 1:1 to 21:1. Pure white on pure black scores the maximum: (1 + 0.05) divided by (0 + 0.05) is 21.

Larger text with wider strokes is easier to read at lower contrast, so it is allowed a lower ratio. And the rule applies to brands too: beyond logos, text with insufficient contrast because of brand guidelines is not exempt. So a pale grey chosen for style still has to reach the ratio.

Quiz me

0/3

  1. 1.Why is the contrast ratio for normal text set at 4.5:1?
  2. 2.Why does large text get a lower required ratio of 3:1?
  3. 3.A brand's guidelines call for pale grey body text on white. What does the guideline say?

Recap

Light-dark contrast, not hue, is what counts: 4.5:1 for normal text, 3:1 for large, 7:1 for the stricter level.

💡 A trick to remember it · Three for the average eye, times one and a half for the tired eye: that makes four and a half.

Surprising fact · 4.5 equals 3 times 1.5, the extra contrast needed by a person with 20/40 vision.

Sources (2)

No source, no claim. Every fact in this lesson (16 claims) cites at least one of these.

  1. [1]Web Content Accessibility Guidelines (Wikipedia) · Wikipedia
  2. [2]Understanding Success Criterion 1.4.3: Contrast (Minimum) · W3C Web Accessibility Initiative
More lessons in 💻 Tech (3) See all tech lessons →

One more light on your map.

Get one lesson like this every day, about the things you love. Free, in two or five minutes.

Get the share card for this lesson ↗