1

What is the proper method for measuring the color contrast of on-screen elements that are anti-aliased (particularly, but not limited to, text)? Does a standard method even exist?

Here's my specific situation: I'm attempting to comply with WCAG 2.0 for text inside a dropdown menu. A zoomed-in screenshot of the menu is below:

zoomed-in screenshot of anti-aliasing around text

This is a standard IE11 <select> with no custom styling, so the text is nominally #FFFFFF on #000080. However, the screenshot clearly shows that there are many pixels in the text in a variety of shades of blue and pink, due to anti-aliasing. Depending on which pixel I select as the foreground, I can get contrast as high as 16.0:1 (pure white on dark blue) to at least as low as 2.4:1 (royal blue on dark blue).

My customer's QA people are saying that the contrast is 2.9:1, much lower than the minimum requirement of 4.5:1. I don't know what their measurement strategy is, and do not have a direct line of communication to them.

What I want to do now is figure out the correct way to measure this so that I can at least tell my customer-facing team members that we're doing it the right way and hopefully work towards a long-term solution.

The problem is that I don't know what counts as "correct". My Googling has resulted in a lot of definitions of contrast and explanations of why it's important, but nothing about the proper way to measure it. Should I select the highest-contrast pixel I can find? The lowest-contrast pixel? Measure a handful of pixels and average the results? Use a selector that grabs multiple pixels at once? How do I know I have measured the "real", accurate color contrast value in a given situation?

2

you could just use any software and check it by yourself (for example, by using the eyedropper tool in Photoshop).

However, it doesn't matter at all. Browsers will read #ffffff and #000080 which has a contrast ratio of 16.01:1.

The aliasing doesn't matter at all in terms of how a browser reads it and accessibility. Please note that aliased and non-aliased text will have obvious differences and may affect readability and aesthetics, but it won't affect how a browser reads it unless you apply CSS changes such as opacity, filter, transform and such.

About the QA people, that's a whole different story. I have no idea how are they measuring things, but unless the values you mention are incorrect, they're doing it wrong. If in doubt, you can use tools like Contrast Checker or WAVE if you want to test a full page and elements in context (such as the select element you mention)

EDIT: Read the link on Slugolicious comment, and you'll find what to tell your PM in case they insist in measuring aliased text:

Note 2: Because authors do not have control over user settings as to how text is rendered (for example font smoothing or anti-aliasing), the contrast ratio for text can be evaluated with anti-aliasing turned off.

  • 1
    Agreed. Use the colors as defined in the html (#ffffff and #000080) and not a dropper on the anti-aliasing. If you want the formula, see w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef – slugolicious Feb 13 at 22:05
  • Yeah, I was afraid this was going to be the answer. I found slugolicious's link before I asked here so I know the math and stuff... I was just hoping I could present a technical list of steps to take because that's easier than convincing faceless strangers that they're, as you say, doing it wrong. – SOLO Feb 14 at 13:51

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.