Color Contrast Checker

Check color contrast and generate design tokens from your color choices. Supports hex, named colors, rgb(), hsl(), and other common color formats. Use the color picker or type directly.

Foreground Color

Background Color

Color palettes

The color palettes are generated from the foreground and background colors using the modern OKLCH color space. Use these in your own project to create a consistent color scheme.

OKLCH uses perceptual lightness, making colors with the same lightness value appear equally bright to the human eye. This predictable behavior ensures better contrast ratios and WCAG compliance across your color palette. This article from Evil Martians explains why OKLCH is better for accessibility Opens in a new tab .

Foreground shades

Background shades

 :root {
  --color-foreground-base: #4646ff;

  --color-foreground-10: oklch(from var(--color-foreground-base) 90% c h);
  --color-foreground-20: oklch(from var(--color-foreground-base) 80% c h);
  --color-foreground-30: oklch(from var(--color-foreground-base) 70% c h);
  --color-foreground-40: oklch(from var(--color-foreground-base) 60% c h);
  --color-foreground-50: oklch(from var(--color-foreground-base) 50% c h);

  --color-background-base: #e6e64a;

  --color-background-10: oklch(from var(--color-background-base) 90% c h);
  --color-background-20: oklch(from var(--color-background-base) 80% c h);
  --color-background-30: oklch(from var(--color-background-base) 70% c h);
  --color-background-40: oklch(from var(--color-background-base) 60% c h);
  --color-background-50: oklch(from var(--color-background-base) 50% c h);
}

{
  "collection_base_colors": {
    "$extensions": {
      "figma": {
        "collection": "Base Colors",
        "scopes": ["ALL_SCOPES"]
      }
    },
    "color": {
      "$type": "color",
      "foreground-base": {
        "$value": "#521b92",
        "$description": "Primary foreground color for text and UI elements"
      },
      "background-base": {
        "$value": "#fefc78",
        "$description": "Primary background color for containers"
      }
    }
  },
  "collection_foreground_palette": {
    "$extensions": {
      "figma": {
        "collection": "Foreground Palette",
        "scopes": ["ALL_SCOPES"]
      }
    },
    "color": {
      "$type": "color",
      "foreground-10": {
        "$value": "oklch(from {collection_base_colors.color.foreground-base} 90% c h)",
        "$description": "Lightest foreground shade"
      },
      "foreground-20": {
        "$value": "oklch(from {collection_base_colors.color.foreground-base} 80% c h)",
        "$description": "Light foreground shade"
      },
      "foreground-30": {
        "$value": "oklch(from {collection_base_colors.color.foreground-base} 70% c h)",
        "$description": "Medium-light foreground shade"
      },
      "foreground-40": {
        "$value": "oklch(from {collection_base_colors.color.foreground-base} 60% c h)",
        "$description": "Medium-dark foreground shade"
      },
      "foreground-50": {
        "$value": "oklch(from {collection_base_colors.color.foreground-base} 50% c h)",
        "$description": "Darkest foreground shade"
      }
    }
  },
  "collection_background_palette": {
    "$extensions": {
      "figma": {
        "collection": "Background Palette",
        "scopes": ["ALL_SCOPES"]
      }
    },
    "color": {
      "$type": "color",
      "background-10": {
        "$value": "oklch(from {collection_base_colors.color.background-base} 90% c h)",
        "$description": "Lightest background shade"
      },
      "background-20": {
        "$value": "oklch(from {collection_base_colors.color.background-base} 80% c h)",
        "$description": "Light background shade"
      },
      "background-30": {
        "$value": "oklch(from {collection_base_colors.color.background-base} 70% c h)",
        "$description": "Medium-light background shade"
      },
      "background-40": {
        "$value": "oklch(from {collection_base_colors.color.background-base} 60% c h)",
        "$description": "Medium-dark background shade"
      },
      "background-50": {
        "$value": "oklch(from {collection_base_colors.color.background-base} 50% c h)",
        "$description": "Darkest background shade"
      }
    }
  }
}