Help Documentation - Jeff’s Color Contrast Analyzer

Table of Contents

How to Use and Interpret the Results

  • After you enter the color values you want to analyze and click “Calculate Contrast”, you’ll see 2 tables appear.
  • The first table shows compatible color combinations. In WCAG mode, rows represent background colors with columns showing passing contrast levels (AAA, AA Normal, AA Large). In APCA mode, columns show contrast categories: Perfect (≥90), Excellent (≥75), Good (≥60), and Fair (≥45). Each cell displays colors that meet the specified contrast threshold with the background color.
  • For APCA results, contrast is expressed as an Lc value (like "Lc: 64.1"), which represents perceptual contrast rather than a simple ratio. Higher absolute Lc values indicate stronger contrast, with positive numbers for dark text on light backgrounds and negative numbers for light text on dark backgrounds.
  • The second table is every color that was entered in both rows and columns. Background colors are the rows, foreground colors are the columns. In each table cell, “Sample” text is followed by the contrast value, and the last part is the contrast category. In WCAG mode, failing results are below 3.0 ratio. In APCA mode, results are categorized by Lc value thresholds.
  • WCAG categories are defined by the W3C WCAG, while APCA categories represent a newer contrast method developed by the Accessible Reading Consortium that better accounts for human perception of contrast.
  • The background of the table is a checkerboard pattern to help show transparent colors. Both WCAG and APCA calculations in this tool account for transparency, with APCA providing more perceptually accurate results when transparency is involved.

Extra Features

  • If only one color is input, black and white are automatically added so you have something to compare your one color to.
  • You can add labels in front of any color like labelname: #ff0;.

Color Types Supported

  • Hex: #FFF, #FFFFFF, #FFFA (with alpha), #FFFFFFAA (with alpha)
  • RGB and RGBA: rgb(255, 255, 255) and rgba(255, 255, 255, 0.5)
  • HSL and HSLA: hsl(360, 100%, 100%) and hsla(180deg 15.38% 94.9%, 0.5)
  • CSS Named Colors, like “black”, “white”, or “coral”
  • HSB: hsb(240, 100%, 100%) and hsb(120, 50, 75). This isn’t a valid CSS syntax, but I included it anyways.
  • HWB: hwb(12 50% 0%) and hwb(0 100% 0% / 50%)
  • Lab: lab(80% 100 50) and lab(50% 40 59.5 / 0.5)
  • LCH: lch(50% 70 200) and lch(52.2345% 72.2 56.2 / .5)
  • Oklab: oklab(59% 0.1 0.1) and oklab(59% 0.1 0.1 / 0.5)
  • Oklch: oklch(60% 0.15 50) and oklch(60% 0.15 50 / 0.5)
  • CMYK: cmyk(100%, 0%, 0%, 0%) and cmyk(0, 100, 100, 0). This isn’t a valid CSS syntax, but I included it anyways.
  • Note: Relative values like from and calc are not supported. Color() is not supported.

Exporting Results

  • After entering colors and clicking “Calculate Contrast”, a “Download Report” button will appear below the “Calculate Contrast” button. Clicking the “Download Report” will download a HTML file with your results. Just the summary and complete contrast tables are included in the downloaded file. The current timestamp is included in the filename.
  • If a HTML file is not automatically downloaded, you might see the report in a new browser window. You can save this as a file on your device.

Error Messages

  • Too many colors
    • There is a limit of 50 colors to prevent really long results and processing time.
  • Duplicate colors
    • If you enter the exact same color the exact same way multiple times, only the first entry will be calculated.
  • Equivalent colors
    • Similar to the “Duplicate colors” warning, if you enter the same color in a different way, like red and #ff0000, only the first entry will be calculated. Since color conversions need to happen behind the scenes, it doesn’t detect every equivalent color. This is done on purpose so that if you have 2 very similar colors, it doesn’t ignore the two distinct colors.
  • Unknown color
    • If the code doesn’t recognize your input, I don’t know what you expect to happen. Refer to the examples for syntax that is supported.

Additional Resources

Similar tools can be found at:

APCA tools can be found at: