WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Chrome color contrast analyzer Pixel radius

for

From: Chaals McCathie Nevile
Date: Jan 11, 2016 3:33AM

So here is a description:

if you put some bold black text on a white background, and select a pixel,
it might be mostly surrounded by black, with some dark-grey pixels added
to curves.

This means the algorithm might see several black pixels nest to dark grey,
and point out that this isn't enough contrast.

But if you look at the average around a set of pixels, e.g. in a
several-pixel radius, the black and dark-grey combined *do* give adequate
contrast to the white, even with the odd light-grey pixel that is
similarly added to make things look smoother.

And regarding the algorithm itself:

A bit of this depends on precisely how they select the pixels to check,
and what the checking algorithm is. If you just move from the selected
pixel until you meet pixels of a different colour, without calculating how
they *look*, you might include the dark grey in the background. That would
lead you to conclude there isn't enough contrast.

Instead, it should be included in calculating the average foreground
colour. Likewise, the light grey should be included in calculating the
average background colour, rather than being used on its own. Having more
pixels included makes the average better in general, except if two letters
are very close together, or you check *too many* pixels, it breaks down.

For example, where there is only one white pixel between the top
right-hand point of an "r" and the top left-hand point of an "n" in a font
that makes the strokes several pixels wide, it will be hard for people to
pick the difference between "rn" and "m". On the other hand, if you select
too many pixels from the middle of an "m", you might calculate that most
are black, because you included the side strokes as part of the background
colur.

If you get a graphics program, but some text in using a large bold font,
and then zoom to see individual pixels you'll normally see the way
different colours are used to make it seem smoother.

cheers

On Sun, 10 Jan 2016 19:38:20 +0100, Kelly Lupo < <EMAIL REMOVED> >
wrote:

> I don't think the pictures came through... :(
>
> Kelly
>
> On Sun, Jan 10, 2016 at 6:22 AM, Kevin Prince < <EMAIL REMOVED> >
> wrote:
>
>> If you have a block colour then pixel radius 1 is as good as any other
>> however text is often presented in a smoothed manner by shading the
>> absolute colour with lighter ones. This makes it both appear less blocky
>> but also less intense. If you use 2 or 3 radius you'll get an average
>> value
>> which will be closer to the effective contrast between foreground and
>> background.
>>
>> Here's a pic I prepared for explaining just this scenario. It's showing
>> a
>> spot colour of 83,83,83 but if you move the block just 1 pixel to the
>> left
>> you are still in the letter form but the average value will be less and
>> the
>> overall contrast reduced.
>>
>>
>> Access1in5
>> 0212220638
>> 039290692
>> Independent Accessibility and IT Consultancy.
>>
>>
>>
>> > On 5/01/2016, at 06:11, Alan Zaitchik < <EMAIL REMOVED> > wrote:
>> >
>> > Anyone know the answer to this one?
>> > Using the Google Chrome color contrast test there is an option to set
>> the "pixel radius" to 1, 2, or 3.
>> > Anyone know which value to use under which circumstances? I have pages
>> that fail with radius 1 but pass with radius 2.
>> > Is this bad or not?
>> > A
>> >
>> > >> > >> > >> > >>
>> >> >> >> >>
> > > > --
Charles McCathie Nevile - web standards - CTO Office, Yandex
<EMAIL REMOVED> - - - Find more at http://yandex.com