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

add initial small text accessible color contrast combinations

pull/4631/merge
Catherine Farman 2018-06-16 12:58:47 -04:00 zatwierdzone przez Matt Westcott
rodzic 48b5740d03
commit 29c82eb7f8
2 zmienionych plików z 136 dodań i 1 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

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

@ -32,6 +32,86 @@ section {
color: $color-black;
}
.contrast li {
height: 50px;
}
.contrast-large {
font-size: 18px;
li {
width: 150px;
height: 55px;
}
}
.color-black-text {
color: $color-black;
}
.color-grey-1-text {
color: $color-grey-1;
}
.color-white-text {
color: $color-white;
}
.color-salmon-light-text {
color: $color-salmon-light;
}
.color-red-text {
color: $color-red;
}
.color-teal-dark-text {
color: $color-teal-dark;
}
.color-grey-1-1-text {
color: $color-grey-1-1;
}
.color-grey-2-text {
color: $color-grey-2;
}
.color-red-text {
color: $color-red;
}
.color-teal-text {
color: $color-teal;
}
.color-orange-text {
color: $color-orange;
}
.color-blue-text {
color: $color-blue;
}
.color-salmon-text {
color: $color-salmon;
}
.color-grey-3-text {
color: $color-grey-3;
}
.color-grey-4-text {
color: $color-grey-4;
}
.color-grey-5-text {
color: $color-grey-5;
}
.color-menu-text {
color: $color-menu-text;
}
.color-teal {
background-color: $color-teal;
}

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

@ -40,7 +40,7 @@
</nav>
<section id="palette" class="palette">
<h2>Colour palette</h2>
<h2>Color palette</h2>
<ul>
<li class="color-teal">color-teal</li>
@ -66,6 +66,61 @@
<li class="color-blue">color-blue</li>
</ul>
<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>
<p>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)
<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>
<li class="color-teal-darker"><span class="color-black-text">color-black 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>
</ul>
<ul class="contrast">
<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-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-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">
<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-blue-text">color-blue 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">
<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>
</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>
<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> -->
</section>
<section id="typography">