E-mail List Archives

Search E-mail List Archives for

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

From: Jesse Hausler
Date: Thu, Oct 02 2014 4:48PM
Subject: Another Color Contrast question
No previous message | Next message →

I've been diving more into the area of color contrast when it comes to
icons.

Under Additional Techniques (Advisory) for 1.4.3
<http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html#visual-audio-contrast-contrast-techniques-head>;,
it says that "Making icons using simple line drawings that meet the
contrast provisions for text" should be considered but are not required for
conformance.

If the following are SVGs, would these be considered "simple line
drawings"?

Choose the Icons link at the top of the page and scroll down a bit to the
Custom Icon heading.
http://sfdc-styleguide.herokuapp.com/?id=style

They're white icons on color backgrounds. Apparently, the style is all the
rage these days. You may have noticed your favorite app icon change to
something similar on iOS and Android.

If they aren't considered line drawings, as SVGs (images) should I not
worry about contrast for these anyways? I only have been since we're using
these as buttons and I want to make sure.

On the other hand, I don't want to make our design team re-architect
something if it isn't necessary for WCAG.

Thanks again,
Jesse

From: Andrew Kirkpatrick
Date: Thu, Oct 02 2014 6:08PM
Subject: Re: Another Color Contrast question
← Previous message | Next message →

WCAG's requirements for contrast are for text and images of text. Text is defined as "sequence of characters that can be programmatically determined, where the sequence is expressing something in human language".

The line mentioning making icons and line drawings was inserted (as I recall it) just as a reminder that while contrast applies to text and images of text, it is worth thinking about contrast for any information that people need to consume.

AWK

From: Patrick H. Lauke
Date: Thu, Oct 02 2014 6:24PM
Subject: Re: Another Color Contrast question
← Previous message | Next message →

On 03/10/2014 01:08, Andrew Kirkpatrick wrote:
> WCAG's requirements for contrast are for text and images of text.
> Text is defined as "sequence of characters that can be
> programmatically determined, where the sequence is expressing
> something in human language".
>
> The line mentioning making icons and line drawings was inserted (as I
> recall it) just as a reminder that while contrast applies to text and
> images of text, it is worth thinking about contrast for any
> information that people need to consume.

So, if I may be so bold as to expand on what I think Andrew hints at
here (and/or to give my own take): if you just care about "does it meet
the exact letter of WCAG 2.0", then sure, you could say that contrast
ratio SCs don't apply; but if you actually care about the ability of
users to perceive your buttons (particularly if your buttons use just
these icons, and not an icon + text combo), then you probably want to
make sure that your icon's foreground/background color choices do at
least make a good attempt at coming to 4.5:1 ratio or better...

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Jesse Hausler
Date: Thu, Oct 02 2014 6:33PM
Subject: Re: Another Color Contrast question
← Previous message | Next message →

Thanks Andrew and Patrick. I agree with both of your comments.

Initially, we used icon fonts, so these were flagged by our test
automation. I was asked if a move to image tags would remove the
requirement. I always try to answer truthfully, based on the knowledge I
am able to obtain.

I think the introduction of labels are possible. Already, these icons are
one way of completing a task or indicating an action. Whereas a secondary
method is supported by compliant text.

I appreciate your feedback.

Jesse

On Thu, Oct 2, 2014 at 5:24 PM, Patrick H. Lauke < = EMAIL ADDRESS REMOVED = >
wrote:

> On 03/10/2014 01:08, Andrew Kirkpatrick wrote:
>
>> WCAG's requirements for contrast are for text and images of text.
>> Text is defined as "sequence of characters that can be
>> programmatically determined, where the sequence is expressing
>> something in human language".
>>
>> The line mentioning making icons and line drawings was inserted (as I
>> recall it) just as a reminder that while contrast applies to text and
>> images of text, it is worth thinking about contrast for any
>> information that people need to consume.
>>
>
> So, if I may be so bold as to expand on what I think Andrew hints at here
> (and/or to give my own take): if you just care about "does it meet the
> exact letter of WCAG 2.0", then sure, you could say that contrast ratio SCs
> don't apply; but if you actually care about the ability of users to
> perceive your buttons (particularly if your buttons use just these icons,
> and not an icon + text combo), then you probably want to make sure that
> your icon's foreground/background color choices do at least make a good
> attempt at coming to 4.5:1 ratio or better...
>
> P
> --
> Patrick H. Lauke
>
> www.splintered.co.uk | https://github.com/patrickhlauke
> http://flickr.com/photos/redux/ | http://redux.deviantart.com
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
>
> > > >

