Skip to content

Commit

Permalink
Merge pull request #45 from MaddyDaigle/master
Browse files Browse the repository at this point in the history 
Added one folder under demos for Jeff Gordon
  • Loading branch information
Paul Jackson authored and Paul Jackson committed Jun 11, 2012
2 parents 20fc2fd + 249b7f2 commit 25d83ff
Show file tree
Hide file tree
Showing 34 changed files with 6,341 additions and 0 deletions.
395 changes: 395 additions & 0 deletions demos/opt-cont/app-eng.html
View file

Large diffs are not rendered by default.

327 changes: 327 additions & 0 deletions demos/opt-cont/clr-eng.html
View file
@@ -0,0 +1,327 @@
<!DOCTYPE html>
<!--[if IE 7]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW)
www.tbs.gc.ca/ws-nw/wet-boew/terms / www.sct.gc.ca/ws-nw/wet-boew/conditions -->
<title>Colour</title>

<link rel="shortcut icon" href="../../build/theme-gcwu-fegc/images/favicon.ico" />

<meta name="dcterms.description" content="English description/Description en anglais" />
<meta name="description" content="English description/Description en anglais" />
<meta name="keywords" content="English keywords/Mots-clés en anglais" />
<meta name="dcterms.creator" content="English name of the content author/Nom en anglais de l'auteur du contenu" />
<meta name="dcterms.title" content="Colour" />
<meta name="dcterms.issued" title="W3CDTF" content="2011-10-31" />
<meta name="dcterms.modified" title="W3CDTF" content="2011-10-31" />
<meta name="dcterms.subject" title="scheme" content="English subject terms/Termes de sujet en anglais" />
<meta name="dcterms.language" title="ISO639-2" content="eng" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<script src="../../build/js/jquery.min.js"></script>
<link rel="stylesheet" href="../../build/grids/css/util-min.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="../../build/js/css/pe-ap-ie-min.css" />
<link rel="stylesheet" href="../../build/theme-gcwu-fegc/css/theme-ie-min.css" />
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="../../build/js/css/pe-ap-min.css" />
<link rel="stylesheet" href="../../build/theme-gcwu-fegc/css/theme-min.css" />
<!--<![endif]-->

<!-- CustomScriptsCSSStart -->
<!-- CustomScriptsCSSEnd -->
</head>

<body><div id="wb-body-sec">
<div id="wb-skip">
<ul id="wb-tphp">
<li id="wb-skip1"><a href="#wb-cont">Skip to main content</a></li>
<li id="wb-skip2"><a href="#wb-nav">Skip to footer</a></li>
</ul>
</div>

<div id="wb-head"><div id="wb-head-in"><header>
<!-- HeaderStart -->
<nav role="navigation"><div id="gcwu-gcnb"><h2>Government of Canada navigation bar</h2><div id="gcwu-gcnb-in"><div id="gcwu-gcnb-fip">
<div id="gcwu-sig"><div id="gcwu-sig-in"><div id="gcwu-sig-eng" title="Government of Canada"><img src="../../build/theme-gcwu-fegc/images/sig-eng.gif" width="214" height="20" alt="Government of Canada" /></div></div></div>
<ul>
<li id="gcwu-gcnb1"><a rel="external" href="http://www.canada.gc.ca/home.html">Canada.gc.ca</a></li>
<li id="gcwu-gcnb2"><a rel="external" href="http://www.servicecanada.gc.ca/eng/home.shtml">Services</a></li>
<li id="gcwu-gcnb3"><a rel="external" href="http://www.canada.gc.ca/depts/major/depind-eng.html">Departments</a></li>
<li id="gcwu-gcnb-lang"><a href="2col-megamenu-theme-gcwu-fegc-fra.html" lang="fr">Français</a></li>
</ul>
</div></div></div></nav>

<div id="gcwu-bnr" role="banner"><div id="gcwu-bnr-in">
<div id="gcwu-wmms"><div id="gcwu-wmms-in"><div id="gcwu-wmms-fip" title="Symbol of the Government of Canada"><img src="../../build/theme-gcwu-fegc/images/wmms.gif" width="126" height="30" alt="Symbol of the Government of Canada" /></div></div></div>
<div id="gcwu-title"><p id="gcwu-title-in"><a href="home-accueil-megamenu-theme-gcwu-fegc-eng.html">Site title</a></p></div>

