Contrast checker

How to use the contrast checker

This contrast checker compares two colors and reports their WCAG 2.1 contrast ratio. Use it to test text, backgrounds, feature colors, trim, or other color pairings before you use them in a room or design.

1. Enter the foreground color as a 3- or 6-digit hex value.
2. Enter the background color as a 3- or 6-digit hex value.
3. Use an optional leading #, such as #333333 or 333333.
4. Review the contrast ratio and the AA and AAA pass results.
5. Test the pair again if you change either color.

What to enter

Foreground colour (hex)

Enter a 3- or 6-digit hexadecimal color. A leading # is optional. Use the current field value if one is prefilled.

Background colour (hex)

Enter a 3- or 6-digit hexadecimal color. A leading # is optional. Use the current field value if one is prefilled.

Reading the results

Read the result as a ratio such as 4.50:1. A higher ratio means a larger difference in relative luminance. The tool reports separate pass or fail results for AA normal text, AA large text, AAA normal text, and AAA large text. A ratio of 1:1 means the two colors have equal relative luminance. The maximum possible ratio is 21:1, produced by luminance 1 and luminance 0: (1 + 0.05) ÷ (0 + 0.05) = 21.

Limitations and common mistakes

• The inputs are hex colors only. The checker does not accept color names, RGB values, transparency, gradients, or images.
• The ratio is based on WCAG relative luminance for the supplied digital colors. It does not model room lighting, paint sheen, texture, shadows, or surrounding colors.
• A passing ratio is a numeric result for the selected pair. It does not account for font size, weight, thin strokes, or viewing conditions beyond the threshold categories.
• The checker compares two colors at a time. A full room or palette may need separate checks for each important text, trim, accent, and background pairing.