About this tool

Check the contrast ratio for text and background colors.

Uses the WCAG relative luminance formula. This checks only color contrast, not overall page accessibility.

Method and example

Enter solid foreground and background HEX colors. The checker compares their relative luminance. WCAG AA requires at least 4.5:1 for ordinary text and 3:1 for qualifying large text.

Black (#000000) on white (#ffffff) has a contrast ratio of 21:1. Light gray text on white can fail even when it looks elegant on a bright monitor.

Before you use the result

• Use the actual final colors. Transparent overlays, gradients and background images can change the visible contrast.
• A passing color pair does not establish that a whole website is accessible. Check focus states, labels, zoom and keyboard navigation too.

Worked example

Text HEX color

#000000

Background HEX color

#FFFFFF

Result for this example

Contrast ratio: 21.00 : 1
AA normal text (4.5:1): Pass
AA large text (3:1): Pass
AAA normal text (7:1): Pass

Use Try an example to load these values. Enter your own values for your own result.

Found a reproducible issue? Report it with a small non-sensitive example. Read our editorial and testing approach.