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

add remaining small text accessible color combos

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

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

@ -73,7 +73,7 @@
<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)
<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>
@ -102,9 +102,51 @@
<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-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-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">
<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-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>
</ul>
<ul class="contrast">
<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-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>
</ul>
<ul class="contrast">
<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-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">
<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-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">
<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-grey-5-text">color-grey-5 on color-red</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>
<li class="color-green"><span class="color-black-text">color-black on color-green</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>
</ul>