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?

Two pills

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.)

  • Where, specifically, are you seeing this in the guidelines? And is this an example pulled from their guidelines? – Zach Saucier Dec 8 '16 at 1:52
  • I'm referring to success criterion 1.4.3. I'm applying the contrast ratio check to the colours in my organization's style guide, and trying to understand why it's giving the results it does. I've edited the question to clarify. – Evan Dec 8 '16 at 16:47
  • Is your screen calibrated? – Michael Schumacher Dec 8 '16 at 17:24

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.

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.