Colors
Documentation and uses for the Wiley Online Library color palette
General Rules
Color should be used sparingly and consistently throughout Wiley Online Library. The sensitive nature of the material and the importance of identity to our journals and societies requires the colour palette on WOL be supportive of their content and not work against it. Some examples of how certain colors should be used are outlined below.
Due to vast range of content and functionality, it is perfectly acceptable to use any of the colors below for text, backgrounds, borders, etc. to accommodate the needs of the content and the user. However, please take note of the following:
- Avoid using the primary blue colour on text that is not a link - this can mislead the user in thinking that it is a link.
- Avoid using success green or danger red in close proximity to forms or other types of alert messaging - this colour is used in form validation and communicating messages to the user.
Colors
Wiley Online Library uses a reduced and modified version of the One Wiley Branding colors. Some colours did not meet the accessibility criteria WOL tries to uphold.
Blue primary
#005274
Uses
- Call-to-actions
- Links
Green success
#068853
Uses
- Form validation
- some decoration
- full-access branding
Cyan info
#006D76
Orange warning
#CC4E00
Uses
- Access Denied
Red danger
#A41022
Uses
- Form validation
- Alerts and messaging
White
#FFFFFF
Uses
- Typography color on dark backgrounds
- Primary background color
Grey-100
#F8F9FA
Grey-200
#EFEFF0
Uses
- Alternate background color
Notes
Does not meet AA WCAG contrast requirements when paired with Grey-500
Grey-300
#D8D9DA
Grey-400
#C2C3C6
Grey-500
#767676
Uses
- Differentiating copy on white backgrounds
- 'muting' certain pieces of text to reinforce hierarchy
- Form input borders
- Form placeholder text
Grey-600
#414246
Grey-700
#2F3032
Grey-800
#1C1D1E
Uses
- Body text color
Grey-900
#141414
Uses
- Wiley corporate brand; 'Wiley Black'
Black
#000000
Gradients
To help create a recognizable identity for the generic and administrative parts of WOL, we have adopted gradients to help with decoration and hierarchy.
Blue - Green
#005274 - #068853
Uses
- Header areas background where an image is not appropriate or necessary
Grey 200 - Grey 100
#EFEFF0 - #F8F9FA
Uses
- An alternative to the blue green gradient to help avoid over saturating the page design