Desktop Web, Tablet Web, Smartphone Web
Specifications To Consider
• Provide both RGB formulas and Hex codes.
• Give the colors non-numerical names, such as “Charcoal” and “CompanyName Blue.” That will allow owners to reference the colors in other sections of the framework without worrying about the inevitable typos that result when re-entering Hex or RGB codes.
• If a color is restricted to certain uses (buttons only, backgrounds only, errors only, etc.) be sure to tell your users.
• Include a “note” column near each color to address accessibility. Let your users know if a particular color passes WCAG accessibility tests (AA and AAA) when used in common combinations.
• If you use gradients, clearly define them here. If gradients are not permitted, state this as well.
• You may consider adding a “color balance” guide, to ensure that various pages do not use one color more prominently than another.
|Dark Gray||#6b6b6b||Compliant AAA – (f5, fff)|
|Medium Gray||#999999||Non-Compliant – (f5, fff) – 2.5, 2.6|
|Text Link – Default||#cb4b27||Partially Compliant on #FFF background. Passes WCAG AA; Fails
WCAG AAA. Passes both if used above 14px.
|TextLink – Hover||#f26a25||Non-compliant|
|Text Link – Visited Blue||#76abd6||Text Link Visited, AA – (f5, fff) – 3.3, 3.1|
Background and Background Rollover State Colors
|Default White Background||#ffffff||NA|
Error and Alert Box and Text Colors
These colors may only be used in Error and Alert messages. They are not approved for any other purpose.
|Alert Red||#b80000||Compliant AAA – (f5,fff)|
|Alert Red Background||#f5d7d7||NA|
Do Not Use nor Create Gradients
Gradients are reserved for BUTTON USE ONLY. As a result, they are not defined here. Do not use, nor create, any gradients for use on the site outside of pre-approved button styles.
Not Applicable (Remember: no field should be blank!)