From: Andrew Kirkpatrick
Date: Thu, Oct 02 2014 7:16PM
Subject: Re: Another Color Contrast question
← Previous message | Next message →

So, if I may be so bold as to expand on what I think Andrew hints at here (and/or to give my own take): if you just care about "does it meet the exact letter of WCAG 2.0", then sure, you could say that contrast ratio SCs don't apply; but if you actually care about the ability of users to perceive your buttons (particularly if your buttons use just these icons, and not an icon + text combo), then you probably want to make sure that your icon's foreground/background color choices do at least make a good attempt at coming to 4.5:1 ratio or better...

Dang. Maybe I've been doing standards too long - I thought I was being blunt! :)
AWK

From: Patrick H. Lauke
Date: Fri, Oct 03 2014 6:40AM
Subject: Re: Another Color Contrast question
← Previous message | Next message →

On 03/10/2014 02:16, Andrew Kirkpatrick wrote:
> Dang. Maybe I've been doing standards too long - I thought I was being blunt! :)

Yeah, too diplomatic-sounding for my tastes, so thought I'd blunt that
statement further ;)

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Jonathan Avila
Date: Fri, Oct 03 2014 1:13PM
Subject: Re: Another Color Contrast question
← Previous message | Next message →

> it says that "Making icons using simple line drawings that meet the contrast provisions for text" should be considered but are not required for conformance.

Where do icon fonts fall into this? Are they text or non-text content?

Jonathan

From: Andrew Kirkpatrick
Date: Fri, Oct 03 2014 1:48PM
Subject: Re: Another Color Contrast question
← Previous message | Next message →

Jon,
That's a good question. I'm not certain, but I'm leaning toward thinking that they count as text.

