Pin button [Completed]
Findings
Summary
-
Icons and other non-text interactive elements need a 3:1 contrast ratio against the background -
Color isn't the only means for conveying information -
States (hover, focus, active) are distinguishable -
Color should remain distinguishable when testing various color blindness conditions (Deuteranopia, Protanopia, Tritanopia)
Observations
- Missing white box-shadow
- Icon and background do not get darker on focus
Icon contrast
Theme | :default |
:hover / :focus
|
:active |
---|---|---|---|
Light Gray (default) | foreground-color: #69686F background-color: #E9E8EC ↳ 4.5:1
|
foreground-color: #4C4A51 background-color: #D8D7DD ↳ 6.1:1
|
foreground-color: #2F2D34 background-color: #C9C8CD ↳ 8.2:1
|
Indigo | foreground-color: #686770 background-color: #E7E7EE ↳ 4.5:1
|
foreground-color: #4C4A51 background-color: #D6D6DF ↳ 6:1
|
foreground-color: #2E2D34 background-color: #C7C7CF ↳ 8.1:1
|
Light Indigo | foreground-color: #686770 background-color: #E7E7EE ↳ 4.5:1
|
foreground-color: #4C4A51 background-color: #D6D6DF ↳ 6:1
|
foreground-color: #2E2D34 background-color: #FFF ↳ 8.1:1
|
Blue | foreground-color: #61626A background-color: #D6DBE1 ↳ 4.4:1
|
foreground-color: #46464E background-color: #C6CBD3 ↳ 5.7:1
|
foreground-color: #2B2B31 background-color: #B9BDC4 ↳ 7.5:1
|
Light Blue | foreground-color: #64656D background-color: #DDE2E7 ↳ 4.4:1
|
foreground-color: #484850 background-color: #CDD1D9 ↳ 5.9:1
|
foreground-color: #2C2C33 background-color: #BFC3C9 ↳ 7.8:1
|
Green | foreground-color: #646569 background-color: #DDE3DF ↳ 4.5:1
|
foreground-color: #48484D background-color: #CDD2D1 ↳ 5.9:1
|
foreground-color: #2C2D31 background-color: #BFC4C2 ↳ 7.8:1
|
Light Green | foreground-color: #646569 background-color: #DDE3DF ↳ 4.5:1
|
foreground-color: #48484D background-color: #CDD2D1 ↳ 5.9:1
|
foreground-color: #2C2D31 background-color: #BFC4C2 ↳ 7.8:1
|
Red | foreground-color: #69656B background-color: #E8E3E3 ↳ 4.5:1
|
foreground-color: #4C484E background-color: #D7D2D5 ↳ 6:1
|
foreground-color: #2E2D32 background-color: #C8C4C6 ↳ 7.9:1
|
Light Red | foreground-color: #6A676D background-color: #EBE7E8 ↳ 4.5:1
|
foreground-color: #4C4950 background-color: #D9D6D9 ↳ 6.1:1
|
foreground-color: #2F2D33 background-color: #CBC7CA ↳ 8.1:1
|
Gray | foreground-color: #67666D background-color: #E5E5E7 ↳ 4.5:1
|
foreground-color: #4B4950 background-color: #D4D4D9 ↳ 6:1
|
foreground-color: #2E2D33 background-color: #C6C6C9 ↳ 0.0:1
|
Screenshots
Theme | default |
:hover |
:focus |
:active |
---|---|---|---|---|
Light Gray | ||||
Indigo | ||||
Light Indigo | ||||
Blue | ||||
Light Blue | ||||
Green | ||||
Light Green | ||||
Red | ||||
Light Red | ||||
Gray |
Deuteranopia | Protanopia | Tritanopia |
---|---|---|
Edited by Austin Regnery