Design Mockups: Contrast Ratios at Level AAA, best 7:1 all around [strong]

[shawna-slh]

We want to meet Level AAA for contrast ratios. In several ways, it would be best and easiest if all text contrasts were 7:1.

We could use less that 7:1 for large text, but then we would:

• Need to be careful that when designing various components of the WAI site, someone doesn't accidentally use a lower contrast on small text. It would be important to note that in the style guide if we have any contrasts less than 7:1 in the final color palette.
• Risk criticism for lower than 7:1, when they don't realized we only use that for large text.

Also note that WCAG 2.1 is likely to have additional requirements for contrast of other elements. It's still being refined, but here is a draft.

[James-Green]

I don't agree [strong] that "we want to meet AAA for contrast ratios." Our original design parameters did not call for AAA and I'm curious what type of criticism w3 and wai sites have received to date for pages that currently don't meet AAA.

[yatil]

I think overall the colors have enough contrast, there is only one combination that does not meet 7:1, and that is the #00666F on #FAFAFA which is 6.4:1 – still way more contrast than the AA minimum criteria, and it’s only used sparingly around the page and – in headings – in an enlarged font.

[James-Green]

resolution to leave contrast ratios as is.

[brewerj]

I'm unclear why this issue was closed; I see the resolution to leave contrast ratios as is, but not a reason for doing so (which can help clarify whether there might have been misunderstandings, or info missing.)

My understanding is that the design guidelines say: "Meet or exceed WCAG 2.0 accessibility requirements (Level AA at minimum with AAA as possible)." So if AAA isn't possible, we wouldn't meet it; but if it is possible, we'd try. Eric if you can provide a link back to the specific instance that you're talking about, that would help clarify the context. What I'm wondering is whether the color scheme there is indeed tweakable slightly.

I don't know if this background helps, but Shawn had mentioned above some new work on low vision. This is significant because what's currently in WCAG 2.0 AA just barely gets some people with low vision by -- meaning that they may be using part of their energy just to try to make out what's on the page. The anticipated new guidance should help those users more, and on the low vision issue, it might keep us from having to re-open the redesign after it's completed. For the WAI website, we've tried to err on the side of AA+ so that users with disabilities encounter as few barriers as possible when they are trying to reach the primary source for resources they may need to help advocate for a more accessible web.

James, you were asking above what kind of criticism we've gotten for not meeting AAA. We've gotten complaints over the years for not meeting more of the AAA success criteria. We've heard "please do AAA when we can" for two reasons -- both from users who especially want our site to be barrier-free so they can get primary resources; and from others who want to be able to point others to a good-looking site that meets some AAA. Hope that helps.

[yatil]

I don’t know what specific instance I shall provide, the contrasts are on the first page of the styleguide: https://projects.invisionapp.com/share/H299QZZGZ#/215895933_Colors

The problem is that you also want a distinction between different heading colors, to guide the view. If they all have the same weight (read: the same contrast), the page will appear with more weight and might even be harder to read.

For the WAI website, we've tried to err on the side of AA+

6.43 (or on the darker background 5.99) is nearer to AAA than to AA. Users will also be able to change the colors in their browsers and increase the font. I think having one exception will lead to make our website more inviting and shows a possible compromise.

One could argue that the site “meets some AAA” when the majority of the colors conform to AAA.

[James-Green]

@brewerj I think you may be interpreting the Design Parameters differently than we are.

To me, " …AAA as possible, period," is different than "…AAA as possible, given our other requirements and constraints"

From your description, it sounds like the criticism received in the past hasn't been too harsh, but rather encouraging us to go farther when not literally, but realistically possible. Neither the current W3 nor WAI sites fully meet AAA contrast requirements, so I imagine there was discussion after receipt of those contrast complaints you mentioned and a decision was made to stay at AA+. We are trying to do the same thing here.

Eric gave several good reasons why we should stay at AA+. He also mentioned compromise, which, along with first impressions, is important when trying to win people over. Our first two personas are great examples of new types of users we are tying to attract – It has to "look good" to Anna-Lena so she will be willing to share it, and we need to show Andy that it's possible to meet AA and still look like other sites with designs he respects.

If we push design too far from the ideal for all of our personas considered together, many of the developers etc. we have yet to count as users will give up on us (maybe again), assuming that accessibility means an inferior user experience. (On a related note, I will reference issue #52 here and give the same argument for being very cautious with changing the font of the design).

Do the rationales we provided alleviate your concerns? We are already very close to AAA, but the TF did not feel we should go further. If you still feel that we should, please comment or better yet, come to our TF meeting tomorrow and discuss! :)

[brewerj]

Hi Eric and James, thanks for your replies.

Eric -- yes the link helps. I'm not immersed in the site the way you are.

Looking back at Shawn's original comment here, and the color blocks, I wonder if a simple solution might be to annotate the non-AAA color contrast with a note saying that those are "only for large-scale text and images of large-scale text," (the exception language from Techniques) similar to how some of the other color options are annotated. Please check with Shawn though to see if that would address her concern.

James -- I would say that the criticism that WAI has gotten in the past has infrequently been phrased harshly, but it has usually been heartfelt. The accessibility guidance in WCAG 2.0 might seem abstract at times, but low vision is a continuum, so whatever threshold we aim for, it means that it makes a website work for some people, and not for others. And since low vision is variable for some people, and progressive for many, it means that for WCAG 2.0 guidance that barely meets the needs of some people with LV (which is why we're updating the standard to better address this), when people raise concerns, it may be because they've hit a pretty big barrier for them as an individual. They often point out that at least for the WAI site, it would be useful to have fewer barriers so they could benefit more from the info there that is critically important to them.

I guess the most basic question that I don't think I've heard the response to yet is, would tweaking the color scheme just a bit more, to 7:1, make this design look unattractive, from the TF's point of view of Anna-Lena and Andy's aesthetics? I'm getting the impression that that may be the case, but not hearing it directly.

After that, my question would be whether there's some other way to address Shawn's concern, such as annotating the template, as I'd suggested above.

With regard to tomorrow's meeting, I'm scheduled to attend, in anticipation of having the IA available for discussion. But for this week, I've needed to move another meeting, and will be unlikely to be able to attend the entire call. My priority will be getting a look at the IA. For the contrast issue, anything you resolve with Shawn will be good from my perspective, as she has specific expertise in the low vision area. Thanks!

[yatil]

I just played around with the color palette: If we move 7 bit down in the green color [from dec(102)/hex(66) to dec(95)/hex(5F)] the contrast is 7.01:1 and I say #00666F and #005F6F are visually indistinguishable (at least not when you see them side-by-side):

I think it would be a sweet spot if we could meet there.

If we want to have 7:1 on the darker bg color (#F2F2F2) as well, we can select #005A6A instead (or only on the darker bg) for a 7.02 contrast:

[James-Green]

alicia will do this next week

[aliciafrausto]

Updated all greens in text to #005A6A

[yatil]

Thanks. Note that you don’t need to update the source documents anymore, I can just update the color in the CSS file :-)