1

I'm learning a lot about a11y and making my site WCAG AA compliant and I'm finding big-name sites all over the web that seem to violate contrast ratios. For example, here is a screen shot from DuoLingo with color contrast ratios for text all below 3.0: http://prntscr.com/iu2syg

I also understand that icons need to be >3.0 or 4.5 depending on the line width, but here is a screen shot of Gmail with icons that are clearly below 3.0: http://prntscr.com/iu2te7

So what gives? Are these sites just not WCAG AA compliant? Or am I misunderstanding the requirements of AA compliance?

unor
  • 92,415
  • 26
  • 211
  • 360
Brian Genisio
  • 47,787
  • 16
  • 124
  • 167
  • Non-text content doesn't have contrast requirements at this time. Those are included in WCAG 2.1 which is not an official recommendation yet. As far as WCAG 2.0 is concerned, it only cares about text really. – J. Afarian Mar 26 '18 at 01:30

2 Answers2

5

In order to claim compliance to WCAG 2.0 Level AA, a website needs to fulfil all of the success criteria at Level A and Level AA. This is stated explicitly in the section on conformance requirements.

Success criterion 1.4.3 in WCAG 2.0 applies to text and images of text and therefore applies to the examples in the Duolingo screenshot. However, it does not apply to controls, so there seems to be a loophole for the controls in the GMail screenshot. For this reason, the drafts for WCAG 2.1 introduced a new success criterion for user interface components and graphical objects. This success criterion is still marked as "at risk" in the Candidate Recommendation (January 2018), but would close this loophole if it makes it to the final recommendation.

I could not find a WCAG 2.0 conformance claim on the Duolingo website; it is clear that the contrast ratio in the screenshot is insufficient and would cause Duolingo to fail WCAG 2.0 Level AA conformance. I could not find a WCAG conformance claim on GMail either.

Tsundoku
  • 2,455
  • 1
  • 19
  • 31
  • 1
    I also liked Christophe's explanation in this related post: https://stackoverflow.com/a/49412660/1369374 – aditya Mar 31 '18 at 01:39
2

Websites do have to respect contrast ratio to be WCAG AA compliant. But some websites don't care, some others don't know. W3.org homepage itself has some non conforming contrast ratios.

Problem with accessibility is that when people care, they do not always have the competencies to know the guidelines, the tools to detect the problems, and the comprehension to understand the impacts.

A lot of people think that validating a website with a screenreader gives definitive blessing that it is accessible while this leaves besides contrast aspects.

Adam
  • 17,838
  • 32
  • 54