Skip to content

2
21_22-J-02
Commit 1ccd9569 authored by Wedage C.V- IT17535090's avatar Wedage C.V- IT17535090
Browse files
Options

Merge branch 'it17535090' into 'develop' 

feat:  index page updates.

See merge request !3
parents f7d8a68d d833a8e6
Hide whitespace changes
Inline Side-by-side
Showing with 205 additions and 0 deletions
BE-Aeasthatic-Quality-Check/colorcube-master/index.html 0 → 100644
View file @ 1ccd9569
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>ColorCube </title>
<link rel="stylesheet" href="assets/css/styles.css" type="text/css">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@oomphinc">
<meta name="og:title" content="ColorCube: Evaluate Accessible Color Palettes">
<meta name="twitter:title" content="ColorCube: Evaluate Accessible Color Palettes">
<meta name="og:description" content="Adjust color values to meet WCAG Level AA or AAA standards for legible color combinations.">
<meta name="twitter:description" content="Adjust color values to meet WCAG Level AA or AAA standards for legible color combinations.">
<meta name="og:image" content="assets/img/ColorCube-screenshot.png">
<meta name="twitter:image" content="assets/img/ColorCube-screenshot.png">
<meta name="twitter:image:alt" content="We are sorry, but this tool is not optimized for the visually impaired.">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>[Color Detector]</title>
<script type="text/javascript" src="./assets/js/detection.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="./assets/css/main.css" />
</head>
<body>
<header class="l__header p__header">
<div class="l__max u__space__outer cc__brand">
<h2 class="cc__brand__title">
<a href="." title="Press to reload page and start over with default values">
<img class="cc__brand__logo" src="assets/img/presently.jpeg" alt="" width="390">
ColorCube
</a>
</h2>
<!-- <p class="cc__brand__subtitle text-italic text-light">Color Accessibility Checker built by <a title="Go to Oomph website, link opens in a new window." target="_blank" href="//oomphinc.com">Oomph</a></p> -->
</div>
</header>
<main class="l__main p__main">
<article class="l__max u__space__outer">
<form action="/" class="u__space__outer u__space__vertical cc__form" method="post">
<div class="g__row">
<div class="g__col g--three rhythm">
<h2>Step 1:</h2>
<p>Detect HEX colors from the input image. </p>
<!--Here is where the user uploads-->
<div>
Upload as many images as you would like.
</div>
<br>
<input type="file" id="files" name="files[]" multiple />
<br>
<output id="list"></output>
<!--This script has to be called after the file input is initialized-->
<script>
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
<!--This is where the image will technically go when we're taking color information from it (standard HTML5)-->
<canvas id="canvas" style="display: none;" width="150" height="150"></canvas>
<!--This is where the colors will show up-->
<div id="theme">
<p id="message"></p>
<!--Something curious about this is if you keep clicking on the image,
you'll get the same colors, but sometimes in a different order.-->
<div id="pickedColor" class="colorResults"></div>
<div id="color1" class="colorResults"></div>
<div id="color2" class="colorResults"></div>
<div id="color3" class="colorResults"></div>
</div>
<br>
<br>
<div id="scheme">
<br>
<br>
<br>
<br>
<p>
Generated Mono Color Scheme
</p>
<div class="swatches">
<div class="swatch" id="s0"></div>
<div class="swatch" id="s1"></div>
<div class="swatch" id="s2"></div>
<div class="swatch" id="s3"></div>
<div class="swatch" id="s4"></div>
<div class="swatch" id="s5"></div>
<div class="swatch" id="s6"></div>
<div class="swatch" id="s7"></div>
<div class="swatch" id="s8"></div>
<div class="swatch" id="s9"></div>
<input type = "text" id="ts3" class="inputField">
<input type = "text" id="ts0" class="inputField">
<input type = "text" id="ts1" class="inputField">
<input type = "text" id="ts2" class="inputField">
<textarea style="display: none;" name="" id="txtArea" cols="10" rows="5"></textarea>
</div>
</div>
<div>
<div class="g__col g--three">
<div class="cc__form__row">
<label class="cc__form__label" for="white-value">Light</label>
<input class="cc__form__input" type="text" id="white-value" name="white-value" value="#FFFFFF" required />
</div>
<div class="cc__form__row">
<label class="cc__form__label" for="black-value">Dark</label>
<input class="cc__form__input" type="text" id="black-value" name="black-value" value="#101010" required />
</div>
</div>
</div>
<!-- Submit Button -->
<div class="cc__form__submit g--wide text-align-center">
<input id="brand-color-button" name="brand-color-button" type="submit" class="cc__form__button" value="Get Ratios">
</div>
</div>
</form>
<div id="results-content" class="u__space__vertical--bottom cc__results">
<div class="u__space__outer cc__results__description">
<h2 class="cc__results__title u__space__vertical--bottom">Step 2: Review colors!</h2>
<div class="g__row">
<div class="g__col g--two rhythm">
<h3>Criteria</h3>
<p>This tool shows three different ratio targets and how your color performs with each — white, black, or other colors in your palette:</p>
<ul>
<li><strong class="text-light">WCAG Level AAA:</strong> a contrast ratio equal or greater than <strong>7.0</strong>. For large-scale text, a ratio equal or greater than <strong>4.5</strong>.</li>
<li><strong class="text-light">WCAG Level AA:</strong> a contrast ratio equal or greater than <strong>4.5</strong>. For large-scale text, a ratio equal or greater than <strong>3.0</strong>.</li>
<li>Text that is considered “Large-scale” is <strong>18 points (24px)</strong> or larger or <strong>14 points (19px) and bold</strong> or larger.</li>
</ul>
</div>
<div class="g__col g--two rhythm">
<p>For more details about success criteria, see the <a title="Go to w3 website in a new window" target="_blank" href="https://www.w3.org/TR/WCAG21/#contrast-minimum">WCAG 2.1 minimum contrast ratios</a> page.</p>
<h3>Modify with HSL</h3>
<p><strong>Why HSL?</strong> By modifying primarily the saturation and/or lightness, the original intention of the color is intact. To modify the Hue would be to start to modify the color from a blue to a blue-green, or from a red to an orange. Of course, modify the Hue as you wish as well, but our intention is to show how small movements to the saturation and lightness can increase accessibility while retaining the intention of the brand color. <a href="https://www.nixsensor.com/what-is-hsl-color/" target="_blank">More about how HSL works</a>.</p>
</div>
</div>
</div>
<div id="results-output" class="u__space__vertical--top cc__results__content"></div>
<div class="l__max--text u__space__outer u__space__vertical--top rhythm cc__results__description">
<h3>Edge values</h3>
<p>Be careful with <strong class="text-light">EDGE</strong> values &mdash; the color passes validation, but is within 0.5. It may still present a legibility issue even though it gets a passing grade. </p>
<h3>Most legible Pair</h3>
<p>From the given list of colors, which color combination is the <em>most legible</em>? This does not mean that the color pair will pass minimum requirements, but it has the best chance of passing. </p>
<p><strong class="text-light">Custom:</strong> Use the text input to change the color pairing.</p>
<h3>Check your hover text color vs. your body text color</h3>
<p>If <a title="Go to Webaim.org, link opens in a new window." target="_blank" href="http://webaim.org/techniques/hypertext/link_text#appearance">links are not underlined</a>, there must be 3:1 contrast between link text and body text and also an additional change (e.g., underlining) on mouse hover and keyboard focus. Use the tool to compare your link color against your body text color to see how they pair in the Most Legible column.</p>
</div>
</div>
</article>
</main>
<!-- <footer class="l__foot u__space__vertical p__footer">
<div class="l__max--text u__space__outer">
<details class="rhythm">
<summary><h2>What is this?</h2></summary>
<p>ColorCube is an accessibility (<abbr title="">a11y</abbr>) tool aimed at designers and developers. From a list of colors, we produce performance information with common color combinations. And then we give you the tools to adjust those colors until they pass the recommended color contrast ratios.</p>
<p><strong class="text-light">Why?</strong> At Oomph we believe a better web is an accessible web for all. We wanted a tool that could be used before a project starts &mdash; one that helps assess how an existing brand color palette performs. Starting early means that we can make adjustments early to avoid non-accessible color combinations later. </p>
<p>Corporate brand color palettes often do not take accessibility into account. And their colors are hard to change. By changing the saturation or brightness of a color <em>but not the hue</em> the color intention is preserved. Most users may not even notice that the color has been adjusted for readability.</p>
</details>
<div class="rhythm legal">
<a class="p__footer__logo" href="//oomphinc.com" title="Visit the Oomph website">
<img src="assets/img/oomph-square.png" width="90" alt="Oomph, Inc" />
</a>
<p><small>Made with <span aria-title="love">&#10084</span> in 2017 at Oomph, Inc. Last update October, 2019. Open source project with MIT license. <a title="Go to GitHub in a new window." target="_blank" href="https://github.com/oomphinc/colorcube">Contribute to the GitHub repo</a>.</small></p>
<p><small><strong class="text-uppercase">Disclaimer:</strong> The algorithm used in this tool and subsequent results are based on the luminosity algorithm recommended in the WCAG 2.0 guidelines to test for contrast. This tool is for general assessment purposes only and not a guarantee of compliance. This open-source visual tool is not optimized for screen readers. </small></p>
</div>
</div>
</footer> -->
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script type="text/javascript" src="assets/js/tinycolor.js"></script>
<script type="text/javascript" src="assets/js/colorcube.js" ></script>
<script>
(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','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-43388256-3', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment