Can everyone actually read your design?

Tim Knowles (opens in a new tab)18 min read

Mostly, yes, as long as your text meets the 4.5:1 contrast rule. The rule is old, and the evidence behind it is thinner than you'd expect, but it works well for dark text on a light background. It also never forbids a brand colour. It only limits where you use it. Where it does slip is light text on a dark background, because there a pass can still be hard to read.

Try out the same contrast score both ways round

Opening hours

We’re open nine till five on weekdays, and until noon on Saturdays.

4.5:1#767676 on white: passes

Opening hours

We’re open nine till five on weekdays, and until noon on Saturdays.

4.5:1#757575 on black: passes
4.5:1

Both score 4.5:1. Both pass.

For the curious

The big number is the WCAG 2.2 contrast ratio, cut to one decimal place rather than rounded, as W3C asks. Each step of the slider picks the faintest grey that still reaches that score: the lightest grey on white and the darkest grey on black. Steps where the two can’t land on the same figure are skipped.

The second number is APCA’s Lc score (apca-w3 0.1.9), rounded to whole points. It is signed by polarity: positive for dark text on a light background, negative for light text on a dark one. Its own guidance asks for at least Lc 75 for body text and Lc 45 for large text.

Two greys with the same contrast score. The one on black is far harder to read.

Why do so many people say they can't read grey text?

Because a lot of the grey text on the web really is faint, and people notice. A Hacker News post called "Please Stop Using Grey Text" drew 404 points and 377 comments. I found four threads making the same complaint, with nearly 700 comments between them, plus four more I couldn't count.

The funny part is that the site they were arguing on uses grey itself, and one thread even asks why. Hacker News sets its bylines, scores, comment headers and already-visited story titles in #828282 on a cream background, #F6F6EF, at 7 to 10 points. The comments themselves are black. So it's the small grey details that people say they can't read.

Now, when hundreds of people say a grey is unreadable, does the contrast rule agree with them? It does. But the reason it still gets argued about tells you where the rule is strong and where it's weak.

What does the contrast rule actually ask for?

At least 4.5:1 between your text and its background. Large text only needs 3:1, and "large" means 18 point, or 14 point bold, which works out to about 24px, or 18.5px bold. The rule comes from the Web Content Accessibility Guidelines, known as WCAG, which W3C publishes. There's a higher level of the guidelines that asks for 7:1, whereas the lowest level has no contrast requirement at all.

The ratio measures a gap in brightness, not a gap in colour. It ignores hue on purpose, because W3C says hue and saturation make little difference to how well readers with colour vision deficiency can read. Those readers, along with the separate 3:1 bar for button edges, input borders and icons, have their own article: Designing for colour blindness.

On white, the rule is sharp. A single step of grey decides it: #777777 is 4.478:1 and fails, while #767676 is 4.542:1 and passes. If your grey text sits anywhere near that line, check the hex rather than trusting your eye.

Where does the 4.5:1 number come from?

It started as a 1988 office standard, and then it was multiplied by one and a half. W3C sets out the reasoning itself, in the rationale section of its explainer (opens in a new tab) for the rule. It's just far down a page that few designers ever finish.

The starting point is 3:1, which W3C took from two display standards. One is from ISO, and it has since been partly replaced. The other is ANSI/HFS 100-1988, an American standard for visual display terminal workstations, which in 1988 meant the boxy computer screens sitting on office desks. I haven't read that one, because it sits behind a paywall, so I can only tell you what W3C says it took from it.

Then W3C allowed for age. It cites a finding that people with 20/40 vision need about one and a half times as much contrast, and three times one and a half is 4.5. The thing is, 20/40, as W3C notes, is "typical visual acuity of elders at roughly age 80". The 7:1 bar applies the same logic to 20/80 vision. In other words, the most quoted number in web design was built around an eighty-year-old reading an office monitor.

Worth knowing: the number hasn't moved since 2008. The guidelines have had three versions, 2.0 in December 2008, then 2.1 and 2.2, and the 4.5:1 and 3:1 figures are the same in all of them, exceptions included. The only change in that rule is a single word in the exception for logos. So whichever version your client, council or contract names, the contrast number is identical.

The evidence behind the one and a half is thin

You'd assume a number this famous rests on a big study. It doesn't, although W3C is open about where it came from. The source it cites for the 1.5 is a one-page conference abstract from 2004 by Arditi and Faye, printed in a supplement to the journal Optometry and Vision Science. It isn't a full paper.

