Contrast Checker

Sample Text

This is how your text will look with the selected colors.

How It Works

This contrast checker tool helps you determine if your color choices provide sufficient contrast for readability, especially for users with visual impairments. Here's how to use it:

  1. Choose a foreground color (usually text color) using the color picker or by entering a hex code.
  2. Choose a background color in the same way.
  3. Click "Check Contrast" to see the results.

The tool calculates the contrast ratio between the two colors and checks it against Web Content Accessibility Guidelines (WCAG) 2.0 standards:

  • AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
  • AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

The contrast ratio is calculated using the following steps:

  1. Convert the RGB values of each color to their relative luminance.
  2. Calculate the contrast ratio using these luminance values.

For more information on the formulas used, check out these resources: