4

A

The smaller text here passes WCAG 2.0 contrast accessibility AA guidelines.

A

B

The smaller text here fails WCAG 2.0 contrast accessibility AA guidelines.

B

In a usability study comparing the images above, 78% of participants found the white text (which fails the WCAG contrast test) to be more readable. The difference is 99% likely to be statistically significant. This means that you can be very confident that it is actually better, and not performing better due to random chance.

Here are the results of an accessibility colour test performed at contrastchecker.com:

enter image description here

enter image description here

You can clearly see that the black text is passing more WCAG tests than the white text (which is more readable to most people). The question is why? And to what extent can we rely on WCAG contrast tests when designing digital products?

Improve this question
12
  • White text looks like it has better contrast to me. Converting background color to grayscale gets me r=g=b=114 which is slightly closer to black than white which could mean that contrast is better with white text. Still don't know what WCAG says though.
    – filip
    Sep 16, 2018 at 15:52
  • by the way, for me, the black text one is a bit more readable than the white one. Even though the white one seems to have more contrast, I can read teh black one easily, and it's a bit difficult for me to read the white text. Anyways, people is different and there are no solutions that fit all cases, it's just a math calculation that strives to fit to as many cases as possible. Specific cases where people complains about "this must be wrong" are counted by thousands, there are many example on this site alone
    – Devin
    Sep 16, 2018 at 17:17
  • White is 4.39 and black is 4.79. WCAG 1.4.3 says 4.5 is the minimum so the white fails. As @devin said, it's subjective. We each see it differently. The color contrast formula only checks the contrast but we have a lot of other factors that affect how we see colors. See Johannes Itten's "The Art of Color" book. It talks about hue, light-dark, cold-warm, complementary, simultaneous, saturation, and extension. All these factors come into play in how we perceive color and whether some combinations are easier to see than others.
    – slugolicious
    Sep 16, 2018 at 18:40
  • The black text passes WCAG 2.0 AA accessibility guidelines whereas the white version completely fails. This seems completely wrong to me. I agree that it's subjective and we all see colour differently. But what if 80% of people say that, subjectively, the white text is more readable? Surely that means that there is a problem with the WCAG guidelines? I don't know what percentage of people actually find the white more readable but I'm going to do a usability test and I'll post the results in here. BTW - I put the WCAG results on Twitter to prevent them influencing people's comments here.
    – Andrew
    Sep 16, 2018 at 20:48
  • 1
    I think the important part here might be that neither passes more than half the tests - so there is a problem with the page - fix more of the tests and then see if white or black is easier to read
    – mmmmmm
    Sep 18, 2018 at 12:26

2 Answers 2

Reset to default
2

Brightness and color are connected, but not absolute.

The W3C suggested calculations make some assumptions and weight red, green, and blue color values differently in terms of brightness. (Blue being the darkest, and green the brightest.) These weights are only approximations and represent the colors at full saturation, so they may not perfectly represent the full color gamut one might encounter.

Some screens might show your orange color as brighter or darker, but the formula can only give it a single number for contrast calculations. For example, you couldn't use their formula for printed documents as "bright" colors like white won't glow the same way they do on digital screens.

Green is traditionally disproportionally bright on most screens, so it gets a higher weight. Since your orange has a lot of green in it, you can reduce it a tiny bit to pass AA without changing the color very much. You (and your users) might not even be able to see the difference.

Orange color contrast calculations

You can find tons of colors that are nearly identical except one will mathematically pass the test but the other won't. It's mostly a side effect of taking a complex, multi-dimensional color space and simplifying down into a single number.

This is also a good example of how these are only guidelines rather than hard and fast rules. The main takeaway when your colors score low or only pass some of the tests isn't that there is a "right" or "wrong" pairing, it's that they are on the edge of being difficult to read, so you should consider different colors if contrast and legibility are your main concerns. It's up to you to decide how much value you place on design aesthetics vs. complying with guidelines.

W3C Color Contrast Formulas

Improve this answer
0

It may have something to do with the guidelines being made for people who have disabilities. People with eyesight issues, like near blindness or color blindness. It just happens to be that if you follow the guidelines than most of the time you will get normal people to agree that it is easier to read. People that have disabilities like this, if I remember from my schooling have more difficulty reading light text on darker colors than darker text on lighter colors for some biological reason.

Improve this answer
1
  • Unfortunately this is one of the more significant misunderstandings that seem to be floating around on the web regarding WCAG 2.x contrast. It's not true. And in particular people with color insensitive vision, especially protanopia, are not helped by WCAG2 contrast math, in fact colors that are rejected or passed by WCAG2 can make it difficult to impossible for some forms of color vision deficiency, and a number of other impairments. If you happen to know the origin of this misunderstanding, I'm interested in tracking down the source.
    – Myndex
    Dec 25, 2022 at 8:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.