Color palette | 18F Visual identity (original) (raw)
For Adobe, Sketch, and Mac applications
Color guidance
Color choices impact the accessibility of our content. Here's how to use color in line with 18F's accessibility practices.
Don't use color exclusively to convey meaning
People see colors differently, and color is not seen by everyone. If color is the only signal, that signal won’t get through as intended to everyone.
When communicating, use color as an enhancement to other elements like text, icons, or patterns. For example, to visualize data in a line chart, use different line styles (solid, dashed, dotted) in addition to different line colors.
One helpful test is to imagine your design in black and white. Is it still understandable?
Use accessible color combinations
Colors need to contrast with one another to be identifiable. WCAG provides guidance on what contrast ratios are accessible in certain situations:
- Large text (bolded 18px text, regular 24px text, or larger) should have a contrast ratio of 3:1 or more with its background.
- Small text (18px text or smaller) should have a contrast ratio of 4.5:1 or more with its background.
- Non-text elements (aka, icons or diagrams) should have a contrast ratio of 3:1 or more with its background color.
We recommend using a higher standard when using the 18F palette:
- Large and small text should have a contrast ratio of 4.5:1 or more with its background.
- Non-text elements should have a contrast ratio of 3:1 or more with its background color.
Below is an outline of accessible 18F color combinations.
| White text #FFFFFF | Light text #B3EFFF | Bright text #00CFFF | Medium text #046B99 | Dark text #1C304A | Black text #000000 | |
|---|---|---|---|---|---|---|
| Black background #000000 | White elements on black background is 508-compliant, with a contrast ratio of 17:1. | Light elements on black background is 508-compliant, with a contrast ratio of 15:1. | Bright elements on black background is 508-compliant, with a contrast ratio of 11:1. | Medium elements on black background is 508-compliant, with a contrast ratio of 3.6:1. We recommend using this combination only for non-text elements. | Do not use dark text on black background; it is not 508-compliant, with a contrast ratio of 1.5:1. | Do not use black text on black background; it is not 508-compliant, with a contrast ratio of 1.0:1. |
| Dark background #1C304A | White elements on dark background is 508-compliant, with a contrast ratio of 11:1. | Light elements on dark background is 508-compliant, with a contrast ratio of 10:1. | Bright elements on dark background is 508-compliant, with a contrast ratio of 7:1. | Do not use medium text on dark background; it is not 508-compliant, with a contrast ratio of 2.3:1. | Do not use dark text on dark background; it is not 508-compliant, with a contrast ratio of 1.0:1. | Do not use black text on dark background; it is not 508-compliant, with a contrast ratio of 1.5:1. |
| Medium background #046B99 | White elements on medium background is 508-compliant, with a contrast ratio of 4.70:1. | Light elements on medium background is 508-compliant, with a contrast ratio of 4.15:1. We recommend using this combination only for non-text elements. | Bright elements on medium background is 508-compliant, with a contrast ratio of 3.2:1. We recommend using this combination only for non-text elements. | Do not use medium text on medium background; it is not 508-compliant, with a contrast ratio of 1.0:1. | Do not use dark text on medium background; it is not 508-compliant, with a contrast ratio of 2.3:1. | Black elements on medium background is 508-compliant, with a contrast ratio of 3.6:1. We recommend using this combination only for non-text elements. |
| Bright background #00CFFF | Do not use white text on bright background; it is not 508-compliant, with a contrast ratio of 1.5:1. | Do not use light text on bright background; it is not 508-compliant, with a contrast ratio of 1.3:1. | Do not use bright text on bright background; it is not 508-compliant, with a contrast ratio of 1.0:1. | Medium elements on bright background is 508-compliant, with a contrast ratio of 3.2:1. We recommend using this combination only for non-text elements. | Dark elements on bright background is 508-compliant, with a contrast ratio of 7:1. | Black elements on bright background is 508-compliant, with a contrast ratio of 11:1. |
| Light background #B3EFFF | Do not use white text on light background; it is not 508-compliant, with a contrast ratio of 1.1:1. | Do not use light text on light background; it is not 508-compliant, with a contrast ratio of 1.0:1. | Do not use bright text on light background; it is not 508-compliant, with a contrast ratio of 1.3:1. | Medium elements on light background is 508-compliant, with a contrast ratio of 4.15:1. We recommend using this combination only for non-text elements. | Dark elements on light background is 508-compliant, with a contrast ratio of 10:1. | Black elements on light background is 508-compliant, with a contrast ratio of 15:1. |
| White background #FFFFFF | Do not use white text on white background; it is not 508-compliant, with a contrast ratio of 1.0:1. | Do not use light text on white background; it is not 508-compliant, with a contrast ratio of 1.1:1. | Do not use bright text on white background; it is not 508-compliant, with a contrast ratio of 1.5:1. | Medium elements on white background is 508-compliant, with a contrast ratio of 4.70:1. | Dark elements on white background is 508-compliant, with a contrast ratio of 11:1. | Black elements on white background is 508-compliant, with a contrast ratio of 17:1. |