WCAG Color Contrast Checker

Check a text and background pair

Enter the text color as the foreground and the color directly behind it as the background. Use the preview to see the pair as a paragraph, heading or label.

How to check contrast

• Enter a supported color in each field or use the color picker. Check the normalized hex values to confirm the pair.
• Read the ratio and choose the AA or AAA result for your text size.
• Use Swap colors to try the reverse arrangement. The ratio stays the same.
• Adjust the preview size and weight to match your design, then copy or share the pair.

Why the sample fails AA for normal text

The starting pair, #777777 on #FFFFFF, has a ratio of 4.48:1. It falls below the 4.5:1 needed for AA normal text, but passes AA large text at 3:1. It fails both AAA categories. Changing the preview size does not change the ratio.

Choose black or white text

If the background is fixed, compare black and white text on it. The tool shows which of those two has the higher ratio. Check the result for your text size before choosing a label color.