forked from siege-media/contrast-ratio
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
128 lines (112 loc) · 8.35 KB
/
index.html
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en" ng-controller="IndexCtrl as page">
<head>
<meta charset="utf-8"/>
<title>Contrast Ratio: Easily calculate color contrast ratios with color pickers. Passing WCAG is easy!</title>
<meta name="description" content="Easily calculate color contrast ratios with color pickers. Passing WCAG is easy!" />
<meta name="keywords" content="contrast, ratio, color, picker, 6220119" />
<meta name="rating" content="general" />
<meta name="copyright" content="Copyright ©2014 - Cuong Nguyen" />
<meta name="expires" content="never" />
<meta name="distribution" content="global" />
<meta name="robots" content="index,follow" />
<link rel='stylesheet' href='spectrum.min.css'/>
<link rel="stylesheet" href="style.min.css"/>
<link rel="shortcut icon" type="image/png" href="about:blank" favorite-icon/>
</head>
<body style="opacity: 0" ng-style="{opacity: 1}">
<h1><a href="#"><span>Contrast</span> <strong>ratio</strong></a></h1>
<label class="background">
<span>Background:</span>
<div class="app-input-container">
<input id="background" ng-model="page.backgroundColor" ng-change="page.notifyChange()" autofocus incrementable-text auto-length />
<spectrum-colorpicker class="app-color-picker" ng-model="page.backgroundColor" ng-change="page.notifyChange()" options="page.colorPickerOptions"></spectrum-colorpicker>
</div>
</label>
<label class="foreground">
<span>Text color:</span>
<div class="app-input-container">
<input id="foreground" ng-model="page.textColor" ng-change="page.notifyChange()" incrementable-text auto-length />
<spectrum-colorpicker class="app-color-picker" ng-model="page.textColor" ng-change="page.notifyChange()" options="page.colorPickerOptions"></spectrum-colorpicker>
</div>
</label>
<output tabindex="0" ng-class="page.outputClasses" ng-style="{'background-color': page.output.backgroundColor, 'background-image': page.output.backgroundImage }">
<strong ng-bind="page.contrast.ratio">?</strong>
<span class="error" ng-bind="page.ratioErrorExplain.message" title="{{ page.ratioErrorExplain.tooltip }}"></span>
</output>
<section id="results">
<p ng-bind="page.results.message"></p>
<ul>
<li ng-repeat="message in page.results.cases" ng-bind="message"></li>
</ul>
</section>
<section calc-color-score="page.updateScore" class="color-display" id="backgroundDisplay" ng-style="{'color': page.textColor, 'background': page.backgroundColor}">
<h1>How to use</h1>
<p>As you type, the contrast ratio indicated will update. Hover over the circle to get more detailed information. When
semi-transparent colors are involved as backgrounds, the contrast ratio will have an error margin, to account for
the different colors they may be over.</p>
<p style="font-family: Garamond, 'Palatino Linotype', Georgia, serif;">This sample text attempts to visually
demonstrate how readable this color combination is, for normal or <strong>bold</strong> text of various sizes and
font styles. </p>
<p style="font-size: 11pt;"><strong>Hint:</strong> Press the up and down keyboard arrows while over a number inside a
functional color notation. Watch it increment/decrement. Try with the Shift or Alt key too!</p>
<footer>
By <a href="http://lea.verou.me" target="_blank">Lea Verou</a>
• <a href="http://www.w3.org/TR/WCAG/#visual-audio-contrast" target="_blank">WCAG 2.0 on color contrast</a>
</footer>
</section>
<section class="color-display" id="foregroundDisplay" ng-style="{'background': page.textColor, 'color': page.backgroundColor}">
<button id="swap" ng-click="page.swapColor()">Set as background color</button>
<div style="padding-bottom: 39px;"></div>
<p>"<strong>Angularified</strong>" & added color pickers</p>
<footer style="margin-top: 15px;">
By
<a class="credit" href="https://www.facebook.com/nvcuong.infotech" target="_blank">
<strong>Cuong Nguyen</strong>
<img class="fb-avatar" src="https://badge.facebook.com/badge/787488965.5745.1959322310.png" width="172px" />
</a>
</footer>
</section>
<footer><div id="test-color"></div></footer>
<script>
/*
AngularJS v1.2.16
(c) 2010-2014 Google, Inc. http://angularjs.org
License: MIT
*/
(function(){'use strict';function d(a){return function(){var c=arguments[0],b,c="["+(a?a+":":"")+c+"] http://errors.angularjs.org/1.2.16/"+(a?a+"/":"")+c;for(b=1;b<arguments.length;b++)c=c+(1==b?"?":"&")+"p"+(b-1)+"="+encodeURIComponent("function"==typeof arguments[b]?arguments[b].toString().replace(/ \{[\s\S]*$/,""):"undefined"==typeof arguments[b]?"undefined":"string"!=typeof arguments[b]?JSON.stringify(arguments[b]):arguments[b]);return Error(c)}}(function(a){var c=d("$injector"),b=d("ng");a=a.angular||
(a.angular={});a.$$minErr=a.$$minErr||d;return a.module||(a.module=function(){var a={};return function(e,d,f){if("hasOwnProperty"===e)throw b("badname","module");d&&a.hasOwnProperty(e)&&(a[e]=null);return a[e]||(a[e]=function(){function a(c,d,e){return function(){b[e||"push"]([c,d,arguments]);return g}}if(!d)throw c("nomod",e);var b=[],h=[],k=a("$injector","invoke"),g={_invokeQueue:b,_runBlocks:h,requires:d,name:e,provider:a("$provide","provider"),factory:a("$provide","factory"),service:a("$provide",
"service"),value:a("$provide","value"),constant:a("$provide","constant","unshift"),animation:a("$animateProvider","register"),filter:a("$filterProvider","register"),controller:a("$controllerProvider","register"),directive:a("$compileProvider","directive"),config:k,run:function(a){h.push(a);return this}};f&&k(f);return g}())}}())})(window)})(window);
/*!
* $script.js JS loader & dependency manager
* https://github.com/ded/script.js
* (c) Dustin Diaz 2014 | License MIT
*/
(function(e,t){typeof module!="undefined"&&module.exports?module.exports=t():typeof define=="function"&&define.amd?define(t):this[e]=t()})("$script",function(){function h(e,t){for(var n=0,i=e.length;n<i;++n)if(!t(e[n]))return r;return 1}function p(e,t){h(e,function(e){return!t(e)})}function d(e,t,n){function g(e){return e.call?e():u[e]}function y(){if(!--m){u[o]=1,s&&s();for(var e in f)h(e.split("|"),g)&&!p(f[e],g)&&(f[e]=[])}}e=e[i]?e:[e];var r=t&&t.call,s=r?t:n,o=r?e.join(""):t,m=e.length;return setTimeout(function(){p(e,function t(e,n){if(e===null)return y();e=!n&&!/^https?:\/\//.test(e)&&c?c+e+".js":e;if(l[e]){o&&(a[o]=1),l[e]==2?y():setTimeout(t.bind(null,e,!0),0);return}l[e]=1,o&&(a[o]=1),v(e,y)})},0),d}function v(n,r){var i=e.createElement("script"),u;i.onload=i.onerror=i[o]=function(){if(i[s]&&!/^c|loade/.test(i[s])||u)return;i.onload=i[o]=null,u=1,l[n]=2,r()},i.async=1,i.src=n,t.insertBefore(i,t.lastChild)}var e=document,t=e.getElementsByTagName("head")[0],n="string",r=!1,i="push",s="readyState",o="onreadystatechange",u={},a={},f={},l={},c;return d.get=v,d.order=function(e,t,n){(function r(i){i=e.shift(),e.length?d(i,r):d(i,t,n)})()},d.path=function(e){c=e},d.ready=function(e,t,n){e=e[i]?e:[e];var r=[];return!p(e,function(e){u[e]||r[i](e)})&&h(e,function(e){return u[e]})?t():!function(e){f[e]=f[e]||[],f[e][i](t),n&&n(r)}(e.join("|")),d},d.done=function(e){d([null],e)},d});
$script([
'prefixfree.min.js',
'jquery-2.1.1.min.js',
'incrementable.min.js',
'color.min.js'
], function () {
$script('angular.min.js', function () {
$script([
'spectrum.min.js',
'spectrum-directive.min.js',
'index.min.js'
], function () {
angular.bootstrap(document, ['colorContrast']);
});
});
});
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-43478727-2', '6220119.github.io');
ga('send', 'pageview');
</script>
<a href="https://github.com/6220119/contrast-ratio"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_orange_ff7600.png" alt="Fork me on GitHub"></a>
<iframe class="twitter-share-button" src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2F6220119.github.io%2Fcontrast-ratio%2F&width&layout=button_count&action=like&show_faces=false&share=true&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe>
</body>
</html>