<section role="search"><div id="gcwu-srchbx"><h2>Search</h2>
<form action="#" method="post"><div id="gcwu-srchbx-in">
<label for="gcwu-srch">Search website</label><input id="gcwu-srch" name="gcwu-srch" type="text" value="" size="27" maxlength="150" />
<input id="gcwu-srch-submit" name="gcwu-srch-submit" type="submit" value="Search" data-icon="search" />
</div></form>
</div></section>
</div></div>

<nav role="navigation">
<div id="gcwu-psnb"><h2><span>Site</span> menu</h2><div id="gcwu-psnb-in"><div class="wet-boew-menubar mb-mega"><div>
<ul class="mb-menu" data-ajax-replace="../includes/menu-eng.html">
<li><section><h3><a href="#">Section 1</a></h3></section></li>
<li><section><h3><a href="section2-eng.html">Section 2</a></h3></section></li>
<li><section><h3><a href="#">Section 3</a></h3></section></li>
<li><section><h3><a href="#">Section 4</a></h3></section></li>
<li><div><a href="#">Section 5</a></div></li>
<li><section><h3><a href="#">Section 6</a></h3></section></li>
<li><section><h3><a href="#">Section 7</a></h3></section></li>
</ul>
</div></div></div></div>

<div id="gcwu-bc"><h2>Breadcrumb trail</h2><div id="gcwu-bc-in">

<ol>
<li><a href="/theme-gcwu-fegc/opt-cont/index-eng.html">Optimal Content Examples</a></li>
<li>Colour</li>
</ol>
</div></div>

</nav>

<!-- HeaderEnd -->
</header></div></div>

<div id="wb-core"><div id="wb-core-in" class="equalize">
<div id="wb-main" role="main"><div id="wb-main-in">
<!-- MainContentStart -->

<h1 id="cn-cont">Colour</h1>


<div class="span-4 module-table-contents">
<p>Table Of Contents</p>
<ul>
<li><a href="#intro">Introduction</a></li>
<li><a href="#req">Coding Requirements</a></li>
<li><a href="#con">Web Accessibility Considerations</a></li>
<li><a href="#links">Related Links</a></li>
</ul>
</div>
<div class="clear"></div>

<div class="wet-boew-expandhide">

<h2 class="margin-top-none"><a id="intro"></a>Introduction</h2>

<p>Colour is a presentation element on a web page used either for decorative purposes or to convey information.</p>


<h2><a id="req"></a>Coding Requirements</h2>
<p>The following summarizes selected techniques from the <a href="http://www.w3.org/TR/WCAG20/">Web Content Accessibility Guidelines (WCAG) 2.0</a> for satisfying the most common applicable success criteria related to this topic. Additional WCAG 2.0 success criteria, techniques, and failures not listed here may also be applicable depending on the content.</p>

<h3 id="ct">1. Contrast</h3>
<div class="span-2 border-span-2 float-right align-right"> <div class="background-light"><p><em><strong>Related to Success Criteria:</strong></em></p></div>
<ul>
<li><em><a href="http://www.w3.org/TR/2012/NOTE-UNDERSTANDING-WCAG20-20120103/visual-audio-contrast-contrast.html">1.4.3 Contrast (Minimum)</a></em></li>
</ul>
</div>

<p>Foreground text must have sufficient colour contrast from the background. The amount of contrast required is based on the size and weight of the text. Text size is measured in <a href="#pts">points</a> (instead of pixels).</p>
<ul>
<li><p><strong>Large Size Text</strong> requires <strong>4.5:1</strong> colour contrast ratio and is defined as:</p>
<ul>
<li><p>Regular Text which is 18 points or greater.</p></li>
<li><p>Bold Text which is 14 points or greater.</p></li>
</ul>
</li>
<li><p><strong>Small Size Text</strong> requires <strong>3:1</strong> colour contrast ratio and is defined as:</p>
<ul>
<li><p>Regular Text which is less than 18 points.</p></li>
<li><p>Bold Text which is less than 14 points.</p></li>
</ul>
</li>
</ul>
<p>Colour contrast can be measured by using free software tools listed in the <a href="#links">related links</a>.</p>
<p><em>Source: <a href="http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/G18" class="external">WCAG 2.0, Technique G18</a> and <a href="http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/G145" class="external">WCAG 2.0, Technique G145</a></em></p>

