Using Color
Use color to draw attention to specific elements on a page. Never change the color of text or backgrounds or other elements without a clear reason for why the color is needed and how it improves over the defaults.
The defaults are designed to align with the WSU brand and to be accessible to the most people. Keep this in mind whenever you change the default color on an element. Ask yourself: why is it important for this to be a different color?
Refer to the WSU Brand site for further guidance.
Color Contrast
If you modify the default colors of any element it’s your responsibility to guarantee that they meet requirements for accessibility and don’t diverge from the style guide.
The WordPress editor will do its best to warn you if you select an inaccessible color combination, but it’s not perfect. Especially if you choose to overlay text on top of an image, you are responsible for making sure that all of the text is legible at any screen size.
Make sure to test your design at different screen widths. What works on a desktop monitor may no longer work on a mobile device as the text and images move around.
Guidance
Do
The defaults are always going to be the best.
WSU gray text on the default background is okay; better if using a larger font size.
White on black also provides good contrast.
White on WSU gray also works well.
White on either WSU crimson variant is good, but visually overwhelming in large blocks.
Do Not
Never use the crimson colors for text. These are reserved for links and will be automatically set.
No black on crimson
No gray on crimson
The only acceptable color on a gray background is white.
Brand Colors
In the WordPress editor, the HRS website provides access to a selection of the WSU brand colors. Select from these colors to modify certain kinds of content in the block editor.