Skins
Tachyons comes with a collection of classes for setting the color of text and the color of the background. Listed below are the a11y friendly combinations that are available.
%= head %>
<%= siteHeader %>Tachyons comes with a collection of classes for setting the color of text and the color of the background. Listed below are the a11y friendly combinations that are available.
<%= color %>
AA Large (contrast ≥ 3.0) <%= combos.length %>
AA (contrast ≥ 4.5) <%= combosAA.length %>
AAA (contrast ≥ 7.0) <%= combosAAA.length %>
In visual perception a color is almost never seen as it really is – as it physically is. This fact makes color the most relative medium in art. - Josef Albers
.black { color: <%= combo.pairing %> }
<% } %>
<% if (combo.pairing == "#111111") { %>
.near-black { color: <%= combo.pairing %> }
<% } %>
<% if (combo.pairing == "#333333") { %>
.dark-gray { color: <%= combo.pairing %> }
<% } %>
<% if (combo.pairing == "#555555") { %>
.mid-gray { color: <%= combo.pairing %> }
<% } %>
<% if (combo.pairing == "#777777") { %>
.gray { color: <%= combo.pairing %> }
<% } %>
<% if (combo.pairing == "#999999") { %>
.silver { color: <%= combo.pairing %> }
<% } %>
<% if (combo.pairing == "#AAAAAA") { %>
.light-silver { color: <%= combo.pairing %> }
<% } %>
<% if (combo.pairing == "#CCCCCC") { %>
.moon-gray { color: <%= combo.pairing %> }
<% } %>
<% if (combo.pairing == "#EEEEEE") { %>
.light-gray { color: <%= combo.pairing %> }
<% } %>
<% if (combo.pairing == "#F4F4F4") { %>
.near-white { color: <%= combo.pairing %> }
<% } %>
<% if (combo.pairing == "#FFFFFF") { %>
.white { color: <%= combo.pairing %> }
<% } %>
<% if (combo.pairing == "#E7040F") { %>
.dark-red { color: <%= combo.pairing %> }
<% } %>
<% if (combo.pairing == "#FF4136") { %>
.red { color: <%= combo.pairing %> }
<% } %>
<% if (combo.pairing == "#FF725C") { %>
.light-red { color: <%= combo.pairing %> }
<% } %>
<% if (combo.pairing == "#FF6300") { %>
.orange { color: <%= combo.pairing %> }
<% } %>
<% if (combo.pairing == "#FFB700") { %>
.gold { color: <%= combo.pairing %> }
<% } %>
<% if (combo.pairing == "#FFD700") { %>
.yellow { color: <%= combo.pairing %> }
<% } %>
<% if (combo.pairing == "#FBF1A9") { %>
.light-yellow { color: <%= combo.pairing %> }
<% } %>
<% if (combo.pairing == "#5E2CA5") { %>
.purple { color: <%= combo.pairing %> }
<% } %>
<% if (combo.pairing == "#A463F2") { %>
.light-purple { color: <%= combo.pairing %> }
<% } %>
<% if (combo.pairing == "#D5008F") { %>
.dark-pink { color: <%= combo.pairing %> }
<% } %>
<% if (combo.pairing == "#FF41B4") { %>
.hot-pink { color: <%= combo.pairing %> }
<% } %>
<% if (combo.pairing == "#FF80CC") { %>
.pink { color: <%= combo.pairing %> }
<% } %>
<% if (combo.pairing == "#FFA3D7") { %>
.light-pink { color: <%= combo.pairing %> }
<% } %>
<% if (combo.pairing == "#137752") { %>
.dark-green { color: <%= combo.pairing %> }
<% } %>
<% if (combo.pairing == "#19A974") { %>
.green { color: <%= combo.pairing %> }
<% } %>
<% if (combo.pairing == "#9EEBCF") { %>
.light-green { color: <%= combo.pairing %> }
<% } %>
<% if (combo.pairing == "#001B44") { %>
.navy { color: <%= combo.pairing %> }
<% } %>
<% if (combo.pairing == "#00449E") { %>
.dark-blue { color: <%= combo.pairing %> }
<% } %>
<% if (combo.pairing == "#357EDD") { %>
.blue { color: <%= combo.pairing %> }
<% } %>
<% if (combo.pairing == "#96CCFF") { %>
.light-blue { color: <%= combo.pairing %> }
<% } %>
<% if (combo.pairing == "#CDECFF") { %>
.lightest-blue { color: <%= combo.pairing %> }
<% } %>
<% if (combo.pairing == "#F6FFFE") { %>
.washed-blue { color: <%= combo.pairing %> }
<% } %>
<% if (combo.pairing == "#E8FDF5") { %>
.washed-green { color: <%= combo.pairing %> }
<% } %>
<% if (combo.pairing == "#FFFCEB") { %>
.washed-yellow { color: <%= combo.pairing %> }
<% } %>
<% if (combo.pairing == "#FFDFDF") { %>
.washed-red { color: <%= combo.pairing %> }
<% } %>
<% if (combo.hex == "#000000") { %>
.bg-black { background-color: <%= combo.hex %> }
<% } %>
<% if (combo.hex == "#111111") { %>
.bg-near-black { background-color: <%= combo.hex %> }
<% } %>
<% if (combo.hex == "#333333") { %>
.bg-dark-gray { background-color: <%= combo.hex %> }
<% } %>
<% if (combo.hex == "#555555") { %>
.bg-mid-gray { background-color: <%= combo.hex %> }
<% } %>
<% if (combo.hex == "#777777") { %>
.bg-gray { background-color: <%= combo.hex %> }
<% } %>
<% if (combo.hex == "#999999") { %>
.bg-silver { background-color: <%= combo.hex %> }
<% } %>
<% if (combo.hex == "#AAAAAA") { %>
.bg-light-silver { background-color: <%= combo.hex %> }
<% } %>
<% if (combo.hex == "#CCCCCC") { %>
.bg-moon-gray { background-color: <%= combo.hex %> }
<% } %>
<% if (combo.hex == "#EEEEEE") { %>
.bg-light-gray { background-color: <%= combo.hex %> }
<% } %>
<% if (combo.hex == "#F4F4F4") { %>
.bg-near-white { background-color: <%= combo.hex %> }
<% } %>
<% if (combo.hex == "#FFFFFF") { %>
.bg-white { background-color: <%= combo.hex %> }
<% } %>
<% if (combo.hex == "#E7040F") { %>
.bg-dark-red { background-color: <%= combo.hex %> }
<% } %>
<% if (combo.hex == "#FF4136") { %>
.bg-red { background-color: <%= combo.hex %> }
<% } %>
<% if (combo.hex == "#FF725C") { %>
.bg-light-red { background-color: <%= combo.hex %> }
<% } %>
<% if (combo.hex == "#FF6300") { %>
.bg-orange { background-color: <%= combo.hex %> }
<% } %>
<% if (combo.hex == "#FFB700") { %>
.bg-gold { background-color: <%= combo.hex %> }
<% } %>
<% if (combo.hex == "#FFD700") { %>
.bg-yellow { background-color: <%= combo.hex %> }
<% } %>
<% if (combo.hex == "#FBF1A9") { %>
.bg-light-yellow { background-color: <%= combo.hex %> }
<% } %>
<% if (combo.hex == "#5E2CA5") { %>
.bg-purple { background-color: <%= combo.hex %> }
<% } %>
<% if (combo.hex == "#A463F2") { %>
.bg-light-purple { background-color: <%= combo.hex %> }
<% } %>
<% if (combo.hex == "#D5008F") { %>
.bg-dark-pink { background-color: <%= combo.hex %> }
<% } %>
<% if (combo.hex == "#FF41B4") { %>
.bg-hot-pink { background-color: <%= combo.hex %> }
<% } %>
<% if (combo.hex == "#FF80CC") { %>
.bg-pink { background-color: <%= combo.hex %> }
<% } %>
<% if (combo.hex == "#FFA3D7") { %>
.bg-light-pink { background-color: <%= combo.hex %> }
<% } %>
<% if (combo.hex == "#137752") { %>
.bg-dark-green { background-color: <%= combo.hex %> }
<% } %>
<% if (combo.hex == "#19A974") { %>
.bg-green { background-color: <%= combo.hex %> }
<% } %>
<% if (combo.hex == "#9EEBCF") { %>
.bg-light-green { background-color: <%= combo.hex %> }
<% } %>
<% if (combo.hex == "#001B44") { %>
.bg-navy { background-color: <%= combo.hex %> }
<% } %>
<% if (combo.hex == "#00449E") { %>
.bg-dark-blue { background-color: <%= combo.hex %> }
<% } %>
<% if (combo.hex == "#357EDD") { %>
.bg-blue { background-color: <%= combo.hex %> }
<% } %>
<% if (combo.hex == "#96CCFF") { %>
.bg-light-blue { background-color: <%= combo.hex %> }
<% } %>
<% if (combo.hex == "#CDECFF") { %>
.bg-lightest-blue { background-color: <%= combo.hex %> }
<% } %>
<% if (combo.hex == "#F6FFFE") { %>
.bg-washed-blue { background-color: <%= combo.hex %> }
<% } %>
<% if (combo.hex == "#E8FDF5") { %>
.bg-washed-green { background-color: <%= combo.hex %> }
<% } %>
<% if (combo.hex == "#FFFCEB") { %>
.bg-washed-yellow { background-color: <%= combo.hex %> }
<% } %>
<% if (combo.hex == "#FFDFDF") { %>
.bg-washed-red { background-color: <%= combo.hex %> }
<% } %>
<%= srccss %>