Quick Colors

What does this tool do, when should I use it?

This tool is for people who have existing colors and want to test them. If you want a tool that generates colors for you starting with your brand colors, then use the Full Color & Font Builder.

Video instructions are available for using the Quick Colors tool.

This tool is designed to quickly update your color palette.

Please note that in the Grid table text is styled with an underline to look like a link. These are not actual links, they are styled so you can see what they would look like on a website.

Instructions

1. Enter your colors under the "Background & Foreground colors" section.
2. Click the "Update Grid & CSS Variables" button.
3. Review the "Grid" section for color contrast.
4. If you are happy with your colors, go to the "CSS Variables" section and copy your color codes so you can save them.
5. If you would like to modify your colors, go back to step 1 and update your colors in the "Background & Foreground colors" section. After any update to your colors, you need to click "Update Grid & CSS Variables" button to see results in the "Grid" section.

Background & Foreground colors

Note: if you only have one or two background colors, just set the third (or both second and third) backgrounds to the same as the first. If you have both light backgrounds and dark backgrounds, you'll want to use the tool twice. Once for the light backgrounds, once for the dark backgrounds.

Note: if you don't have accent colors, you can just ignore them.

Update Grid & CSS Variables

---

Grid

Below is the grid of the color choices and their contrast ratio. Explanations for the grid are listed after the grid.

Color Name	Background 1	Background 2	Background 3
Heading Color
Text Color
Link Color
Link Hover Color
Border Color
Accent Color 1
Accent Color 2
Accent Color 3
Button
Button Hover

Contrast ratio guidelines:

• Too low: The contrast ratio is below 3 and fails WCAG level AA.
• Icon/Large Text: Minimum 3: This passes WCAG 2.1 level AA for the following:
  • Meaningful icons, accents, meaningful borders. Examples of meaningful icons: social media, shopping cart, phone, chat. Examples of meaningful accents: a graphic showing an example of how to correctly or incorrectly fill something out. Examples of meaning borders: border around input fields.
  • Fonts larger than 18.5px (14pt) and bold (font weight 700).
  • Fonts 24px (18pt) or larger and font weight 300-600.
• Good AA: Minimum 4.5: Recommended for all fonts. Required for fonts under 24px (18pt) that are not bold.
• Great AAA: Minimum 7: A requirement for WCAG level AAA (most websites do not need to conform with AAA), but highly recommended for your main body text color.
• Too High: Maximum 18: This is not a WCAG requirement, but many people have difficulty with reading when contrast is too high. This causes significant problems for people with Irlen Syndrome (12-14% of population), dyslexia, and those who are tired or have headaches (everyone at some point in their life).

The Color Name column of the table will display "OK" in front of the color name if it passes all of the above criteria. Otherwise, it will display "Issue" in front of the color name. This is to allow you to quickly identify which row is causing issues.

Button and Button Hover just check button background to button text, they do not check against the actual background colors.

CSS Variables

For ease of development, below are the CSS variables corresponding to your colors.