Why is the W3C contrast score recommending hard-to-read text?

Question

Here are two buttons. When I measure them with the W3C contrast score, the black text has a much better score, meaning it should be easier to read. But, to my eyes, the button with white text is easier to read. Why is that?

When I run a colour contrast check, the white on orange text fails, with a contrast of just 2.86:1. The black on orange passes at the AAA level, with 7.3:1. (The hex values are as follows: Button background, #E47F00; white text, #FFF; black text, #000.)

However, I find the white text easier to read under every lighting condition I've tried: Adjusting the screen brightness, viewing in direct sunlight, etc. Changing the background colour from white to 50% gray or black did not change the readability, either.

Why would the colour combination with the worse score be easier to read? I imagine the answer has something to do with the properties of this particular shade of orange causing the contrast formula to give weird results, but I'd like to understand that better. (And if there's something I don't notice as a fully-sighted person that someone with a visual impairment would notice, I'd definitely like to learn about that.)

Answer 1

Short answer

WCAG 2.x contrast is not perceptually uniform and is grossly inaccurate over much of the visual range, it mainly works when the background is very light or white. It does not properly calculate reds or oranges and definitely does not calculate dark mode.

Longer Answer

In April 2019, I brought the problems with the WCAG 2.x contrast math to the attention of the W3C, and as it turns out I became an invited expert and have been researching this problem for the last 4½ years. Currently the most visible product of that research is the APCA algorithm, which is the candidate contrast method for various future standards.

Unfortunately, the claim that WCAG 2.x contrast is purported to help color vision deficiencies is not exactly correct. As far as reading is concerned hue and saturation have no real effect on readability. However individuals with protanopia, a form of color insensitive vision (aka colorblind) will see reds, oranges, and purples as darker.

The upshot is, because WCAG 2.x contrast calculates that these colors should be paired with black, when viewed by someone with protanopia the resultant luminance contrast becomes severely reduced, harming readability. In the example below, the OP's sample is rendered with clinically accurate simulations for certain color vision deficiencies.

For the record, WCAG 2.x contrast is also incapable of calculating for dark mode, which is a pressing problem as dark mode is increasingly popular.

On the subject or orange and red there is also the Gist "Orange You Wondering About Contrast?", the article "What's Red and Black and Also Not Read" and also this overview article "The Realities And Myths Of Contrast And Color"

Answer 2

Something that has to be considered is that you probably have good vision already. The benefit is recognized in individuals who have perceptions of color that are variant from the general populace.

W3 Has an article called Contrast (Minimum): Understanding, in which they go over the intent and underlying reasoning for their choices. Key excerpt below.

The intent of this Success Criterion is to provide enough contrast between text and its background so that it can be read by people with moderately low vision (who do not use contrast-enhancing assistive technology). For people without color deficiencies, hue and saturation have minimal or no effect on legibility as assessed by reading performance (Knoblauch et al., 1991). Color deficiencies can affect luminance contrast somewhat. Therefore, in the recommendation, the contrast is calculated in such a way that color is not a key factor so that people who have a color vision deficit will also have adequate contrast between the text and the background.