<div class="span-6 module-note">
<p><a id="pts"></a>A point of text is a fixed unit of measurement equivalent to 1/72 of an inch. Points are used for colour contrast because pixels are a variable unit of measurement that changes according to a user's screen resolution.</p>
</div>

<h3 id="us">2. Use Of Colour</h3>
<div class="span-2 border-span-2 float-right align-right"> <div class="background-light"><p><em><strong>Related to Success Criteria:</strong></em></p></div>
<ul>
<li><em><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html">1.4.1 Use Of Color</a></em></li>
</ul>
</div>

<p>When colour is used to convey information, an alternate visual cue or text description is required.</p>
<p>The following are common situations where colour conveys information:</p>
<div class="clear"></div>
<table>
<tr>
<th>Element</th>
<th>Potential Issue</th>
<th>Correction</th>
</tr>
<tr>
<td>Charts and Graphs</td>
<td>Multiple series or values identified by colour.</td>
<td>Use pattern shading, provide a supplementary data table, or use text labels on the chart or graph.</td>
</tr>
<tr>
<td>Forms and User Controls</td>
<td>Required fields identified by colour.</td>
<td>Provide a supplementary indicator, such as an asterisk (*) on required fields. Explain the meaning of the indicator prior to its usage on the page.</td>
</tr>
<tr>
<td>Links</td>
<td>Links identified from regular text by colour.</td>
<td>Underline <em>(preferred)</em>, italicize, or bold the link.</td>
</tr>
</table>

<h2><a id="con"></a>Web Accessibility Considerations</h2>
<h3>Visual Impairments</h3>
<ul>
<li><p>Ensure there is sufficient contrast between textual elements, and background colours or images.</p></li>
<li><p>Ensure users can see the page even if they have colour deficits, or view it on a black and white screen. If the colour contrast for any colour combination is not significant enough, users with colour deficiencies will have problems seeing the content. It is helpful to determine compliance by using the <a href="http://www.vischeck.com/vischeck/vischeckURL.php">Vischeck color vision simulator tool (external link)</a> to simulate what the page looks like for users with certain colour deficiencies.</p>
<ul>
<li><p>Individuals classified as totally (uncommon) or partially colour deficit (more common) can have colour vision deficiencies that are either acquired or inherited.</p></li>
<li><p>The difficulty in distinguishing colours is usually between red and green, or between blue and yellow.</p></li>
</ul>
</li>
</ul>

<h3><a id="links"></a>Related Links</h3>
<ul>
<li><p>Web Content Accessibility Guidelines (WCAG) 2.0 Success Criteria</p>
<ul>
<li><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html">1.4.1 Use of Colour</a></li>
<li><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">1.4.3 Contrast (Minimum)</a></li>
</ul>
</li>
<li><p>Web Content Accessibility Guidelines (WCAG) 2.0 Sufficient Techniques</p>
<ul>
<li><a href="http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/G18">G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text.</a></li>
<li><a href="http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/G145">G145: Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) and background behind the text.</a></li>
</ul>
</li>
<li><p>Tools and Utilities</p>
<ul>
<li><a href="http://www.paciellogroup.com/resources/contrast-analyser.html">Contrast Analyser for Windows and Mac</a></li>
<li><a href="http://juicystudio.com/services/luminositycontrastratio.php">Juicy Studios Luminosity Analyzer</a> </li>
<li><a href="http://www.vischeck.com/vischeck/vischeckURL.php">Vischeck Color Vision Simulator Tool</a> </li>
</ul>
</li>
</ul>


</div>


<!-- Date Modified begins / Début de la date de modification -->
<dl id="gcwu-date-mod" role="contentinfo">
<dt>Date modified:</dt><dd><span><time>2011-10-31</time></span></dd>
</dl>
<div class="clear"></div>
<!-- Date Modified ends / Fin de la date de modification -->

<!-- MainContentEnd -->
</div></div>

