Color contrast checker
Compare a foreground and background color, read the contrast ratio, and see whether WCAG AA and AAA pass for normal and large text.
It runs in your browser. What you enter stays on this device.
How to use it
- 1Pick the text color and the color behind it.
- 2Choose Check contrast.
- 3Read the ratio and the AA and AAA lines.
- 4If normal text fails AA, try the suggested foreground.
When it helps
- Check body text against a page background before shipping a color.
- See whether large heading text passes when body text does not.
- Get a nearby color that reaches AA.
Good to know
- The check uses the WCAG 2 relative-luminance formula. It does not score a page or a design.
- Large text means about 18pt regular or 14pt bold. This tool does not know your font size, so it reports both.
- The suggestion changes only the foreground toward black or white until AA passes for normal text.
Questions
Is a pass a guarantee?
It means these two opaque colors meet the stated ratio. Transparency, images behind the text, and font weight can change the result.
Related tools
CSS clamp generator CSS clamp generator
Build a CSS clamp() value from a minimum size, a maximum size, and two viewport widths.
Developer
Image converter Image converter
Convert an image to PNG, JPEG, WebP, or AVIF when this browser can encode that format.
Images