People have tried to trace it. In 2021 someone asked on W3C's own GitHub (opens in a new tab) which paper the 1.5 came from, and the contributors couldn't get hold of the abstract or make it line up with the rule. A linked issue (opens in a new tab) points out that the abstract's only "1.50" is the starting point of a fitted line, not a contrast multiplier. One contributor summed it up fairly: "It is a rational basis, just not maybe a great one." The author of the newer contrast method went further and said he could find no rational basis for multiplying by 1.5, though he has a stake in the answer.

To be fair to W3C, it names its sources and publishes its reasoning, which is more than most rules in design ever do. The number isn't made up. It's a sensible estimate that rests on less evidence than its fame suggests.

The formula has a room built into it

Before the formula divides one colour's lightness by the other's, it adds 0.05 to both. W3C says that 0.05 stands for the typical room light bouncing off the screen, which the 1988 standard asked to be counted in. That's why the rule quietly assumes you're in an office.

A fixed value is a fair way to write a rule, because somebody has to pick a room. But you aren't always in that room, and the room changes dark colours far more than light ones. I recalculated three pairs with less and more room light:

Text on backgroundDark roomThe rule's roomBright roomSunlight
#767676 on white5.404.543.152.41
#BB86FC on #12121231.817.072.651.84
#404040 on black11.252.031.261.13

Across the whole range, the grey on white changes by a factor of about two, whereas the two dark pairs change by factors of about 17 and 10. Dark colours give off so little light that the room's share swamps them. These figures are my own illustration of how much weight that 0.05 carries, not measurements of real screens.

Display standards treat the room as something you adjust for. The ISO standard that partly replaced the one W3C cites says it plainly: "the contrast on the screen is changed by the luminous environment". So the rule's room is a deliberate reference point. It's just not the room you're in.

Where does the 4.5:1 rule get it wrong?

In dark mode, with light text on a dark background. Here are two greys you can paste into any design tool and see for yourself:

Text on backgroundContrast ratioNewer method's score
#767676 on white4.542:1, passes71.6
#757575 on black4.558:1, passes29.6

Both pass, and the one on black actually passes by slightly more. Put them side by side, though, and the grey on black is far fainter. The newer contrast method, which was built to follow what people really see, scores them 42 points apart, and its score for the dark one is below its own minimum even for large headings.

The cleanest single case is #949494. On white it fails, at 3.03:1. On black it passes easily, at 6.92:1. The newer method reads it the other way round and rates the version on white as the more readable of the two (57.1 against 44.6). That's why a dark-mode pass is the one result you shouldn't take at face value.

Real design systems have the same problem

Look at the muted, secondary text in the dark themes of three big design systems. All three pass the rule comfortably, by about 35 to 55%. And all three fall short of the newer method's own minimum for body text.

Dark-theme colourPairContrast ratio
Material Design's dark purple#BB86FC on #1212127.07:1
GitHub's muted text#8B949E on #0D11176.15:1
Tailwind's slate-400#94A3B8 on #0F172A6.96:1

Mirror one design and the gap gets stark. In light mode, Tailwind's gray-500 on white is 4.83:1. In dark mode, its gray-400 on gray-900 is 6.99:1. The 4.5:1 rule says the dark version has 45% more contrast, while the newer method says it has 31% less. It's the same design, flipped, and one number goes up while the other goes down.

If you're building a dark theme and want it to read well, that's in Dark mode isn't just flipping the colours.

The rule can't tell light mode from dark mode

The ratio is the same whichever way round you put the colours. Swap the text and the background and the number doesn't change, which means the formula can't tell which colour is the ink. But reading dark letters on a light page and reading light letters on a dark page are different acts of seeing. The maths treats them as one.

The newer method uses different maths for each direction, so the two methods disagree in a pattern, not at random. I took all 16,777,216 hex colours as backgrounds and asked each method whether black or white text suits each one better. They chose differently for 29.15% of them, which is 4,890,040 colours. And in every single case, the 4.5:1 rule chose black and the newer method chose white. Never the other way round.

On a grey ramp, the rule switches from white text to black at #767676, whereas the newer method switches at #A4A4A4. That leaves 46 greys where they disagree outright. Take #8D8D8D, an ordinary mid-grey button. The rule rates black text on it as nearly twice as good (6.33:1 against 3.32:1), but the newer method prefers white.

Sam Waller at Cambridge's Engineering Design Centre spotted the same direction first (opens in a new tab), back in 2022, by sampling 8,000 random colours. My figures cover every hex colour, split by which way round the text is.

