Quick Contrast

Colors

Contrast ratio:

Quick tip: usually you want a ratio 4.5 or higher. Details in the contrast ratio guidelines below.



Contrast Sample

Sample - Color 1 as background and Color 2 as text:

The quick brown fox jumps over a lazy dog. My girl wove six dozen plaid jackets before she quit. Brown jars prevented the mixture from freezing too quickly. How vexingly quick daft zebras jump!

Sample - Color 2 as background and Color 1 as text:

The quick brown fox jumps over a lazy dog. My girl wove six dozen plaid jackets before she quit. Brown jars prevented the mixture from freezing too quickly. How vexingly quick daft zebras jump!

CSS Variables

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

--color-1: ;
--color-2: ;

Instructions

  1. This tool is instant updating, so any change you make to the colors will instantly update the Contrast Results section.
  2. CSS variables are outputed for convience of copy/paste.

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

This quickly checks contrast between 2 colors. If you want a tool that generates colors for you starting with your brand colors, then use the Full Color & Font Builder.

If you want a tool that allows you to check several foreground colors against several background colors, use the Quick Colors tool.

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).