Mobile app version of vmapp.org
Login or Join
Lee3735518

: WCAG luminance contrasts - current practice, what is it? I tried to ask this question in another group, but got a hint this group might be more appropriate. I just wrote a little tool to

@Lee3735518

Posted in: #Accessibility #Color #Css

I tried to ask this question in another group, but got a hint this group might be more appropriate.

I just wrote a little tool to check luminance contrast (WCAG) on a web page. Testing this I was surprised to see that a lot of sites (for example Facebook) uses contrast as low as 2.7 where the recommended contrast is 4.5 (WCAG2 AA).

There are many sites doing that (for example this one ;-) ). It seems like there is some practical consensus. It looks difficult for a designer to avoid using lower contrast on some elements.

This post took up a somewhat similar problem. Is there any documentation about this practice with contrast of using low luminance contrast? Some research or some recommendation at W3C that I can not find?

I hope my little tool does not get this wrong. ;-)

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Lee3735518

1 Comments

Sorted by latest first Latest Oldest Best

 

@Samaraweera207

lot of sites (for example Facebook) uses contrast as low as 2.7 where
the recommended contrast is 4.5 (WCAG2 AA).


Interesting question.

May I ask you where did you find the 2.7:1 ratio of Facebook's UI?

4.5:1 is the recommended contrast "between text (and images of text) and background behind the text", so I've checked this sample Facebook post:



The result is:


Background color is #fff ;
Foreground color is #141823 ;
The contrast ratio is 17.73:1 (Level AAA).


In the sidebar:




Background color is #E9EAED ;
Foreground color is #333;
Contrast ratio is 10.50:1 (Level AAA).


I've found similar ratios almost everywhere on Facebook UI, so I'd like to know more about where and how you measured the contrast.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme