How do I check the contrast ratio of text in an image?
Web Content Accessibility Guidelines (WCAG) require text to have a specific contrast ratio against its background to ensure it is readable for visually impaired users. If your text is typed as standard HTML on a website, there are dozens of browser extensions that can calculate the contrast.
However, if your text is baked into an image—like a promotional banner, an infographic, or a social media graphic—standard tools fail. Our ADA Image Contrast Ratio Checker features a built-in HTML5 Eyedropper.
Simply upload your graphic, click directly on the text pixels and the background pixels, and the engine will instantly extract the exact colors to mathematically calculate your WCAG 2.1 Pass/Fail status.
🔍 ADA Image Contrast Checker
Ensure your graphics and hero images are legally accessible. Upload an image, use the eyedropper to select the text and background, and instantly calculate WCAG 2.1 compliance.
How to Use the Image Contrast Checker
Ensure your marketing graphics and hero images are legally accessible and easy to read:
- Upload Your Graphic: Drag and drop your image (JPG, PNG, or WebP) into the workspace.
- Pick the Foreground (Text): Ensure the “Foreground” box is highlighted. Click directly on a letter in your image. Pro Tip: If the text is very thin, zoom in using your browser (Ctrl/Cmd +) to ensure you click the exact color pixel rather than a blurred anti-aliased edge.
- Pick the Background: The tool will automatically switch to the “Background” selector. Click the area of the image directly behind the text.
- Review the Results: The engine calculates the exact relative luminance and provides a Contrast Ratio (e.g., 4.5:1). Below the ratio, the dashboard will explicitly state whether those colors Pass or Fail the strict WCAG AA and AAA legal standards.
Understanding the WCAG Contrast Rules
Under the Americans with Disabilities Act (ADA) and international web standards, contrast is measured on a scale from 1:1 (white on white) to 21:1 (black on white).
Level AA (The Standard)
This is the baseline legal requirement for most websites and public communications.
- Normal Text (14pt / 18px or smaller): Must have a minimum contrast ratio of 4.5:1.
- Large Text (18pt / 24px or bold): Because larger text is inherently easier to read, the requirement is slightly relaxed to a minimum ratio of 3.0:1.
Level AAA (The Gold Standard)
This is the enhanced accessibility standard, often required for government websites or applications specifically targeting elderly or impaired demographics.
- Normal Text: Must have a minimum contrast ratio of 7.0:1.
- Large Text: Must have a minimum contrast ratio of 4.5:1.
Why Gradients and Photos are Dangerous
If you place white text over a beautiful landscape photograph, the text might look readable to you, but the actual contrast ratio changes depending on which part of the photo the text sits over. You must use the eyedropper to select the lightest pixel of the photograph that touches the text. If that specific intersection fails the contrast test, you must add a dark drop-shadow to the text or a semi-transparent dark overlay to the entire photo to guarantee compliance.
Frequently Asked Questions (FAQ)
Q: Are logos legally required to meet contrast standards?
A: No. Under WCAG 2.1, text that is part of a logo or brand name has no minimum contrast requirement. However, it is still a highly recommended best practice for brand visibility.
Q: Does pure black text on a pure white background pass all tests?
A: Yes! Pure black (#000000) on pure white (#FFFFFF) yields the maximum possible contrast ratio of 21:1, easily passing the strictest Level AAA requirements for all text sizes.
Q: My image text is anti-aliased (blurred at the edges). Where should I click?
A: Click the absolute center of the letter stroke. The blurred edges are transitional colors bridging the text to the background. Selecting the solid core of the letter provides the most accurate luminance reading.