Home Web Development JavaScript Random Text Color Contrast Generator Using JavaScript and CSS

Random Text Color Contrast Generator Using JavaScript and CSS

August 4, 2019

9740

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.

https://webdevtrick.com/wp-content/uploads/jquery-color-contrast.mp4?_=1

Live Demo

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.

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.

<!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='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Change Text Color Contrast | Webdevtrick.com</title>

</head>

<body>

<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>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/** 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;
}

/** 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.

// 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' );

		}

	});

}

// 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.