Try out black or white text on your brand colour

Book a table for tonight

As body text on white1.51:1fails
Book a table
As a button, black label13.88:1passes
Book a table
As a button, white label1.51:1fails

#FFCC00 fails as small text on white, and works as a button with a black label.

There is no colour in sRGB that fails with black or white text on it. The rule never asked you to change your brand colour, only where you put it.

For the curious

Ratios are WCAG 2.2 contrast ratios, cut to two decimal places rather than rounded. Black text reaches 4.5:1 on any background whose relative luminance is at least 0.175. White text reaches it on any background at or below 0.1833. The two ranges overlap, so every colour passes with one or the other. The worst case sits where they cross, at a luminance of 0.1791, giving 4.5826:1. #CF0DCC is the hex colour closest to that point.

Your brand colour passes with black or white text on it. It only fails as small text.

Will the contrast rule make you change your brand colour?

Almost certainly not. Every one of the 16.7 million hex colours passes 4.5:1 with either black or white text on it. I checked them all, and there are no exceptions. The hardest case in the whole range is a vivid magenta, #CF0DCC, where black text and white text both just scrape through at 4.58:1.

That isn't luck. Black text passes on any background above one lightness level, and white text passes below a slightly higher one, so the two ranges overlap. Black text works on 65.3% of hex colours, and white text on 36.4%.

So the rule doesn't forbid your brand colour. It forbids it as small text. Here are eight typical brand colours:

Brand colourAs text on whiteButton, white labelButton, black label
Sky blue #1DA1F22.83 ✗2.83 ✗7.43 ✓
Orange #FF6B002.86 ✗2.86 ✗7.36 ✓
Yellow #FFCC001.51 ✗1.51 ✗13.89 ✓
Pink #E1306C4.34 ✗4.34 ✗4.84 ✓
Green #25D3661.98 ✗1.98 ✗10.59 ✓
Cyan #00B4D82.46 ✗2.46 ✗8.52 ✓
Navy #0D47A18.63 ✓8.63 ✓2.43 ✗
Red #D32F2F4.98 ✓4.98 ✓4.22 ✗

Six of the eight fail as small text on white. Yet all eight work as a button, as long as you pick the right label. So if a checker has just told you your brand orange fails, the fix is usually a black label, not a new orange.

A side note: logos are exempt, but the rest of your brand isn't. Logos and brand names don't have to meet any contrast ratio. W3C is explicit that the exemption stops at the logo, and brand guidelines beyond it get no special treatment. That means your brand colour in a headline, a link or a caption is held to the same 4.5:1 as any other text on the page.

The rule already caught the grey text

Remember the Hacker News grey? The rule had already said no. #828282 on #F6F6EF is 3.54:1, which is below 4.5:1, and the 3:1 allowance only applies to text at 18 point, or 14 point bold. Those bylines and visited links are 7 to 10 points, so they fail.

The newer method fails them too. At that contrast, its size table asks for at least 24px in a regular weight, and the text is served at roughly 9 to 13px.

So the most argued-about grey text on the internet fails a rule that has stood unchanged since 2008. The rule wasn't broken. Nobody applied it. And across the whole colour range the two methods mostly agree. Where they part company, it's in one direction and one situation: light text on dark.

Rounding can turn a fail into a pass, too. W3C says contrast results shouldn't be rounded, so 4.499:1 doesn't meet 4.5:1. A checker that rounds to one decimal place would show 179,432 hex colours as passing with black or white text when they fail. One that drops the extra digits shows none. So close to the line, trust the longer number.

Should you switch to the newer contrast method?

Not yet. Treat it as a second opinion, not a second doctor. It's worth asking, especially about dark mode, but it isn't something you have to comply with. This is where it stood when I checked in September 2026.

Why it hasn't been adopted. W3C's contrast group set a bar: the method "requires extensive peer review from other researchers in color contrast before adoption". That line reaches us quoted by the method's own author, in a GitHub issue he opened in October 2023 that's still open, and he disputes that peer review is required. I looked for a peer-reviewed study with human participants comparing the two methods and couldn't find one. Neither side has the evidence that would settle it, which, to be fair, is also true of the 1.5 behind 4.5:1.

