Skip to content
This repository has been archived by the owner on Jun 30, 2018. It is now read-only.

Success Criterion 1.4.12 User Interface Component Contrast (Minimum) -- Comment 1 #345

Closed
GreggVan opened this issue Sep 1, 2017 · 7 comments

Comments

@GreggVan
Copy link

GreggVan commented Sep 1, 2017

Essential visual identifiers of user interface components have a contrast ratio of at least 4.5:1 against the immediate surrounding color(s), except for the following situations:

Thicker
A contrast ratio of at least 3:1 is required where the minimum width and height are at least 3 CSS pixels, for the essential visual identifier.
Inactive
Disabled or otherwise inactive user interface components
User agent control
The color(s) of the user interface component and any adjacent color(s) are determined by the user agent and are not modified by the author.

==================================================================
Agree with changing to 3:1 -- Both to simplify and to make it more realistic.

All of the research that was done around 4.5:1 was based on readability not discernability. and discern ability is all you need for controls.

I am worried that these guidelines are being written superstitiously. They are being written without any understanding of the underlying research on which the contrast numbers in WCAG 2.0 were based.

But definitely if you going to do something like this make it 3 to 1

@goodwitch
Copy link
Contributor

Gregg, No superstition here. We were well aware of how the 3 to 1 and 4.5 to 1 were arrived at for text. And we even spoke directly to the researcher. Your question is, does the needs for discernibility of essential non-text items have the same color contrast needs as text, because text is complex and small differences in text = different letters.

Now, this is why we have held to recommended 4.5 to 1 as a need for discernibility of non-text. With essential non-text, that is thin, there may be no other clues of the existence of information, except a thin line. If that line is only 3 to1 in color contrast, it is like an easter egg hunt for low vision users to even find the item.

As designers create minimalist icons to indicate "print" with a low contrast small outline (1 pixel wide) drawing of a printer or "favorite" with a low contrast small (1 pixel wide) outline drawing of a star...and then place that printer icon or favorite icon on the page...there is even more need for being able to see that object...there is no line of running text to draw your attention to the fact that there is something here...you are left to search the page in hopes of finding all the functionality.

So....while I agree that we may need to back down to 4.5 to 1 for WCAG 2.1, please be aware that we did due diligence in studying the work that went before us deeply and are basing this recommendation on actual user needs of the Low Vision community.

@goodwitch goodwitch self-assigned this Sep 1, 2017
@GreggVan
Copy link
Author

GreggVan commented Sep 2, 2017

Ah you talked to Arditi -- good. He is a great resource But you spoke to only one of the researchers. The actual 3 and 4.5 to 1 ratios were established at the Trace R&D Center -- and they were based on both the research by Aries and from data on other standards.

Also - my concern is not really what you re-phrased it as. Let me try again

Graphics can be just as detailed as letters in text. No, the real concern is that with text you need to be able to discern things that are very high rate of speed and in a continuous manner. You don't have time to stop and discern letters or details. In order to read fluently you need to be able to perceive rapidly and with little thought since your intellectual abilities need to be focused on the rapid processing of the language and of the concepts being presented. When you are looking at a graph however, you have more time and you do it for a shorter period of time. If someone had to rapidly scan and understand large volumes of graphical information on a continuous basis than it would approach the needs of reading.

Therefore the higher contrast needed for rapid thought free perception of text characters would be greater than that required for graphics.

Your SC is also seems to be a mix of "make small icons understandable" and make different colors in graphics distinguishable from each other. This makes it hard for you to create usable wording.

The 3 pixels high and wide language is also ambiguous. Does it mean a line or the graphic?

Finally - you don't seem to have thought about line charts where the lines must all cross each other.

Sorry -- I am trying to find a solution to all the issues I am raising but do not have time right now to figure out all of the implications. So let me move these notes and I may be able to look at this again in a month

  1. consider separating your concern over small graphics from your concern about large graphics with adjoining colors
  2. be sure to think about not just pie charts but all of the other different types of graphics that may be affected by this. You are crafting a SC that would apply to all while only thinking about two very simple one
  3. note that this outlaws certain types of pie charts completely if they have for example 4 slices. It becomes mathematically impossible to have four adjoining colors all have the contrast you talk about
  4. in your UNDERSTANDING document you talk about some graphics passing (that would otherwise fail) because of labeling. However you do not have any exceptions like this in your success criterion. so you cannot make that claim
  5. 3:1 contrast should be plenty to achieve what you are trying to achieve I believe, but even there I think you have problems with different types of graphics other than the very simple ones you are thinking about, while you make a success criterion that would apply to all graphics and not just the simple ones you are thinking about.

is all of these complications, and all of the unintended consequences, that caused us to back off from trying to do anything with graphics in WCAG 2.0

if you are only worrying about having very small UI indicators with low contrast be unnoticeable by people with low vision, then restrict this provision to "small UI indicators" and require that these have 4.5:1 contrast with their background for at least 40% of the element and at least two pixel wide lines for 40% of the element. (Or something like that). That would ensure that they are visible. Once noticed, if the individual has low vision, they can use whatever tools they have available to blow them up to examine them if they in fact need to because they cannot clearly identify them and are unfamiliar with what they are in that particular location.

@mraccess77
Copy link

@GreggVan wrote 3. note that this outlaws certain types of pie charts completely if they have for example 4 slices. It becomes mathematically impossible to have four adjoining colors all have the contrast you talk about

You can have a line that meets the contrast separating the slices so the colors are not adjoining.

@goodwitch
Copy link
Contributor

@GreggVan as you know, the concept of color contrast requirements for non-text is very complex, so we purposefully created two proposed SC. On this one, we are completely focused on just User Interface Components (things that you can activate). When I'm talking about "thin" 3 css pixels, I'm talking about essential information that is thin. I'm not talking about the size of the whole image...I'm talking about the width of the stroke of the "line" that is creating the image that is essential to understanding. Many icons that serve as user interface controls are designed with "lines" that are bigger than 3 css pixels...but imagine for a moment an icon of a pencil...and imagine the pencil being drawn with a thin (1 css pixel) line. Nothing about the pencil is filled in...it is just the outline of a pencil. That is what I'm talking about.

And...when it comes to complex charts and graphs...we've thought very, very deeply about that. That is a different proposed SC called Graphics Contrast. I think you may have missed the many other examples link (from the Understanding Graphics Contrast document) that leads you to https://alastairc.ac/tests/graphic-contrast-test.html

Will you be at TPAC in November? I'm enjoying your questions and insights very much...I can only imagine conversations in person to be even better!

@DavidMacDonald
Copy link
Contributor

I'm for simplifying to 3:1 for a number of reasons.
#10 (comment)

Not the least of which, testing for this would be crazy with a 2 tier SC.

@allanj-uaag
Copy link
Contributor

lvtf

@awkawk
Copy link
Member

awkawk commented Nov 30, 2017

Done. 3:1 implemented in latest version.

@awkawk awkawk closed this as completed Nov 30, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

7 participants