0

We're looking to launch a new version of a website, and we had multiple users concerned about readability with grey text on a grey background.

I did some basic search, and found this website. Using ColorZilla for Chrome, I obtained #EFEFF4 for background color, and #A7A7AB for foreground color, for a contrast ratio of 2.06-2.1 depending on where I pick the foreground color.

Is this the correct way to measure contrast?

Are there any good accessbility documents that I can send to the developer? I found the WCAG 2.0 guide, but is there anything a bit more friendly if I need to bring this up in a discussion?

Ken Mohnkern
  • 9,044
  • 1
  • 33
  • 47
BlueBuddy
  • 103
  • 2
  • Related: http://ux.stackexchange.com/questions/99628/how-can-i-convince-others-that-text-over-background-images-is-a-bad-idea/99633#99633 – Tim Grant Apr 05 '17 at 20:42

1 Answers1

2

It seems pretty cut and dry to me, there is clearly potential readability issues.

That is indeed how you use that WebAim color contrast checker. For obtaining the colors I would recommend using the element inspector or viewing the source code (it is your site isn't it?) to get the exact hex value but the color picker should give roughly the same. A value of 2.1 is less than half the AA recommended 4.5:1 ratio for "normal text" and less than a third of AAA rating.

I would show the developer the official W3 WCAG 2.0 document you have linked and reference 1.4.3 Contrast (Minimum). Then show them the contrast checker and values you have found to show why it is unsatisfactory.

Even if the developer wants to disagree with the W3 documents by saying they are "just guidelines", the fact that you've had "multiple users concerned" should be a big enough red flag that something needs fixed.

DasBeasto
  • 15,318
  • 9
  • 57
  • 78
  • Ahh yes I should stop relying on GIMP so heavily! I just dug the exact RGB values from the stylesheet for a ratio of 2.24:1. Thanks for the tip on section 1.4.3, I have sent that section over along with the full document to the developer in my review. Thanks! – BlueBuddy Apr 05 '17 at 17:38
  • @Thebluefish rather than trying to convince the developer (even though everyone should recognize accessibility as part of inclusive design), it may be better off convincing the stakeholder (e.g. a product owner) that make decisions on the user requirements to include this as part of implementation or testing sign off. – Michael Lai Apr 05 '17 at 23:17
  • @MichaelLai very true, but from the "were looking to launch a new site" while not being the developer I assumed OP was the stakeholder, but if not then definitely follow that advice they will have much more day in what happens. – DasBeasto Apr 06 '17 at 02:05
  • @DasBeasto sorry, my comment wasn't meant to be a criticism of your answer. Given that OP is asking for some information to address the concern that can be brought up in a discussion, I assumed that this is not a requirement and therefore needs to come from a higher level for it to be included, since most developers probably aren't in the habit of putting in functions or features that are outside the scope of their work – Michael Lai Apr 06 '17 at 02:50