Editing User:Sylphoid/Sandbox (section)

== Color ==
Make sure the colors you pick abide by web accessibility rules! Check your colors with
: https://webaim.org/resources/contrastchecker/
Understand accessibility with
: https://en.wikipedia.org/wiki/Web_accessibility
(table below is not official, nor wiki standard, it is just my using pipette picker that i think works well for web design and probably needs to be discussed in the future)
{| class = wikitable
! Represent !! Hex code !! Block !! As text !! Pass light? !! Pass dark?
|-
| Weapon || #d5903f || <div style=background-color:#d5903f;>Weapon</div> || <span style=color:#d5903f;>Weapon</span> || ||
|-
| Vitality || #74b01c || <div style=background-color:#74b01c;>Vitality</div> || <span style=color:#74b01c;>Vitality</span> || ||
|-
| Spirit || #c288f0 || <div style=background-color:#c288f0;>Spirit</div> || <span style=color:#c288f0;>Spirit</span> || ||
|-
| Souls || #98ffde || <div style=background-color:#98ffde;>Souls</div> || <span style=color:#98ffde;>Souls</span> || ||
|-
| Healing || #00FF9A || <div style=background-color:#00FF9A;>Healing</div> || <span style=color:#00FF9A;>Healing</span> || ||
|-
| Abrams underline || rgb(33, 147, 174) || <div style="background-color:rgb(33 147 174);">Abrams</div> || <span style="color:rgb(33 147 174);">Abrams</span> || ||
|-
| Abrams underline || #2193AE || <div style=background-color:#2193AE;>Abrams</div> || <span style=color:#2193AE;>Abrams</span> || ||
|-
| Wraith underline || #954E7A || <div style=background-color:#954E7A;>Wraith underline</div> || <span style=color:#954E7A;>Wraith underline</span> || ||
|-
| Viscous underline || #8AC365 || <div style=background-color:#8AC365;>Viscous underline</div> || <span style=color:#8AC365;>Viscous underline</span> || ||
|-
| Grey Talon underline || #61B083 || <div style=background-color:#61B083;>Grey Talon underline</div> || <span style=color:#61B083;>Grey Talon underline</span> || ||
|-
| Vindicta underline || #87A8B8 || <div style=background-color:#87A8B8;>Vindicta underline</div> || <span style=color:#87A8B8;>Vindicta underline</span> || ||
|-
| Vindicta underline || #9DCDEC || <div style=background-color:#9DCDEC;>Vindicta underline</div> || <span style=color:#9DCDEC;>Vindicta underline</span> || ||
|-
| Infernus underline || #FD472F || <div style=background-color:#FD472F;>Infernus underline</div> || <span style=color:#FD472F;>Infernus underline</span> || ||
|-
| Infernus underline || #FF472E || <div style=background-color:#FF472E;>Infernus underline</div> || <span style=color:#FF472E;>Infernus underline</span> || ||
|-
| McGinnis underline || #466A9C || <div style=background-color:#466A9C;>McGinnis underline</div> || <span style=color:#466A9C;>McGinnis underline</span> || ||
|-
| Haze underline || #AE6231 || <div style=background-color:#AE6231;>Haze underline</div> || <span style=color:#AE6231;>Haze underline</span> || ||
|-
| Lady Geist underline || #088A5C || <div style=background-color:#088A5C;>Lady Geist underline</div> || <span style=color:#088A5C;>Lady Geist underline</span> || ||
|-
| Mirage underline || #87683C || <div style=background-color:#87683C;>Mirage underline</div> || <span style=color:#87683C;>Mirage underline</span> || ||
|-
| Lash underline || #444C57 || <div style=background-color:#444C57;>Lash underline</div> || <span style=color:#444C57;>Lash underline</span> || ||
|-
| Seven underline || #EC963F || <div style=background-color:#EC963F;>Seven underline</div> || <span style=color:#EC963F;>Seven underline</span> || ||
|-
| Yamato underline || #6F9181 || <div style=background-color:#6F9181;>Yamato underline</div> || <span style=color:#6F9181;>Yamato underline</span> || ||
|-
| Warden underline || #566279 || <div style=background-color:#566279;>Warden underline</div> || <span style=color:#566279;>Warden underline</span> || ||
|-
| Bebop underline || #A04835 || <div style=background-color:#A04835;>Bebop underline</div> || <span style=color:#A04835;>Bebop underline</span> || ||
|-
| Paradox underline || #993A53 || <div style=background-color:#993A53;>Paradox underline</div> || <span style=color:#993A53;>Paradox underline</span> || ||
|-
| Dynamo underline || #D0BA46 || <div style=background-color:#D0BA46;>Dynamo underline</div> || <span style=color:#D0BA46;>Dynamo underline</span> || ||
|-
| Shiv underline || #A53D88 || <div style=background-color:#A53D88;>Shiv underline</div> || <span style=color:#A53D88;>Shiv underline</span> || ||
|-
| Kelvin underline || #75acbd || <div style=background-color:#75acbd;>Kelvin underline</div> || <span style=color:#75acbd;>Kelvin underline</span> || ||
|-
| Mo & Krill underline || #694c86 || <div style=background-color:#694c86;>Mo & Krill underline</div> || <span style=color:#694c86;>Mo & Krill underline</span> || ||
|-
| Shiv underline || #A53D88 || <div style=background-color:#A53D88;>Shiv underline</div> || <span style=color:#A53D88;>Shiv underline</span> || ||
|}