Its place in the next guidelines. The newer method appears 11 times in each of the three 2021 drafts of WCAG 3, the planned successor to 2.2, where it formed a complete rating scale. Then it appears zero times in all seven drafts from 24 July 2023 onwards. The whole rating system it sat inside was rewritten at the same time, though, so the count alone can't tell you why. The current draft (opens in a new tab), from 10 September 2026, names no method at all. Its contrast measure is "to be determined", it has several years of work ahead, and it doesn't retire version 2. On top of that, W3C's contrast subgroup page says the group isn't active, none of its material is approved for WCAG 3, and the work will restart later.

If you build things. The method is "Patent(s) pending" and trademarked. Its reference code is licensed to W3C under a cooperative agreement, and to everyone else under the AGPL v3 licence, with a right for its author to audit any commercial product that uses it. Its last release was version 0.1.9, on 4 July 2022, and its own FAQ still says its font table is part of WCAG 3, which hasn't been true since July 2023.

There's one gap neither version fills. The guidelines set a floor for contrast but no ceiling. The 2021 draft planned tests for an upper limit, and they went with the rest of that draft.

Where both methods agree

Size matters as much as contrast. Both methods agree on that, and vision scientists showed it independently of either camp. Ohnishi and colleagues found, in a 2020 study in Vision Research (opens in a new tab), that as contrast falls, the smallest text people can read at full speed gets bigger, while people's top reading speed stays the same. Put simply, lower the contrast and you need bigger letters.

The two methods handle that very differently, though. The 4.5:1 rule has a two-step staircase: normal text, or 18 point (14 point bold) and up. The newer method's size table, on the other hand, has 25 contrast levels across 9 font weights. At one middle contrast level it asks for 24px in a regular weight but allows 16px in bold, and the 4.5:1 rule sees no difference between the two.

They also agree that contrast isn't the same as colour difference. A red and a green matched for lightness, #D6362C and #2E8B3A, are about as different as two colours get, yet together they score just 1.10:1. Both methods call that unreadable. Measuring how different two colours look is a separate job, and it's covered in How different do two colours need to be?

Which version of the contrast rule does the law use?

That depends on where you are, but the contrast number is the same everywhere. In Australia, the Human Rights Commission says organisations should meet WCAG 2.2 at Level AA to help meet the Disability Discrimination Act's duty not to discriminate. That's guidance, though, not a legal standard in itself. In the US, the Department of Justice rule for state and local government adopts WCAG 2.1 Level AA, with compliance dates in April 2027 and April 2028. And Europe's accessibility standard, EN 301 549 version 4.1.1 from September 2026, adopts 2.2. So that's three places and three versions, with one unchanged 4.5:1.

What should you do differently in your next design?

Use the rule, and know the one place to stop trusting it.

  1. Use 4.5:1 for body text. Save 3:1 for text that's genuinely large, which means 18 point, or 14 point bold. The rule is right most of the time, and it's what regulators point to.
  2. Don't round. If a checker says 4.49:1, it fails.
  3. Keep your brand colour, and move it. Use it for buttons, banners and backgrounds with black or white text on top, and use a darker version for small text.
  4. Check grey text with numbers, not by feel. On white, one step of grey decides it: #767676 passes and #777777 fails.
  5. Don't trust a pass in dark mode. Light text on a dark background can score well and still read poorly. Look at it on a real screen, in a dim room and in a bright one, before you sign it off.
  6. Go bigger or bolder when contrast is low. Size and contrast trade off against each other, which is why small, light text is where the problems start.
  7. Treat the newer method as a second opinion. It's useful for spotting dark-mode problems, but nothing legal rests on it.

Frequently asked questions

Why does everyone say grey text is hard to read if it passes the contrast checker?

Often it's because the grey doesn't pass. The one people complain about most, Hacker News's #828282 on its cream background, is 3.54:1, and the rule asks for 4.5:1 on text that small. A checker only fails it if someone runs it. Light grey on white is a case the rule handles well, because one step decides it: #777777 fails and #767676 passes. Light text on a dark background is different, because a pass there can still read poorly.

Where does the 4.5:1 contrast ratio come from?

From two sources, and W3C publishes both. The 3:1 starting point comes from display standards, including a 1988 American standard for office computer screens. The extra one and a half comes from a finding that people with 20/40 vision, which is typical at about age 80, need roughly 1.5 times the contrast. Three times one and a half is 4.5. The source W3C cites for the 1.5, though, is a one-page conference abstract from 2004.

Two contrast checkers give me different numbers. Which is right?

Usually the one using fewer decimal places, which sounds wrong but isn't. The guidelines set exact numbers for weighting red, green and blue, and some software swaps in more precise versions. For 1,646 hex colours against black or white, that flips the verdict. Take #006FFB on white: it's 4.49989:1 by the guidelines and 4.50050:1 at higher precision. The guidelines' numbers are the ones that count, so it fails.

