Random Accessible Color Contrast

Developer
Andreas Nylin
Size
3,995 Kb
Views
12,144
  1. Random Accessible Color Contrast Previews
  2. Random Accessible Color Contrast HTML Codes
  3. Random Accessible Color Contrast CSS Codes
  4. Random Accessible Color Contrast JS Codes

How do I make an random accessible color contrast?

Generates a random foreground and background color with a specific contrast ratio. Click page to generate new colors. This was inspired by Hello Color http://jxnblk.com/hello-color/. What is a random accessible color contrast? How do you make a random accessible color contrast? This script and codes were developed by Andreas Nylin on 30 September 2022, Friday.

Random Accessible Color Contrast Previews
IQ Test

Random Accessible Color Contrast - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Random Accessible Color Contrast</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="controls"> Min ratio: <div class="btn-group"> <label class="btn-switch">	<input type="radio" name="ratio" type="radio" value="3"> <span>3:1</span>	</label> <label class="btn-switch">	<input type="radio" name="ratio" type="radio" value="4.5" checked> <span>4.5:1</span>	</label> <label class="btn-switch">	<input type="radio" name="ratio" type="radio" value="7"> <span>7:1</span>	</label> </div> Color 1: <span id="color1"><span class="swatch"></span> <span class="name"></span></span>, Color 2: <span id="color2"><span class="swatch"></span> <span class="name"></span></span>, Contrast ratio: <span id="radio-display">0</span>:1
</div>
<section id="section1"> <div> <h1 contenteditable>Lorem ipsum dolor</h1> <p contenteditable>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pharetra felis id lacinia semper.</p> </div>
</section>
<section id="section2"> <div> <h1 contenteditable>Lorem ipsum dolor</h1> <p contenteditable>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pharetra felis id lacinia semper.</p> </div>
</section> <script src="js/index.js"></script>
</body>
</html>

Random Accessible Color Contrast - Script Codes CSS Codes

* { box-sizing: border-box;
}
body,
html { width: 100%; height: 100%; margin: 0; font-family: 'courier new', monospace;
}
html { font-size: 14px;
}
@media (min-width: 480px) { html { font-size: 16px; }
}
body { line-height: 1.46; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
}
body > section { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
}
h1 { font-size: 1.5rem; font-weight: normal; line-height: 1; margin: 0; padding: .25rem; -webkit-transition: color .5s; transition: color .5s; cursor: text; max-width: 700px;
}
@media (min-width: 480px) { h1 { font-size: 2.5rem; }
}
p { font-size: 1rem; margin: 0; padding: .25rem; -webkit-transition: color .5s; transition: color .5s; cursor: text; max-width: 700px;
}
h1:hover,
p:hover { border: dashed 2px currentColor;
}
::-moz-selection { background: black; color: white;
}
::selection { background: black; color: white;
}
section { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: background-color .5s; transition: background-color .5s; cursor: pointer; padding: 1em;
}
#controls { padding: .5em; background: #fff; vertical-align: middle;
}
#controls * { vertical-align: middle;
}
.btn-group { display: inline-table;
}
.btn-switch { display: table-cell; vertical-align: middle;
}
.btn-switch input { display: none;
}
.btn-switch span { display: block; padding: 3px; background: gray;
}
.btn-switch :checked + span { background: black; color: #fff;
}
.swatch { margin-top: -3px; display: inline-block; width: 1em; height: 1em; border: solid 1px #ccc; border-radius: 2px;
}

Random Accessible Color Contrast - Script Codes JS Codes

(function() { 'use strict'; var textFocused = false; function roundDecimals(v, d) { var x = Math.pow(10, d); return Math.round(v * x) / x; } function pad(v) { return v.length === 2 ? v : '0' + v; } function hexdec(hex) { return parseInt(hex, 16); } function dechex(d) { return d.toString(16); } /** * Calculate relative luminance in sRGB colour space for use in WCAG 2.0 compliance * @link http://www.w3.org/TR/WCAG20/#relativeluminancedef * @param string $col A 3 or 6-digit hex colour string * @return float * @author Marcus Bointon <[email protected]> */ function relativeluminance(color) { //Remove any leading # color = color.replace('#', ''); var components = [ hexdec(color.substring(0, 2)) / 255, hexdec(color.substring(2, 4)) / 255, hexdec(color.substring(4, 6)) / 255 ]; for (var i = 0, l = components.length; i < l; i++) { var v = components[i]; if (v <= 0.03928) { components[i] = v / 12.92; } else { components[i] = Math.pow(((v + 0.055) / 1.055), 2.4); } }; return (components[0] * 0.2126) + (components[1] * 0.7152) + (components[2] * 0.0722); } /** * Calculate contrast ratio acording to WCAG 2.0 formula * Will return a value between 1 (no contrast) and 21 (max contrast) * @link http://www.w3.org/TR/WCAG20/#contrast-ratiodef * @param string $c1 A 3 or 6-digit hex colour string * @param string $c2 A 3 or 6-digit hex colour string * @return float * @author Marcus Bointon <[email protected]> */ function contrastratio($c1, $c2) { var $y1 = relativeluminance($c1), $y2 = relativeluminance($c2); //Arrange so $y1 is lightest if ($y1 < $y2) { var $y3 = $y1; $y1 = $y2; $y2 = $y3; } return ($y1 + 0.05) / ($y2 + 0.05); } function random(min, max) { return Math.floor(min + Math.random() * (max - min + 1)); } function createRandomColor(min, max) { return '#' + pad(dechex(random(min, max))) + pad(dechex(random(min, max))) + pad(dechex(random(min, max))); } function qs(s) { return document.querySelector(s); } function updateColors() { var targetRatio = Number(qs('[type=radio]:checked').value), color1 = createRandomColor(0, 255), color2 = 0, currentContrastRatio = 0, maxTries = 2500; for (var i = maxTries; currentContrastRatio <= targetRatio && i >= 0; i--) { color2 = createRandomColor(0, 255); currentContrastRatio = contrastratio(color1, color2); if (i === 0) { color1 = createRandomColor(0, 255); i = maxTries; } } qs('#radio-display').innerText = roundDecimals(currentContrastRatio, 2); qs('#color1 .name').innerText = qs('#color1 .swatch').style.backgroundColor = color1; qs('#color2 .name').innerText = qs('#color2 .swatch').style.backgroundColor = color2; qs('#section1').style.backgroundColor = qs('#section2').style.color = color1; qs('#section1').style.color = qs('#section2').style.backgroundColor = color2; //location.hash = '!color1=' + escape(color1) + '&color2=' + escape(color2); } document.addEventListener('click', function(e) { if (e.target.tagName != null && e.target.tagName.toLowerCase() != 'section') { return; } if(textFocused) { textFocused = false; return; } updateColors(); }); window.addEventListener('load', function() { updateColors(); }); qs('h1').addEventListener('focus', function() { textFocused = true; }); qs('p').addEventListener('focus', function() { textFocused = true; });
})();
Random Accessible Color Contrast - Script Codes
Random Accessible Color Contrast - Script Codes
Home Page Home
Developer Andreas Nylin
Username andreasnylin
Uploaded September 30, 2022
Rating 4
Size 3,995 Kb
Views 12,144
Do you need developer help for Random Accessible Color Contrast?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Andreas Nylin (andreasnylin) Script Codes
Name
Mega Man
Polar bear
CSS pumpkin generator
CSS target the middle element
Code Monkey
CSS 3D Cube
HTML dialog test
Tab panel
AngularJS custom tooltip directive
CSS checkbox and radio button
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!