WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Chrome Color Contrast Analyzer

for

Number of posts in this thread: 5 (In chronological order)

From: Joseph Sherman
Date: Thu, Aug 25 2016 1:35PM
Subject: Chrome Color Contrast Analyzer
No previous message | Next message →

I like two tools: For web pages I like the color checker in html CodeSniffer<http://squizlabs.github.io/HTML_CodeSniffer/>;, largely because it gives suggestions for text or background color that will meet the spec.

For checking individual elements I like the color contrast analyzer<http://www.paciellogroup.com/resources/contrast-analyser.html>; since you can select the pixels to compare.



Among others, there's also the WCAG color contrast add-in for FireFox, Juicy Studio Toolbar, and (un)clrd for Chrome which shows the page in black and white.



Joseph





> -----Original Message-----

> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ]

> On Behalf Of Alan Zaitchik

> Sent: Sunday, August 21, 2016 12:01 AM

> To: = EMAIL ADDRESS REMOVED =

> Subject: [WebAIM] Chrome Color Contrast Analyzer

>

> I was told that the Chrome Color Contrast Analyzer is the best way to tell if

> there is sufficient color contrast between text and background color because

> it actually works off the resolved images that the user will see. But I am not

> always sure whether the heat map generated indicates a pass or a failure. It's

> not exactly a binary "legible" or "illegible" that often results.

> Can someone help by taking a look at the samples I've arranged at

> http://52.10.42.88/test/index.html ? Would you consider these passes or

> failures? I am deliberately not sharing the original html pages since that

> would influence your ability to comprehend what you see in these heat

> maps.

> If there are other tools as easy to use as this one but which give results easier

> to interpret as passes or failures, I'm eager to hear what they are.

> Thanks,

> A

>

>

> Alan Zaitchik | Senior Technologist / Senior Associate

>

> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = %3cmailto: = EMAIL ADDRESS REMOVED = >>

>

>
> > http://webaim.org/discussion/archives

>

From: Dominic Capuano (gmail)
Date: Fri, Aug 26 2016 1:37PM
Subject: Re: Chrome Color Contrast Analyzer
← Previous message | Next message →

Alan;

Case 1: Fail
Case 2: Fail
Case 3: Fail
Case 4: Pass
Case 5: Fail

When I have decided if something passes or fails after applying the heat map
I usually ask myself "Does what I see still resemble letters?" Except for #4
your examples do not.

I hope this helps.

Dominic Capuano
= EMAIL ADDRESS REMOVED =
(h)(401) 726-2551


-----Original Message-----
From: Alan Zaitchik [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Sunday, August 21, 2016 12:01 AM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] Chrome Color Contrast Analyzer

I was told that the Chrome Color Contrast Analyzer is the best way to tell
if there is sufficient color contrast between text and background color
because it actually works off the resolved images that the user will see.
But I am not always sure whether the heat map generated indicates a pass or
a failure. It's not exactly a binary "legible" or "illegible" that often
results.
Can someone help by taking a look at the samples I've arranged at
http://52.10.42.88/test/index.html ? Would you consider these passes or
failures? I am deliberately not sharing the original html pages since that
would influence your ability to comprehend what you see in these heat maps.
If there are other tools as easy to use as this one but which give results
easier to interpret as passes or failures, I'm eager to hear what they are.
Thanks,
A


Alan Zaitchik | Senior Technologist / Senior Associate

= EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >

From: Lovely, Brian (CONT)
Date: Fri, Aug 26 2016 1:52PM
Subject: Re: Chrome Color Contrast Analyzer
← Previous message | Next message →

What the heck do they look like "in the field"? I assume they don't look like those heat maps.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Dominic Capuano (gmail)
Sent: Friday, August 26, 2016 3:37 PM
To: 'Alan Zaitchik'; = EMAIL ADDRESS REMOVED =
Subject: Re: [WebAIM] Chrome Color Contrast Analyzer

Alan;

Case 1: Fail
Case 2: Fail
Case 3: Fail
Case 4: Pass
Case 5: Fail

When I have decided if something passes or fails after applying the heat map I usually ask myself "Does what I see still resemble letters?" Except for #4 your examples do not.

I hope this helps.

Dominic Capuano
= EMAIL ADDRESS REMOVED =
(h)(401) 726-2551


-----Original Message-----
From: Alan Zaitchik [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Sunday, August 21, 2016 12:01 AM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] Chrome Color Contrast Analyzer

I was told that the Chrome Color Contrast Analyzer is the best way to tell if there is sufficient color contrast between text and background color because it actually works off the resolved images that the user will see.
But I am not always sure whether the heat map generated indicates a pass or a failure. It's not exactly a binary "legible" or "illegible" that often results.
Can someone help by taking a look at the samples I've arranged at http://52.10.42.88/test/index.html ? Would you consider these passes or failures? I am deliberately not sharing the original html pages since that would influence your ability to comprehend what you see in these heat maps.
If there are other tools as easy to use as this one but which give results easier to interpret as passes or failures, I'm eager to hear what they are.
Thanks,
A


Alan Zaitchik | Senior Technologist / Senior Associate

= EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >



The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.

From: Dominic Capuano
Date: Fri, Aug 26 2016 3:05PM
Subject: Re: Chrome Color Contrast Analyzer
← Previous message | Next message →

Brian;

No, the heat maps are the output of the analysis.

Dominic

On Aug 26, 2016 3:52 PM, "Lovely, Brian (CONT)" < = EMAIL ADDRESS REMOVED = >
wrote:

