Our Brand Colors Selector helps you select accessible brand colors, which are colors with a >= 4.5 : 1 contrast ratio.
Instructions
Step 1: Set your desired Foreground and Background colors at the top of the form. We recommend using black (#000000) for foreground and white (#ffffff) for background to maximize the contrast of your site, but you can select any colors you’d like.
Step 2: Select your “Vibrant Colors with ‘Background’ Text Color”. These are typically darker versions of your brand colors, and can be used as background colors when the text color on top is using the “Background” color (ex: white text).
Step 3: Select your “Vibrant Colors with ‘Foreground’ Text Color”. These are typically your brand colors, and can be used as background colors when the text color on top is using “Foreground” (ex: black text).
Step 4: Select your “Light Colors using ‘Foreground’ Text Color”. These are close-to-white background colors that will use the “Foreground” text color (ex: black text).
Example
Here’s an example style guide that shows the foreground and background colors at the top, then columns that match Step 2, Step 3, and Step 4.