For example, this page (http://timepiece.inostudio.de/) has clocks that are made with custom symbol fonts. There is an underlying span that has numbers associated with characters in private Unicode space. So, the parts of the clock seem like they are a form of text... It is an uncomfortable fit at first blush, I'll agree, but am interested in other's thoughts.

AWK

From: James Nurthen
Date: Fri, Oct 03 2014 2:07PM
Subject: Re: Another Color Contrast question
← Previous message | Next message →

I'm do not understand why the technique which you use to display an icon
would have any bearing on whether it needs to meet a specific success
criteria.

On Fri, Oct 3, 2014 at 12:48 PM, Andrew Kirkpatrick < = EMAIL ADDRESS REMOVED = >
wrote:

> Jon,
> That's a good question. I'm not certain, but I'm leaning toward thinking
> that they count as text.
>
> For example, this page (http://timepiece.inostudio.de/) has clocks that
> are made with custom symbol fonts. There is an underlying span that has
> numbers associated with characters in private Unicode space. So, the parts
> of the clock seem like they are a form of text... It is an uncomfortable
> fit at first blush, I'll agree, but am interested in other's thoughts.
>
> AWK
>
>

From: Stefan Sollinger
Date: Fri, Oct 03 2014 2:25PM
Subject: Re: Another Color Contrast question
← Previous message | Next message →

You should really ensure sufficient contrast no matter if it's text or not,
and the fact that you may comply with WCAG because it's not text doesn't
help the visitors to your site who can't see some of the content (text or
not).

Having said that, the question if an icon font is text or not is an
interesting one. I think the answer to that question is the definition of
"text" as quoted by Andrew earlier in this thread:

Text is defined as "sequence of characters that can be programmatically
determined, where the sequence is expressing something in human language".

I always thought defining "text" is a bit silly but actually this example
shows why it is necessary.

In the example of the time/clock font Andrew quoted you clearly have a
sequence of characters (numbers) that express something in human language
(time), so this particular example is clearly text, even though it uses a
very unusual font that visually happens to look like a clock. Change the
font and you'll recognise the text.

Most icon fonts I've seen show symbols but do not consist of text according
to above definition. The character itself does not express anything in
human language and/or cannot be programmatically determined, only it's
visual shape conveys information so it's non-text content. Try changing the
font or reading it with a screen reader, often you get either nothing or
some completely different character or symbol. I've seen icon fonts that
come across as random characters or punctuation marks when rendered with
the wrong font, these clearly do not express anything in human language.

Stefan
Jon,
That's a good question. I'm not certain, but I'm leaning toward thinking
that they count as text.

For example, this page (http://timepiece.inostudio.de/) has clocks that are
made with custom symbol fonts. There is an underlying span that has
numbers associated with characters in private Unicode space. So, the parts
of the clock seem like they are a form of text... It is an uncomfortable
fit at first blush, I'll agree, but am interested in other's thoughts.

AWK

From: Jonathan Avila
Date: Fri, Oct 03 2014 2:35PM
Subject: Re: Another Color Contrast question
← Previous message | Next message →

> Most icon fonts I've seen show symbols but do not consist of text according to above definition. The character itself does not express anything in human language and/or cannot be programmatically determined, only it's visual shape conveys information so it's non-text content. Try changing the font or reading it with a screen reader, often you get either nothing or some completely different character or symbol. I've seen icon fonts that come across as random characters or punctuation marks when rendered with the wrong font, these clearly do not express anything in human language.

Exactly, and for that matter an X used to represent "close" while human readable doesn't by itself represent a meaningful sequence of characters because an X could represent multiplication or something else. In the case of "close" it is used as a symbol rather than text.

Jonathan

From: Jesse Hausler
Date: Fri, Oct 03 2014 2:42PM
Subject: Re: Another Color Contrast question
← Previous message | No next message

We've been treating icon fonts as text because on a technical level, it is
displayed through OS/Browser functions for displaying text.

When it comes to alternative text. This is the best route i've come across.

<div aria-hidden="true" class="close">::before</div>
<div class="hiddenAssistiveText">Close Window</div>

You aria-hide the icon font because some screen readers (including iOS
VoiceOver) will announce the icon font as an emoji character. If you're
ever heard, "Girl's Head" or "Clock face *something* o'clock" on a
website.. that's why.

I believe that LinkedIn uses this method as well.

Jesse


On Fri, Oct 3, 2014 at 1:25 PM, Stefan Sollinger < = EMAIL ADDRESS REMOVED = >
wrote:

> You should really ensure sufficient contrast no matter if it's text or not,
> and the fact that you may comply with WCAG because it's not text doesn't
> help the visitors to your site who can't see some of the content (text or
> not).
>
> Having said that, the question if an icon font is text or not is an
> interesting one. I think the answer to that question is the definition of
> "text" as quoted by Andrew earlier in this thread:
>
> Text is defined as "sequence of characters that can be programmatically
> determined, where the sequence is expressing something in human language".
>
> I always thought defining "text" is a bit silly but actually this example
> shows why it is necessary.
>
> In the example of the time/clock font Andrew quoted you clearly have a
> sequence of characters (numbers) that express something in human language
> (time), so this particular example is clearly text, even though it uses a
> very unusual font that visually happens to look like a clock. Change the
> font and you'll recognise the text.
>
> Most icon fonts I've seen show symbols but do not consist of text according
> to above definition. The character itself does not express anything in
> human language and/or cannot be programmatically determined, only it's
> visual shape conveys information so it's non-text content. Try changing the
> font or reading it with a screen reader, often you get either nothing or
> some completely different character or symbol. I've seen icon fonts that
> come across as random characters or punctuation marks when rendered with
> the wrong font, these clearly do not express anything in human language.
>
> Stefan
> Jon,
> That's a good question. I'm not certain, but I'm leaning toward thinking
> that they count as text.
>
> For example, this page (http://timepiece.inostudio.de/) has clocks that
> are
> made with custom symbol fonts. There is an underlying span that has
> numbers associated with characters in private Unicode space. So, the parts
> of the clock seem like they are a form of text... It is an uncomfortable
> fit at first blush, I'll agree, but am interested in other's thoughts.
>
> AWK
>
>