mirror
/
wagtail
kopia lustrzana https://github.com/wagtail/wagtail
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

make accessible colors its own section, add large font size combos

pull/4631/merge
Catherine Farman 2018-06-16 14:35:20 -04:00 zatwierdzone przez Matt Westcott
rodzic 37ca88bf51
commit 5836dfa6ab
2 zmienionych plików z 136 dodań i 13 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

8
wagtail/contrib/styleguide/static_src/wagtailstyleguide/scss/styleguide.scss
Wyświetl plik

@ -64,6 +64,14 @@ section {
color: $color-red;
}
.color-green-text {
color: $color-green;
}
.color-teal-darker-text {
color: $color-teal-darker;
}
.color-teal-dark-text {
color: $color-teal-dark;
}

141
wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html
Wyświetl plik

@ -20,7 +20,8 @@
<h2>Contents</h2>
<nav>
<ul class="unlist">
<li><a href="#palette">Colour palette</a></li>
<li><a href="#palette">Color palette</a></li>
<li><a href="#accessiblecolors">Accessible color combinations</a></li>
<li><a href="#typography">Typography</a></li>
<li><a href="#help">Help text</a></li>
<li><a href="#listings">Listings</a></li>
@ -65,15 +66,16 @@
<li class="color-green">color-green</li>
<li class="color-blue">color-blue</li>
</ul>
</section>
<h3>Accessible color combinations</h3>
<p>WCAG (Web Content Accessibility Guidelines) ensures that content is accessible by everyone, regardless of any disability or user device.</p>
<section class="palette" id="accessiblecolors">
<p>To ensure text remains compliant with WCAG 2.0 AA standards, use only these permitted color combinations.</p>
<h2>Accessible color combinations</h2>
<p>WCAG (Web Content Accessibility Guidelines) ensures that content is accessible by everyone, regardless of any disability or user device. To ensure text remains compliant with WCAG 2.0 AA standards, use only these permitted color combinations.</p>
<p>Use this <a href="https://accessibility.oit.ncsu.edu/tools/color-contrast/accessible-color-palette.php?colors=43b1b0,358c8b,246060,71b2d4,cd3238,e9b04d,189370,f37e77,fcf2f2,ffffff,000000,333333,404040,666666,d9d9d9,e6e6e6,fafafa,cacaca&level=AA">Color Palette Accessibility Checker</a> to test new color combinations using the existing color palette.</p>
<h4>Small text combinations: for font sizes 16px or smaller
<h3>Small text combinations: for font sizes 16px or smaller</h3>
<ul class="contrast">
<li class="color-teal"><span class="color-black-text">color-black on color-teal</span></li>
<li class="color-teal"><span class="color-grey-1-text">color-grey-1 on color-teal</span></li>
@ -151,17 +153,130 @@
<li class="color-blue"><span class="color-grey-1-text">color-grey-1 on color-blue</span></li>
</ul>
<!-- <ul class="contrast">
<li class="color-teal-dark"><span class="color-something-text">color-something on color-teal-dark</span></li>
<li class="color-teal"><span class="color-something-text">color-something on color-teal</span></li>
</ul>
<h4>Large text combinations: for font sizes 18px or larger</h4>
<br>
<br>
<h3>Large text combinations: for font sizes 18px or larger</h3>
<ul class="contrast contrast-large">
<li class="color-teal"><span class="color-black-text">color-black on color-teal</span></li>
<li class="color-teal"><span class="color-grey-1-text">color-grey-1 on color-teal</span></li>
</ul> -->
<li class="color-teal"><span class="color-grey-1-1-text">color-grey-1-1 on color-teal</span></li>
<li class="color-teal-darker"><span class="color-salmon-light-text">color-salmon-light on color-teal-darker</span></li>
<li class="color-teal-darker"><span class="color-white-text">color-white on color-teal-darker</span></li>
<li class="color-teal-darker"><span class="color-black-text">color-black on color-teal-darker</span></li>
<li class="color-teal-darker"><span class="color-grey-1-text">color-grey-1 on color-teal-darker</span></li>
<li class="color-teal-darker"><span class="color-grey-4-text">color-grey-4 on color-teal-darker</span></li>
<li class="color-teal-darker"><span class="color-grey-5-text">color-grey-5 on color-teal-darker</span></li>
<li class="color-teal-dark"><span class="color-white-text">color-white on color-teal-dark</span></li>
<li class="color-teal-dark"><span class="color-salmon-light-text">color-salmon-light on color-teal-dark</span></li>
<li class="color-teal-dark"><span class="color-grey-3-text">color-grey-3 on color-teal-dark</span></li>
<li class="color-teal-dark"><span class="color-grey-4-text">color-grey-4 on color-teal-dark</span></li>
<li class="color-teal-dark"><span class="color-grey-5-text">color-grey-5 on color-teal-dark</span></li>
</ul>
<ul class="contrast contrast-large">
<li class="color-salmon"><span class="color-black-text">color-black on color-salmon</span></li>
<li class="color-salmon"><span class="color-grey-1-text">color-grey-1 on color-salmon</span></li>
<li class="color-salmon"><span class="color-grey-1-1-text">color-grey-1-1 on color-salmon</span></li>
<li class="color-salmon-light"><span class="color-teal-darker-text">color-teal-darker on color-salmon-light</span></li>
<li class="color-salmon-light"><span class="color-teal-dark-text">color-teal-dark on color-salmon-light</span></li>
<li class="color-salmon-light"><span class="color-red-text">color-red on color-salmon-light</span></li>
<li class="color-salmon-light"><span class="color-green-text">color-green on color-salmon-light</span></li>
<li class="color-salmon-light"><span class="color-black-text">color-black on color-salmon-light</span></li>
<li class="color-salmon-light"><span class="color-grey-1-text">color-grey-1 on color-salmon-light</span></li>
<li class="color-salmon-light"><span class="color-grey-1-1-text">color-grey-1-1 on color-salmon-light</span></li>
<li class="color-salmon-light"><span class="color-grey-2-text">color-grey-2 on color-salmon-light</span></li>
</ul>
<ul class="contrast contrast-large">
<li class="color-grey-1"><span class="color-teal-text">color-teal on color-grey-1</span></li>
<li class="color-grey-1"><span class="color-teal-darker-text">color-teal-darker on color-grey-1</span></li>
<li class="color-grey-1"><span class="color-blue-text">color-blue on color-grey-1</span></li>
<li class="color-grey-1"><span class="color-green-text">color-green on color-grey-1</span></li>
<li class="color-grey-1"><span class="color-orange-text">color-orange on color-grey-1</span></li>
<li class="color-grey-1"><span class="color-salmon-text">color-salmon on color-grey-1</span></li>
<li class="color-grey-1"><span class="color-salmon-light-text">color-salmon-light on color-grey-1</span></li>
<li class="color-grey-1"><span class="color-white-text">color-white on color-grey-1</span></li>
<li class="color-grey-1"><span class="color-grey-3-text">color-grey-3 on color-grey-1</span></li>
<li class="color-grey-1"><span class="color-grey-4-text">color-grey-4 on color-grey-1</span></li>
<li class="color-grey-1"><span class="color-grey-5-text">color-grey-5 on color-grey-1</span></li>
<li class="color-grey-1"><span class="color-menu-text">color-menu-text on color-grey-1</span></li>
</ul>
<ul class="contrast contrast-large">
<li class="color-grey-1-1"><span class="color-teal-text">color-teal on color-grey-1-1</span></li>
<li class="color-grey-1-1"><span class="color-blue-text">color-blue on color-grey-1-1</span></li>
<li class="color-grey-1-1"><span class="color-orange-text">color-orange on color-grey-1-1</span></li>
<li class="color-grey-1-1"><span class="color-salmon-text">color-salmon on color-grey-1-1</span></li>
<li class="color-grey-1-1"><span class="color-salmon-light-text">color-salmon-light on color-grey-1-1</span></li>
<li class="color-grey-1-1"><span class="color-white-text">color-white on color-grey-1-1</span></li>
<li class="color-grey-1-1"><span class="color-grey-3-text">color-grey-3 on color-grey-1-1</span></li>
<li class="color-grey-1-1"><span class="color-grey-4-text">color-grey-4 on color-grey-1-1</span></li>
<li class="color-grey-1-1"><span class="color-grey-5-text">color-grey-5 on color-grey-1-1</span></li>
<li class="color-grey-1-1"><span class="color-menu-text">color-menu-text on color-grey-1-1</span></li>
</ul>
<ul class="contrast contrast-large">
<li class="color-grey-2"><span class="color-salmon-light-text">color-salmon on color-grey-2</span></li>
<li class="color-grey-2"><span class="color-white-text">color-white on color-grey-2</span></li>
<li class="color-grey-2"><span class="color-grey-3-text">color-grey-3 on color-grey-2</span></li>
<li class="color-grey-2"><span class="color-grey-4-text">color-grey-4 on color-grey-2</span></li>
<li class="color-grey-2"><span class="color-grey-5-text">color-grey-5 on color-grey-2</span></li>
<li class="color-grey-2"><span class="color-menu-text">color-menu-text on color-grey-2</span></li>
</ul>
<ul class="contrast contrast-large">
<li class="color-grey-3"><span class="color-teal-dark-text">color-teal-dark on color-grey-3</span></li>
<li class="color-grey-3"><span class="color-red-text">color-red on color-grey-3</span></li>
<li class="color-grey-3"><span class="color-black-text">color-black on color-grey-3</span></li>
<li class="color-grey-3"><span class="color-grey-1-text">color-grey-1 on color-grey-3</span></li>
<li class="color-grey-3"><span class="color-grey-1-1-text">color-grey-1-1 on color-grey-3</span></li>
<li class="color-grey-3"><span class="color-grey-2-text">color-grey-2 on color-grey-3</span></li>
</ul>
<ul class="contrast contrast-large">
<li class="color-grey-4"><span class="color-teal-darker-text">color-teal-darker on color-grey-4</span></li>
<li class="color-grey-4"><span class="color-teal-dark-text">color-teal-dark on color-grey-4</span></li>
<li class="color-grey-4"><span class="color-red-text">color-red on color-grey-4</span></li>
<li class="color-grey-4"><span class="color-green-text">color-green on color-grey-4</span></li>
<li class="color-grey-4"><span class="color-black-text">color-black on color-grey-4</span></li>
<li class="color-grey-4"><span class="color-grey-1-text">color-grey-1 on color-grey-4</span></li>
<li class="color-grey-4"><span class="color-grey-1-1-text">color-grey-1-1 on color-grey-4</span></li>
<li class="color-grey-4"><span class="color-grey-2-text">color-grey-2 on color-grey-4</span></li>
</ul>
<ul class="contrast contrast-large">
<li class="color-grey-5"><span class="color-teal-darker-text">color-teal-darker on color-grey-5</span></li>
<li class="color-grey-5"><span class="color-teal-dark-text">color-teal-dark on color-grey-5</span></li>
<li class="color-grey-5"><span class="color-red-text">color-red on color-grey-5</span></li>
<li class="color-grey-5"><span class="color-green-text">color-green on color-grey-5</span></li>
<li class="color-grey-5"><span class="color-black-text">color-black on color-grey-5</span></li>
<li class="color-grey-5"><span class="color-grey-1-text">color-grey-1 on color-grey-5</span></li>
<li class="color-grey-5"><span class="color-grey-1-1-text">color-grey-1-1 on color-grey-5</span></li>
<li class="color-grey-5"><span class="color-grey-2-text">color-grey-2 on color-grey-5</span></li>
</ul>
<ul class="contrast contrast-large">
<li class="color-red"><span class="color-salmon-light-text">color-salmon-light on color-red</span></li>
<li class="color-red"><span class="color-white-text">color-white on color-red</span></li>
<li class="color-red"><span class="color-black-text">color-black on color-red</span></li>
<li class="color-red"><span class="color-grey-3-text">color-grey-3 on color-red</span></li>
<li class="color-red"><span class="color-grey-4-text">color-grey-4 on color-red</span></li>
<li class="color-red"><span class="color-grey-5-text">color-grey-5 on color-red</span></li>
<li class="color-red"><span class="color-menu-text">color-menu-text on color-red</span></li>
</ul>
<ul class="contrast contrast-large">
<li class="color-orange"><span class="color-teal-dark-text">color-teal-dark on color-orange</span></li>
<li class="color-orange"><span class="color-black-text">color-black on color-orange</span></li>
<li class="color-orange"><span class="color-grey-1-text">color-grey-1 on color-orange</span></li>
<li class="color-orange"><span class="color-grey-1-1-text">color-grey-1-1 on color-orange</span></li>
</ul>
<ul class="contrast contrast-large">
<li class="color-green"><span class="color-white-text">color-white on color-green</span></li>
<li class="color-green"><span class="color-salmon-light-text">color-salmon-light on color-green</span></li>
<li class="color-green"><span class="color-black-text">color-black on color-green</span></li>
<li class="color-green"><span class="color-grey-1-text">color-grey-1 on color-green</span></li>
<li class="color-green"><span class="color-grey-4-text">color-grey-4 on color-green</span></li>
<li class="color-green"><span class="color-grey-5-text">color-grey-5 on color-green</span></li>
</ul>
<ul class="contrast contrast-large">
<li class="color-blue"><span class="color-teal-dark-text">color-teal-dark on color-blue</span></li>
<li class="color-blue"><span class="color-black-text">color-black on color-blue</span></li>
<li class="color-blue"><span class="color-grey-1-text">color-grey-1 on color-blue</span></li>
<li class="color-blue"><span class="color-grey-1-1-text">color-grey-1-1 on color-blue</span></li>
</ul>
</section>