CSS Color Contrast Checker

CSS Color Contrast Checker

Description & Example

Step 1: Choose your foreground color and background color. You have two options for each: use the color picker to select a color visually, or manually type a hex code (e.g., #000000 for black, #ffffff for white).

Step 2: Click "Check Contrast." The tool converts the hex values to RGB and calculates the relative luminance for each color using a standard formula. It then computes the contrast ratio using the formula:

(Lighter Luminance + 0.05) / (Darker Luminance + 0.05)

Step 3: The result is displayed as a ratio (e.g., 21:1 for black on white). The tool also shows an accessibility status. A contrast ratio of 4.5:1 or higher is generally acceptable for normal text.

Example Calculation:

If you set the foreground color to #000000 (black) and the background color to #ffffff (white):

  • The relative luminance for black is 0.
  • The relative luminance for white is 1.
  • The contrast ratio is (1 + 0.05) / (0 + 0.05) = 21:1.
  • The tool will display this as 21:1 and mark it as "Pass".

If you choose colors that are closer in brightness (for example, #666666 on #cccccc), the calculated ratio might be around 3:1, and the tool will indicate that this fails accessibility standards.

This format provides a clear, step-by-step explanation that directly relates to the usage of the tool, helping you understand both the process and the significance of the numbers.