How we can randomly switch and create good text color contrast using JavaScript? Solution: Random Text Color Contrast Generator Using jQuery & CSS.
If you are experienced graphic or web designer, then you probably know what is contrast. Contrast is to see differences among two or more elements, but compare is to do the opposite, to look for similarities. In other words, it is a combination of background and objects color which create a good user experience.
Today you will learn to create and contrast generator using jQuery. As you know jQuery is a JavaScript library, that’s why I am putting this post in JS category. This program is something like our previous program Random Color Generator, but there is some difference between these. Basically, this program randomly generates background color and change text color according to the background. When the background becomes dark then text color becomes white, and when background color becomes any light color then the text becomes black.
So, Today I am sharing Random Text Color Contrast Generator Using JavaScript and CSS. This program will help to create a good color and background combination. Also, you can learn to create this by yourself. This very short program because of jQuery, we all know that working with libraries is too easy.
If you are thinking now how this JavaScript CSS Contrast change program actually is, then see the preview given below.
Preview Of JavaScript CSS Contrast Change Program
See this video preview to getting an idea of how this program looks like.
Now you can see this visually, and also see live by pressing the button above. If you like this, then get the source code of its.
You May Also Like:
- Gradient Direction Navigation
- JavaScript Animated Bar Graph
- Google Map Custom Marker
- Text Find and Highlight Program
Random Text Color Contrast Generator Source Code
Before sharing source code, let’s talk about it. First I have created an HTML list using <ul> and <li> and put these inside a div. On the last child of li, I have put an onclick function. For selecting the last child used CSS :last-child property, and the JS on click function look like this: <li onclick="changeContrast()"> .
Now in the CSS file, I have placed all the elements on right places. I used flex display and put direction column. Now in Javascript file which is powered by jQuery I have created the main function. By the way, this program is inspired by a Reddit post. Create 3 variable named R,G,B and randomly create values using Math.random() (info).
There are other two variables to decide the generated color is dark or light. Then I used an if condition if the background is dark then text color will white & when the background is light then text color will black. Left other things you will understand easily after getting the codes, I can’t explain all the things in writing.
For creating this program you have to create 3 files. First for HTML, second for CSS, and third for JavaScript. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given here below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <!--Code By Webdevtrick ( https://webdevtrick.com )--> <html lang="en" > <head> <meta charset="UTF-8"> <title>Change Text Color Contrast | Webdevtrick.com</title> <link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="main"> <ul> <li><p>jQuery / JavaScript</p></li> <li><p>Text Color</p></li> <li><p>Contrast Change</p></li> <li><p>According To</p></li> <li><p>Background</p></li> <li><p>WebDevTrick.com</p></li> <li onclick="changeContrast()"><p>Change Now</p></li> </ul> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
/** Code By Webdevtrick ( https://webdevtrick.com ) **/ * { box-sizing: border-box; } body { background-color: #212121; } .main{ height: 80vh; width: 80vh; margin: 0 auto; font-family: 'Quicksand', sans-serif; } ul { margin: 0; padding: 0; height: 100%; display: flex; flex-direction: column; cursor: pointer; border: 2px solid white; } ul li { list-style: none; padding: 1em; flex: 1 auto; display: flex; text-align: center; align-items: center; } ul li p { margin: 0; font-size: 5vh; flex: 1 auto; } li:last-child { font-weight: 900; user-select: none; border: 3px solid white; } |
function.js
The final step, create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
// Code By Webdevtrick ( https://webdevtrick.com ) changeContrast(); function changeContrast() { var R, G, B, C, L; $( "li" ).each(function() { R = (Math.floor(Math.random() * 256)); G = (Math.floor(Math.random() * 256)); B = (Math.floor(Math.random() * 256)); $( this ).css( 'background-color', 'rgb(' + R + ',' + G + ',' + B + ')' ); C = [ R/255, G/255, B/255 ]; for ( var i = 0; i < C.length; ++i ) { if ( C[i] <= 0.03928 ) { C[i] = C[i] / 12.92 } else { C[i] = Math.pow( ( C[i] + 0.055 ) / 1.055, 2.4); } } L = 0.2126 * C[0] + 0.7152 * C[1] + 0.0722 * C[2]; if ( L > 0.179 ) { $( this ).css( 'color', 'black' ); } else { $( this ).css( 'color', 'white' ); } }); } |
That’s It. Now you have successfully created Random Text Color Contrast Generator Using CSS and JavaScript. If you have any doubt or question comment down below.
Thanks For Visting, Keep Visiting.
good work. I can use that to generate colours within a range too.