0

I have a website that has font size for body 14px. All the colors have contrast ratio of 3:1.

wgac 2.1 states that normal fonts should have a ratio of 4,51. But if the user zooms in the site, normal font becomes large. and therefore has contrast of 4,51.

1

Short Answer

No, it doesn't work like this. The rules are for 100% zoom. Either:

  • increase the font size to 19px and bold
  • 24px not bold
  • increase the colour contrast to 4.5:1 (ideally 7:1 to make you AAA compliant in that area).

Longer Answer

You are approaching this from the wrong angle. You are trying to make sure your site is compliant rather than as accessible and usable as possible.

Low contrast text is not just a problem for people with colour contrast perception impairments, it also affects users with bright sunlight on their screen or people with cheap phones that have screens with poor contrast / brightness, or people who haven't got their settings right on their monitor!

It also requires more effort from all users to read low contrast text, and more effort = lower conversions / time on the page as people have a short attention span nowadays.

Aim for a 7:1 contrast ratio at your 14px font size.

Even better, define your font size in em or rem and let the user's font size settings dictate how big the font should be. Obviously this means ensuring the site can handle different font sizes using fluid layouts / containers. At this stage just increase your font colour contrast to 4.5:1.

Or if you really want to keep your low contrast text as you find it aesthetically pleasing and you aren't bothered by the points I raised then you could always add a toolbar at the top of the page that lets users change the text colour. See this example where if you press "+ show preferences" it lets you adjust the site to your needs / preferences.

3
  • Thank you for your answer. It's not me who has problems implementing the contrast. The company wants to be compliant, the designer doesn't want to do that even that .... I'm just UX guy who's looking for arguments to sway the decision makers in the right direction. – user3431336 Sep 20 '20 at 15:34
  • I understand your pain. What I tend to do is point the company director to the law suits happening in America, that tends to lead a lot of weight to your argument. Check out w3.org/WAI/business-case and clickawaypound.com they are both useful resources for making your case. You need to use "the fear of missing out" to drill it home that design decisions affect sales. If you need any help making your case just let me know, it is what I do all day! – Graham Ritchie Sep 20 '20 at 23:34
  • +1 for accessibility over compliance – Andrew Martin Sep 21 '20 at 4:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.