What is Color Contrast Ratio | How is it Calculated?
Aug 15, 2023
What is Color Contrast Ratio | How is it Calculated?
In this video, I will be talking about what is color contrast ratio, how is it calculated and why is it important to avoid a bad UX. With a quick overview of what color contrast ratio is about we also see how the ratio is calculated using the formula and end it with an example. In between, I also talk about what is relative luminance which is used to determine the color contrast ratio.https://goo.gl/c5vRzS 😅www.freepik.com www.w3.org/TR/WCAG20/ http://TechzClub.com
Content
0.64 -> Welcome back, everyone! So, in our today's video,
we're gonna talk about how to calculate the color
4.32 -> contrast ratio? But, before that, we'll just
have a quick overview of what color contrast
9.36 -> ratio is all about. So, if you're into designing
or front-end development then you might have come
14.88 -> across this term called 'accessibility' or to
be precise web content accessibility guidelines
21.28 -> in short (WCAG). Well, that is nothing
but a set of guidelines put forward by W3C
28.16 -> or World Wide Web Consortium which basically
develops web standards such as HTML,
33.52 -> CSS, etc these guidelines help make the
web accessible to people with disabilities.
39.36 -> So, coming back to the topic color contrast
is one of those important guidelines which
43.84 -> makes sure that people who cannot see
certain colors or who do not see colors
48 -> at all are able to normally use any website.
So, lets quickly understand with an example
52.96 -> why poor color contrast leads to a
bad user experience for these people.
57.36 -> To demonstrate this we will be using this
amazing color blindness simulator tool by Toptal
62.8 -> just enter the URL of any content
on the internet and it will
66.24 -> simulate how a colorblind person would see it.
So, in this example on the left is what a person
71.28 -> with normal vision would see and on the right
is what a person with color blindness would see
76.8 -> there are various type of color blindness
that you can simulate using these filters
81.12 -> so if we choose the extreme type where a
person cannot see colors at all you can
85.92 -> notice that the letter 'H' is hardly visible
which is an indication of poor color contrast.
91.28 -> So, that is the reason we have to make
sure to use proper colour contrast
95.04 -> for which wcag has set some minimum ratios as a
criteria to pass the web accessibility guidelines
102.16 -> among which we have a lot
of categories like WCAG AA,
106.48 -> AAA, Interface components and many more.
So that is again a vast topic to cover
111.44 -> which i can make another video if you guys are
interested, do let me know in the comments below.
116.48 -> So, finally let's have a look at how
to calculate the color contrast ratio
120.4 -> color contrast is calculated using relative
luminance which according to w3.org is defined
126.16 -> as the relative brightness of any point
in color space normalized to zero for the
130.96 -> darkest black and one for the lightest white.
So, in simple terms as you can see here the
136.96 -> darkest black which is nothing but the hexcode
#000000 has a relative luminance of 0 which
143.44 -> goes up to 1 for the brightest white that is hex
code #ffffff and this pretty much applies to any
149.76 -> color on the color wheel if you take an example of
red and sample out colors from this the relative
155.36 -> luminance values are gonna look something like
this which again starts from zero and ends at one.
161.44 -> And as you can see calculating relative luminance
value involves a lot of math which we will not
167.2 -> be getting into else this video would get boring
However, here is a cool tool called contrast ratio
173.92 -> where you can just enter in the hex code and
it'll tell you the relative luminance value
178.64 -> So, now that we have the relative luminance all
we have to do is apply the color contrast formula
184 -> that is (L1 + 0.05 divided by L2 + 0.05) of
which L1 is the luminance of the lighter color
193.04 -> and L2 is the luminance of the darker color.
So, lets just end this video with a quick
197.76 -> example a blue text on a white background here
white is a lighter color with the luminance of 1
204.32 -> and blue is a darker color with a luminance
of 0.0722 now applying these values to the
210.4 -> formula you end up getting 8.59 which makes the
color contrast ratio 8.59 is to 1 which is way
218.48 -> about the minimum standards of WCAG and that
is why it passes all the criteria shown here.
224.64 -> That's it for this video guys I hope
you found it helpful and informative.
228.8 -> And as always if you like the video please give
us a thumbs up subscribe to the channel and don't
233.68 -> forget to click the bell icon.
Thanks for watching!
Source: https://www.youtube.com/watch?v=-chsX0O76aY
