Help Documentation - Jeff’s Color Contrast Analyzer

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 is rows of background colors and columns of foreground colors with the background color for that row on the first, leftmost column. The second column from left is “AAA” results, which will have the highest contrast ratio for that background color row. The third column “AA Normal” has the second most contrast ratio, and the rightmost column has the smallest passing contrast ratio. Failing color combinations are not shown in the summary table. The name of each color and the contrast ratio is in the color supplied so you can see the contrast in the table cells.
• 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 ratio, and the last part is the WCAG contrast category. If the contrast ratio is below 3.0, the result will say “Fail”.
• These 3 categories and the Failing result are defined by the W3C WCAG. More contrast is not always needed, so keep that in mind when interpreting results.
• The background of the table is a checkerboard pattern to help show transparent colors. Transparent text over a solid background is calculated after mixing the two colors together. The WCAG does not factor transparency into their recommendations, however this tool does calculate this and you will notice lower contrast ratios with a transparent color compared to a similar opaque color.

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
• RGB and RGBA
• HSL and HSLA
• CSS Named Colors, like “black”, “white”, or “coral”
• HSB (This isn’t a valid CSS syntax, but I included it anyways.)
• HWB
• Lab
• LCH
• Oklab
• Oklch
• CMYK (This isn’t a valid CSS syntax, but I included it anyways.)
• Note: Relative values (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 at the top of the main page for syntax that is supported.

Additional Resources

• https://www.w3.org/TR/WCAG21/#contrast-enhanced
• https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced.html

Similar tools can be found at:

• https://contrast-grid.eightshapes.com
• https://contrastgrid.com
• https://metageeky.github.io/contrast_table_analyzer/contrast-table.html