Colors
Specifying colors
A few best practices to consider:
-
Hexadecimal colors are preferred over RGB as they're more easily recognizable when found in code.
(e.g.
#444is quicker to identify as dark gray thanrgb(68, 68, 68)) -
Shorthand hexidecimal values save time and typing (e.g.
#ffffor white, instead of#ffffff) -
Use lower-case letters, as they offer better legibility/character contrast (especially for dyslexic authors).
For instance, it is easier to differentiate the D's from 0's here
#d0d0d0versus here#D0D0D0.
Primary Colors
| Color Name | Hex Value | RGB Value |
|---|---|---|
| Crocs Green | #84bd00 | 132, 189, 0 |
| Dark Gray | #444 | 68, 68, 68 |
| White | #fff | 255, 255, 255 |
Secondary Colors
| Color Name | Hex Value | RGB Value |
|---|---|---|
| Link & Button Blue | #006da4 | 0, 109, 164 |
| Sale & Error Red | #d70000 | 215, 0, 0 |
| Hairlines | #ccc | 204, 204, 204 |
| Light Gray | #ebebeb | 235, 235, 235 |
Color Usage Guidelines
Acceptable color usage is strictly defined for text and backgrounds to ensure sufficient contrast/legibility for low-vision users. Certain colors like Crocs Green do not offer enough contrast to be used as text on a white background, for example.
| Color | OK to use for Text? | OK to use for Backgrounds? | Notes |
|---|---|---|---|
| Yes | Yes | Usage for text is limited to links. Usage for background is limited to call-to-action buttons. | |
| Yes | Yes | Acceptable for both text and background. | |
| Yes | Yes | Usage for text is limited to instances where background color is blue, dark gray, or black. | |
| Yes | No | Can be used for text, but not text links. Not acceptable for backgrounds. | |
| No | No | Acceptable for non-text accents only. | |
| No | Yes | Acceptable for backgrounds, borders, and rules. | |
| No | Yes | Acceptable for backgrounds only. |
Color Contrast Requirements
The contrast between foreground (text) and background colors must meet WCAG 2.0 (AA) compliance to be considered accessible. The minimum contrast ratio for standard body copy is 4.5:1. For text that is larger than 18px, and bold fonts larger than 14px, the minimum contrast ratio is 3:1. [source]
Use the form below to check minimum contrast ratios for specific text/background color combinations. Enter a valid 6-character hexadecimal code in each field without the leading # symbol.
Exemption for Logos
Text that is part of a logo or brand name has no minimum contrast requirement. [source]
Contextual Text & Background Colors
Contextual classes allow easy application of colors to elements without directly specifying a hexidecimal color.
White text on dark gray background
Black text on light gray background
Text and Background CSS Classes
| Color | Text Class | Background Class | Notes |
|---|---|---|---|
| White | text-white |
background-white |
|
| Black | text-black |
Not Available |
See background-gray-dark |
| Light Gray | Not Available |
background-gray-light |
Light gray text does not meet contrast requirements. |
| Dark Gray | text-gray-dark |
background-gray-dark |
Dark gray is the default for all page text. |
| Rubine | text-rubine |
background-rubine |
Marketing use only. |
| Yellow | text-yellow |
background-yellow |
Marketing use only. |
| Green | Not Available |
background-green |
Green text does not meet contrast requirements. |
| Purple | text-purple |
background-purple |
Marketing use only. |
| Orange | text-orange |
background-orange |
Marketing use only. |
| Red | text-red |
Not Available |
Used for sale prices. |
| Clearance Red | text-clearance |
background-clearance |
Marketing use only. |
| Blue | text-blue |
background-blue |
Marketing use only. |