Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,161,441 members, 7,846,804 topics. Date: Saturday, 01 June 2024 at 12:49 AM

What Is A Color Contrast Ratio? - Programming - Nairaland

Nairaland Forum / Science/Technology / Programming / What Is A Color Contrast Ratio? (310 Views)

React Native Border Radius With Background Color Example / Set Background Color Of Root View In React Native / Setting Border Color Of Textinput Component In React Native (2) (3) (4)

(1) (Reply)

What Is A Color Contrast Ratio? by EfevwiaEfemena(m): 4:55am On Jul 29, 2022
Before I explain, If you are a front-end developer or web designer, I believe you should have understood or come across the word WEB CONTENT ACCESSIBILITY GUIDELINES (WCAG) or WORLD WIDE WEB CONSORTIUM (W3C) which develops web standards such as HTML, CSS, etc. But if you are not aware then this is for you.
These Guidelines help make the web accessible to people with disabilities and this makes sure people who cannot see certain colors or do not see colors at all can normally use any website.
WCAG has set some minimum ratios as a criteria to pass the web accessibility guidelines and we have categories like WCAG, AA, INTERFACE COMPONENTS, and many more, trust me you will understand them soon.
Webbikon Technologies is the best web design Company in Abraka, Nigeria

HOW TO CALCULATE THE COLOR CONTRAST RATIO?

Color contrast is calculated using relative Luminance which according to W3.org” is defined as the relative brightness of any point in the color space normalized to zero for the darkest black and one for the lightest white”. So in simple terms, the darkest black is nothing but the hex code #000000 has a relative luminance of 0 which goes up to one for the brightest one is hex code #ffffff and this pretty much applies to any color in the color wheel.
NOTE: CALCULATING CTHE OLOR CONTRAST RATIO INVOLVES A LOT OF MATHS. HOWEVER, there is a cool tool called CONTRAST RATIO where you can just enter the hex code and it will tell you the relative luminance value. After you have gotten the relative luminance value all you have to do is to apply the color contrast formula. Which is (L1+0.05) divided by (L2+0.05) of which L1 is the luminance of the lighter value and L2 is the luminance of the darker color.
EXAMPLE: a blue text on a white background, blue is the darker color with a luminance of 0.0,722, and white is 1.0000, now applying their values to the formula.
This will be color contrast= (1+0.05)/ (0.0722+0.05)=1.05/0.12222=8.59. This simply means the color contrast ratio to be 8.59:1 which is a good one in terms of the minimum standards of WCAG, which will show green pass in the WCAG AA, WCAG AAA, on the normal text and do the same for larger text(which are the criteria).
NOTE: WHAT I DID AFTER WEBAIM. ,ORG is the description of the contrast checker.

SO I BELIEVE THIS WON’T BE A PROBLEM FOR YOU ANYMORE I BELIEVE YOU HAVE #developer #designer CHECKED THE SITE AND YOU HAVE SEEN IT IS WORKING TOO

1 Share

(1) (Reply)

Autel Vs Xhorse Vs OEM Keys For 2015+ Land Rover / The Will Of Having A Social Application Developed / Android Studio Users, How Can I Resolve This Issue On My Virtual Emulator

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 12
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.