Contrast checker
Check text and background color contrast.
Contrast checker
Make it yours
Adjust the values, then get your result.
How to use Contrast checker
Contrast checker calculates the WCAG contrast ratio between a text color and a background color. It reports pass or fail for AA normal text at 4.5:1, AA large text at 3:1, AAA normal text at 7:1 and UI graphics at 3:1. A text opacity setting blends semi-transparent text over the background before measuring.
- Choose the text and background colors.
- Lower text opacity if the text is translucent. The preview shows normal text, large text and a UI sample.
- Read the pass or fail result for normal text, large text and UI graphics.
What this tool supports
Composites text opacity over the background, then checks normal text at 4.5:1, large text at 3:1 and user-interface graphics at 3:1. The preview shows normal text, large text and a UI sample.
- Text color
- Set this value for your task.
- Background
- Set this value for your task.
- Text opacity
- Semi-transparent text is composited onto the background before the ratio is calculated.
Limits and processing
Images are limited to 32 megapixels and 16,000 pixels per side. Most operations accept one source; supported batch operations produce a ZIP archive.
Frequently asked questions
What contrast ratio do I need for accessible text?
In the checks this tool applies, normal text needs 4.5:1 for AA and 7:1 for AAA, while large text and user-interface graphics need 3:1. Large text means at least 18pt regular or 14pt bold.
How does text opacity affect the contrast ratio?
The text color is blended with the background at the chosen opacity, and the ratio is calculated from that blended color. Lower opacity moves the text toward the background color, so the ratio drops.
Does the contrast checker handle a transparent background color?
A partially transparent background is first composited over white, and the text is then composited over that result. The preview shows normal text, large text and a UI component using the final colors.
Where is my input processed?
This operation processes its source in your browser. Copy and download are explicit actions; source input is not saved in an account or history.
What are the input limits?
Images are limited to 32 megapixels and 16,000 pixels per side. Most operations accept one source; supported batch operations produce a ZIP archive.