WCAG Contrast Matrix

How to use the matrix

Paste a list of your brand or UI hex colors into the input field. The tool will automatically generate a grid comparing every possible combination of background (rows) and foreground (columns) text colors.

Understanding the Results

Inside each cell, you will see text colored with the foreground color sitting on top of the background color.

• The number represents the contrast ratio (e.g., 21.00 for black on white).
• PASS / FAIL tags indicate whether the combination meets the selected WCAG threshold for normal body text.
• Use the "Show only failing combinations" toggle to quickly spot inaccessible pairs in your palette.

Note: The calculations are based on the standard WCAG 2.1 algorithm for relative luminance. For normal text (14pt to 18pt), the AA threshold is 4.5:1, and the AAA threshold is 7.0:1.