My brand colour fails the contrast check. Do I have to change it?

Almost certainly not. The rule limits your brand colour as small text, not as a colour. Every one of the 16.7 million hex colours passes 4.5:1 with either black or white text on it, so any brand colour works as a button, a banner or a background. Keep it there, put black or white text on top, and use a darker version for body copy. Logos are exempt from the rule entirely.

Is APCA the new standard? Should I use it instead?

No. APCA appeared in the 2021 drafts of WCAG 3, the planned next version of the guidelines, but in none from July 2023 onwards. The current draft, from September 2026, says its contrast measure is "to be determined" and doesn't mention APCA at all. W3C's contrast subgroup is listed as not active, pending a restart. APCA is a useful second opinion, especially for dark mode, but nothing legal rests on it. Checked September 2026.

Do disabled buttons need to meet the contrast rule?

No. The contrast rule exempts text that's part of an inactive control, such as a greyed-out button, so a disabled label can sit below 4.5:1 and still meet the guidelines. But the exemption only covers the disabled state. Once that same button is active again, its label needs 4.5:1, or 3:1 if the text is large, which means 18 point, or 14 point bold.

For the curious

The rule is WCAG 2.2 Success Criterion 1.4.3, Contrast (Minimum); 7:1 is SC 1.4.6 (AAA). "How light a colour is" means relative luminance, 0.2126R + 0.7152G + 0.0722B on linearised sRGB, and the ratio is (L1 + 0.05) / (L2 + 0.05). W3C calls the 0.05 Typical Viewing Flare, and it comes from the 1998 IEC sRGB working draft. My room figures swap 0.05 for 0.005, 0.20 and 0.40.

The newer method is APCA, by Andrew Somers (Myndex). Its score, Lc, is signed by polarity: positive for dark text on light, and negative for light on dark. It uses a separate pair of exponents for each direction. Its guidance gives Lc 75 as the body-text minimum and Lc 45 for large text; the "middle contrast level" above is Lc 60. My Lc values come from a reimplementation of apca-w3 0.1.9 that reproduces all eight of its official test values exactly, and my contrast maths was cross-checked against the Coloraide library.

Checkers disagree when they use the full-precision BT.709 coefficients. Ohnishi's finding is about critical print size.

Sources (16)

Who wrote this

Tim Knowles

Websites, marketing strategy and AI training

Tim has worked in marketing since 2000. At Your Marketing Specialist he builds the websites, and colouriser is one of them. He is self-taught, and learns each subject in depth before he advises on it.

Each Article is written from Tim's own research, and every Figure runs on colouriser's own colour maths.

More about Tim (opens in a new tab)
  • Screens and printContrast and accessibility

    Dark mode isn't just flipping the colours

    Reversing your colours turns a blue brand mustard, and even automatic dark modes turn yellows muddy and purples pink. A good dark mode is a lightness job first: near-black backgrounds, off-white text, and every accent re-picked lighter until it reads. Here's why blues soften and reds can stay vivid, with a recipe for Figma and Canva.

    13 min read

  • Contrast and accessibility

    Designing for colour blindness

    Colour-blindness filters show the most severe form, which only about a quarter of colour-blind people have. The check that works is one you already know: keep neighbouring colours at least 3:1 apart in contrast, and never let colour be the only clue. Here's why, which pairs really break, and the palette that holds up.

    19 min read

  • How we see colour

    How different do two colours need to be?

    There's no single number for when two colours look different. The famous 'Delta E under 1 is invisible' table is one developer's own guess, expert estimates vary fifteen times over, and one unit covers 2,575 hex codes around a vivid blue but only 34 around mid grey. Here's what the number really means, and how to judge by eye instead.

    18 min read

  • Building a paletteContrast and accessibility

    Building a brand palette that works: give every colour a job

    A brand palette works when every colour has a job. On screens, neutrals cover most of the page and your brand colour marks what people click. Here's where the 60-30-10 rule really comes from, how many colours you need, and why your brand colour may fail as text.

    15 min read

  • How we see colourContrast and accessibility

    The same colour looks different in different places

    Your eye judges every colour against what surrounds it, so the same hex looks lighter on a dark page and darker on a light one. Thin lines and small text do the opposite. Here's why, how big the shift is, why a contrast checker can't see it, and what to do.

    18 min read

All articles