> What the heck do they look like "in the field"? I assume they don't look
> like those heat maps.
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Dominic Capuano (gmail)
> Sent: Friday, August 26, 2016 3:37 PM
> To: 'Alan Zaitchik'; = EMAIL ADDRESS REMOVED =
> Subject: Re: [WebAIM] Chrome Color Contrast Analyzer
>
> Alan;
>
> Case 1: Fail
> Case 2: Fail
> Case 3: Fail
> Case 4: Pass
> Case 5: Fail
>
> When I have decided if something passes or fails after applying the heat
> map I usually ask myself "Does what I see still resemble letters?" Except
> for #4 your examples do not.
>
> I hope this helps.
>
> Dominic Capuano
> = EMAIL ADDRESS REMOVED =
> (h)(401) 726-2551
>
>
> -----Original Message-----
> From: Alan Zaitchik [mailto: = EMAIL ADDRESS REMOVED = ]
> Sent: Sunday, August 21, 2016 12:01 AM
> To: = EMAIL ADDRESS REMOVED =
> Subject: [WebAIM] Chrome Color Contrast Analyzer
>
> I was told that the Chrome Color Contrast Analyzer is the best way to tell
> if there is sufficient color contrast between text and background color
> because it actually works off the resolved images that the user will see.
> But I am not always sure whether the heat map generated indicates a pass
> or a failure. It's not exactly a binary "legible" or "illegible" that often
> results.
> Can someone help by taking a look at the samples I've arranged at
> http://52.10.42.88/test/index.html ? Would you consider these passes or
> failures? I am deliberately not sharing the original html pages since that
> would influence your ability to comprehend what you see in these heat maps.
> If there are other tools as easy to use as this one but which give results
> easier to interpret as passes or failures, I'm eager to hear what they are.
> Thanks,
> A
>
>
> Alan Zaitchik | Senior Technologist / Senior Associate
>
> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
>
>
>
> > > at http://webaim.org/discussion/archives
> > >
> The information contained in this e-mail is confidential and/or
> proprietary to Capital One and/or its affiliates and may only be used
> solely in performance of work or services for Capital One. The information
> transmitted herewith is intended only for use by the individual or entity
> to which it is addressed. If the reader of this message is not the intended
> recipient, you are hereby notified that any review, retransmission,
> dissemination, distribution, copying or other use of, or taking of any
> action in reliance upon this information is strictly prohibited. If you
> have received this communication in error, please contact the sender and
> delete the material from your computer.
>

From: Beranek, Nicholas
Date: Mon, Aug 29 2016 8:42AM
Subject: Re: Chrome Color Contrast Analyzer
← Previous message | No next message

The tool adds a white stroke around the letters and applies a dark overlay. Since the output is not a true representation of the foreground and background, we cannot determine its color contrast ratio.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Dominic Capuano
Sent: Friday, August 26, 2016 5:05 PM
To: Lovely, Brian (CONT) < = EMAIL ADDRESS REMOVED = >
Cc: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Chrome Color Contrast Analyzer

Brian;

No, the heat maps are the output of the analysis.

Dominic

On Aug 26, 2016 3:52 PM, "Lovely, Brian (CONT)" < = EMAIL ADDRESS REMOVED = >
wrote:

> What the heck do they look like "in the field"? I assume they don't
> look like those heat maps.
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Dominic Capuano (gmail)
> Sent: Friday, August 26, 2016 3:37 PM
> To: 'Alan Zaitchik'; = EMAIL ADDRESS REMOVED =
> Subject: Re: [WebAIM] Chrome Color Contrast Analyzer
>
> Alan;
>
> Case 1: Fail
> Case 2: Fail
> Case 3: Fail
> Case 4: Pass
> Case 5: Fail
>
> When I have decided if something passes or fails after applying the
> heat map I usually ask myself "Does what I see still resemble
> letters?" Except for #4 your examples do not.
>
> I hope this helps.
>
> Dominic Capuano
> = EMAIL ADDRESS REMOVED =
> (h)(401) 726-2551
>
>
> -----Original Message-----
> From: Alan Zaitchik [mailto: = EMAIL ADDRESS REMOVED = ]
> Sent: Sunday, August 21, 2016 12:01 AM
> To: = EMAIL ADDRESS REMOVED =
> Subject: [WebAIM] Chrome Color Contrast Analyzer
>
> I was told that the Chrome Color Contrast Analyzer is the best way to
> tell if there is sufficient color contrast between text and background
> color because it actually works off the resolved images that the user will see.
> But I am not always sure whether the heat map generated indicates a
> pass or a failure. It's not exactly a binary "legible" or "illegible"
> that often results.
> Can someone help by taking a look at the samples I've arranged at
> http://52.10.42.88/test/index.html ? Would you consider these passes
> or failures? I am deliberately not sharing the original html pages
> since that would influence your ability to comprehend what you see in these heat maps.
> If there are other tools as easy to use as this one but which give
> results easier to interpret as passes or failures, I'm eager to hear what they are.
> Thanks,
> A
>
>
> Alan Zaitchik | Senior Technologist / Senior Associate
>
> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
>
>
>
> > > archives at http://webaim.org/discussion/archives
> > >
> The information contained in this e-mail is confidential and/or
> proprietary to Capital One and/or its affiliates and may only be used
> solely in performance of work or services for Capital One. The
> information transmitted herewith is intended only for use by the
> individual or entity to which it is addressed. If the reader of this
> message is not the intended recipient, you are hereby notified that
> any review, retransmission, dissemination, distribution, copying or
> other use of, or taking of any action in reliance upon this
> information is strictly prohibited. If you have received this
> communication in error, please contact the sender and delete the material from your computer.
>
The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.