<div id="wb-sec"><div id="wb-sec-in"><nav role="navigation"><h2 id="wb-nav">Secondary menu</h2>
<div class="wb-sec-def">
<!-- SideNavLeftStart -->
<h3><a href="index-eng.html">Optimal Content Examples</a></h3>
<ul>
<li><p>Content Types</p>
<ul>
<li><a href="smm-eng.html">Summary Of Coding Requirements</a></li>
<li><a href="clr-eng.html">Colour</a></li>
<li><a href="frm-eng.html">Forms</a></li>
<li><a href="hdg-eng.html">Headings and Titles</a></li>
<li><a href="img-eng.html">Images</a></li>
<li><a href="kb-cv-eng.html">Keyboard and User Controls</a></li>
<li><a href="lin-eng.html">Links</a></li>
<li><a href="qlg-eng.html">Quotations and Language</a></li>
<li><a href="tbl-eng.html">Tables</a></li>
</ul>
</li>
<li><p><a href="wcag-eng.html">Web Content Accessibility Guidelines (WCAG) 2.0</a></p>
<ul>
<li><a href="app-eng.html">Success Criteria Applicability</a></li>
</ul>
</li>
<li><a href="dk-sv-eng.html">Did You Know?</a></li>
</ul>
<!-- SideNavLeftEnd -->
</div>
</nav></div></div>
</div></div>

<div id="wb-foot"><div id="wb-foot-in"><footer><h2>Footer</h2>
<!-- FooterStart -->
<nav role="navigation"><div id="gcwu-sft"><h3>Site footer</h3><div id="gcwu-sft-in">
<div id="gcwu-tctr">
<ul>
<li class="gcwu-tc"><a href="#" rel="license">Terms and conditions</a></li>
<li class="gcwu-tr"><a href="#">Transparency</a></li>
</ul>
</div>
<div class="clear"></div>
<section><div class="span-2"><h4 class="gcwu-col-head"><a href="#">About us</a></h4>
<ul>
<li><a href="#">Our Mandate</a></li>
<li><a href="#">The Minister</a></li>
</ul>
</div></section>
<section><div class="span-2"><h4 class="gcwu-col-head"><a href="#">News</a></h4>
<ul>
<li><a href="#">News releases</a></li>
<li><a href="#">Media advisories</a></li>
<li><a href="#">Multimedia</a></li>
</ul>
</div></section>
<section><div class="span-2"><h4 class="gcwu-col-head"><a href="#">Contact us</a></h4>
<address>
<ul>
<li><a href="#">Phone numbers</a></li>
<li><a href="#">Office locations</a></li>
</ul>
</address>
</div></section>
<section><div class="span-2"><h4 class="gcwu-col-head"><a href="#">Stay connected</a></h4>
<ul>
<li><a rel="external" href="#">YouTube</a></li>
<li><a rel="external" href="#">Twitter</a></li>
<li><a href="#">Feeds</a></li>
</ul>
</div></section>
</div></div></nav>

<nav role="navigation"><div id="gcwu-gcft"><h3>Government of Canada footer</h3><div id="gcwu-gcft-in"><div id="gcwu-gcft-fip">
<ul>
<li><a rel="external" href="http://healthycanadians.gc.ca/index-eng.php"><span>Health</span><br />healthycanadians.gc.ca</a></li>
<li><a rel="external" href="http://www.voyage.gc.ca/index-eng.asp"><span>Travel</span><br />travel.gc.ca</a></li>
<li><a rel="external" href="http://www.servicecanada.gc.ca/eng/home.shtml"><span>Service Canada</span><br />servicecanada.gc.ca</a></li>
<li><a rel="external" href="http://www.jobbank.gc.ca/intro-eng.aspx"><span>Jobs</span><br />jobbank.gc.ca</a></li>
<li><a rel="external" href="http://actionplan.gc.ca/eng/index.asp"><span>Economy</span><br />actionplan.gc.ca</a></li>
<li id="gcwu-gcft-ca"><div><a rel="external" href="http://www.canada.gc.ca/home.html">Canada.gc.ca</a></div></li>
</ul>
</div></div></div></nav>
<!-- FooterEnd -->
</footer>
</div></div></div>

<!-- ScriptsStart -->
<script src="../../build/js/settings.js"></script>
<script src="../../build/js/pe-ap-min.js" id="progressive"></script>
<!-- ScriptsEnd -->
</body>
</html>

0 comments on commit 25d83ff

Please sign in to comment.