What is the procedure for measuring color contrast around anti-aliasing?
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:
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?