Button Text Color Accessibility Mixin Test
How do I make an button text color accessibility mixin test?
Give a class a background color using the mixin and the button text color will choose whether or not to be dark or light.. What is a button text color accessibility mixin test? How do you make a button text color accessibility mixin test? This script and codes were developed by EY-Intuitive on 17 January 2023, Tuesday.
Button Text Color Accessibility Mixin Test Previews
Button Text Color Accessibility Mixin Test - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Button Text Color Accessibility Mixin Test</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .base-font-styles { font-size: 22px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; color: rgba(0, 0, 0, 0.8);
}
body { font-size: 22px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; color: rgba(0, 0, 0, 0.8);
}
.run-test { margin: 0 auto; display: block; padding: 15px;
}
.test-button { font-size: 22px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; color: rgba(0, 0, 0, 0.8); border-radius: 2px; display: block; width: 300px; margin: 0 auto 20px; border: none; padding: 20px 40px;
}
.test-button.warning { color: black; background-color: #f39c12;
}
.test-button.error { color: black; background-color: #e74c3c;
}
.test-button.success { color: white; background-color: #1a7540;
}
.test-button.alert { color: white; background-color: #8e44ad;
}
.test-button.new { color: white; background-color: #217ccc;
}
.test-button.incoming { color: white; background-color: #2ecc71;
}
.accessibility-heading { font-weight: 700; text-align: center; padding: 20px;
}
.accessibility-subheading { text-align: center; padding: 5px; margin-bottom: 40px;
}
.contrastratio { text-align: center;
}
.normalaa { font-weight: 700; text-align: center;
}
.normalaa.pass { color: green;
}
.normalaa.fail { color: red;
}
.test { padding: 20px 0; border-bottom: 2px solid #bdc3c7;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1 class="accessibility-heading">Mixin to Help Pass WCAG AA Accessibilty Contrast Ratios</h1>
<h2 class="accessibility-subheading">Contrast Ratio must be >= 4.5 to Pass</h2>
<div class="test"> <button class="test-button warning">Warning</button> <p class="normalaa"></p> <p class="contrastratio"></p>
</div>
<div class="test"> <button class="test-button error">Error</button> <p class="normalaa"></p> <p class="contrastratio"></p>
</div>
<div class="test"> <button class="test-button success">Success</button> <p class="normalaa"></p> <p class="contrastratio"></p>
</div>
<div class="test"> <button class="test-button alert">Alert</button> <p class="normalaa"></p> <p class="contrastratio"></p>
</div>
<div class="test"> <button class="test-button new">New</button> <p class="normalaa"></p> <p class="contrastratio"></p>
</div>
<div class="test"> <button class="test-button incoming">Incoming</button> <p class="normalaa"></p> <p class="contrastratio"></p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Button Text Color Accessibility Mixin Test - Script Codes CSS Codes
.base-font-styles { font-size: 22px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; color: rgba(0, 0, 0, 0.8);
}
body { font-size: 22px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; color: rgba(0, 0, 0, 0.8);
}
.run-test { margin: 0 auto; display: block; padding: 15px;
}
.test-button { font-size: 22px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; color: rgba(0, 0, 0, 0.8); border-radius: 2px; display: block; width: 300px; margin: 0 auto 20px; border: none; padding: 20px 40px;
}
.test-button.warning { color: black; background-color: #f39c12;
}
.test-button.error { color: black; background-color: #e74c3c;
}
.test-button.success { color: white; background-color: #1a7540;
}
.test-button.alert { color: white; background-color: #8e44ad;
}
.test-button.new { color: white; background-color: #217ccc;
}
.test-button.incoming { color: white; background-color: #2ecc71;
}
.accessibility-heading { font-weight: 700; text-align: center; padding: 20px;
}
.accessibility-subheading { text-align: center; padding: 5px; margin-bottom: 40px;
}
.contrastratio { text-align: center;
}
.normalaa { font-weight: 700; text-align: center;
}
.normalaa.pass { color: green;
}
.normalaa.fail { color: red;
}
.test { padding: 20px 0; border-bottom: 2px solid #bdc3c7;
}Button Text Color Accessibility Mixin Test - Script Codes JS Codes
/* Color contrast script for http://webaim.org/resources/contrastchecker/
Authored by Jared Smith.
Nothing here is too earth shattering, but if you're reading this, you must be interested. Feel free to steal, borrow, or use this code however you would like.
The color picker is jscolor - http://jscolor.com/
*/
function test(){ $('.test').each(function(){ var contrastratio = $(this).find('.contrastratio'); var normalaa = $(this).find('.normalaa'); var foregroundColor = rgb2hex($(this).find('.test-button').css('color')); var backgroundColor = rgb2hex($(this).find('.test-button').css('background-color')); var L1 = getL(foregroundColor); var L2 = getL(backgroundColor); if (L1!==false && L2!==false) { var ratio = (Math.max(L1, L2) + 0.05)/(Math.min(L1, L2) + 0.05); contrastratio.html('Contrast Ratio: ' + (Math.round(ratio*100)/100) + ":1"); normalaa.removeClass('pass fail'); if(ratio >= 4.5) { normalaa.html("Pass"); normalaa.addClass('pass'); } else { normalaa.html("Fail"); normalaa.addClass('fail'); } } else { normal.style.color = "#00f"; normal.style.backgroundColor = "#fff"; contrastratio.innerHTML = "N/A"; normalaa.innerHTML = "?"; } function getL(color) { if(color.length == 3) { var R = getsRGB(color.substring(0,1) + color.substring(0,1)); var G = getsRGB(color.substring(1,2) + color.substring(1,2)); var B = getsRGB(color.substring(2,3) + color.substring(2,3)); update = true; } else if(color.length == 6) { var R = getsRGB(color.substring(0,2)); var G = getsRGB(color.substring(2,4)); var B = getsRGB(color.substring(4,6)); update = true; } else { update = false; } if (update == true) { var L = (0.2126 * R + 0.7152 * G + 0.0722 * B); return L; } else { return false; } } function rgb2hex(rgb) { rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); function hex(x) { return ("0" + parseInt(x).toString(16)).slice(-2); } return hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); } function getsRGB(color) { color=getRGB(color); if(color!==false) { color = color/255; color = (color <= 0.03928) ? color/12.92 : Math.pow(((color + 0.055)/1.055), 2.4); return color; } else { return false; } } function getRGB(color) { try { var color = parseInt(color, 16); } catch (err) { var color = false; } return color; } });
}
test();
| Developer | EY-Intuitive |
| Username | ey_intuitive |
| Uploaded | January 17, 2023 |
| Rating | 3.5 |
| Size | 4,555 Kb |
| Views | 4,048 |
Do you need developer help for Button Text Color Accessibility Mixin Test?
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!
EY-Intuitive (ey_intuitive) Script Codes
| Name | Size |
| Star Wars Name Generator | 3,490 Kb |
| Reading Interaction | 2,598 Kb |
| Awesome Search Button with Input Animation | 3,633 Kb |
| Animated Menu with Submenus | 5,647 Kb |
| Facebook Paper Inspired Menu | 5,617 Kb |
| Google Material Design Nav Submenu Animation | 3,009 Kb |
| UI Color Shade Previewer | 3,159 Kb |
| Dynamic Height Animated Menu | 3,054 Kb |
| Underscore templates - Example 3 | 2,568 Kb |
| Hidden Push Nav with Flyouts | 3,948 Kb |
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!
Similar Scripts & Codes
| Name | Username | Size |
| CSS Chat Bubbles | Boylett | 2,094 Kb |
| CSS3 Media Queries demo | Machal | 1,824 Kb |
| Image grid with captions | Mchernin34 | 2,222 Kb |
| Practice using Wixel | Emnk | 3,057 Kb |
| Sass Get Function | Lukewatts | 2,155 Kb |
| Example SVGZ Data URI | Joeyhoer | 2,981 Kb |
| STIKHOI | Denmch | 7,122 Kb |
| Fullscreen Parallax | Bassta | 3,313 Kb |
| A Pen by Patrick Cox | Pcridesagain | 2,899 Kb |
| Email Marketing Mock | Kristenzirkler | 8,224 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!