Create a color contrast checker with HTML, CSS, and JavaScript | Envato Tuts+

[kasenur]

By “color contrast” we’re referring to the difference in brightness between foreground and background colors. In simpler terms, it defines how easy it is for the human eye to recognize text or images on a coloured background.
The Web Content Accessibility Guidelines (WCAG) provide specific recommendations regarding color contrast for text to make web content accessible and visible to people with impaired vision.
It recommends a minimum contrast ratio of 4.5:1 for normal text. For larger text, the minimum recommended contrast ratio is 3:1. According to the WCAG,  larger text is defined as 24px or larger for normal-weight fonts and 18.66px or larger for bold text. 
For example, if you have a dark background with dark-colored text, the text will not be easily readable, as seen below.

How is contrast ratio calculated?
The contrast ratio between two colors is calculated using the following formula.

1
contrast ratio = (L1 + 0.05) /( L2+0.05)

L1 is the relative luminance of the lighter color, and L2 is the relative luminance of the darker color. While higher contrast is generally recommended to meet accessibility standards, moderate contrast is the best as it reduces eye strain. 
Luminance, on the other hand, is the perceived brightness of a color, and it's calculated based on RGB values of that color as shown below:

Once we obtain these values, we linearise each component as follows:

1
let r = R0 <= 0.03928 ? R0 / 12.92 : Math.pow((R0 + 0.055) / 1.055, 2.4);

2
let g = G0 <= 0.03928 ? G0 / 12.92 : Math.pow((G0 + 0.055) / 1.055, 2.4);

3
let b = B0 <= 0.03928 ? B0 / 12.92 : Math.pow((B0 + 0.055) / 1.055, 2.4);

Finally, we compute the relative luminance like so:

1
Luminance = 0.2126 * R0+0.07152* G0+0.0722*B0

Now that we know how to calculate the contrast ratio, let’s build our own color contrast tool!
Here’s what we’re working towards

HTML Structure
The HTML structure will have the following elements:

 

[TanerCelik31]

Bu konuda deneyimim var, gerçekten önemli bir mesele.

 

[EsraFidan9]

Harika bilgiler, bu tür içerikleri çok faydalı buluyorum.

 

[RukiyeErol_34]

Kapsamlı bir paylaşım olmuş, emeğinize sağlık.

 

[FarukYavuz29]

Paylaşım için teşekkürler, oldukça faydalı bir konu olmuş.