Check two colors
Choose a foreground color and a background color to see whether they have enough contrast.
Highlight contrast issues
Highlighted pixels are places where the chosen color may be hard to read or see against the image.
Use the zoom controls to inspect the image. If the image is larger than the visible preview, use the pan buttons or scroll the preview. Focus the image preview and use arrow keys to move the color picker.
Main colors in this image
These are the strongest colors found in the image. The matrix shows which pairs have at least 4.5:1 contrast.
How to use it
-
Upload an image
Use a screenshot, design export, or content image.
-
Choose the color to check
Pick the text, icon, or background color people need to read or see.
-
Run the test
The preview marks places where that color may disappear into the image. Ask: can I still read it or see what I am supposed to see?
Accessibility statement
This statement explains the accessibility target for the Image contrast checker, what is covered, how the app is tested, and how to report an accessibility problem.
Conformance status
The aim is for the app itself to conform to WCAG 2.2 AAA where the criteria apply to this kind of tool. The interface is built to work with keyboard, screen reader, zoom, high contrast, light mode, dark mode, and system color preferences.
Scope
This statement covers the public Image contrast checker web app at colorcontrast.forlaens.com: the upload view, checker view, language and theme controls, footer, and accessibility statement page. It does not cover user-uploaded images or browser and operating system controls outside the app.
Accessibility approach
The app uses semantic HTML landmarks and headings, visible focus styles, labelled controls, status messages for important changes, translated interface text, and controls that can be operated without a mouse. Text and focus indicators are designed for strong contrast in both light and dark mode.
What the tool can and cannot do
The checker helps review whether a chosen foreground color, such as text, icon, or UI color, remains readable or visible over an image. It highlights image areas that do not meet the selected contrast target. It does not automatically decide whether the image is meaningful, whether the chosen color is the right one, or whether the final design is accessible in every context.
Testing
The build pipeline tests the rendered app with Siteimprove Alfa, axe-core, Nu Html Checker, and browser tests. The tests cover WCAG AAA and best-practice checks, valid HTML, keyboard flows, and focus behavior. The app is also manually tested with screen readers such as NVDA, JAWS, and VoiceOver, browser accessibility plugins, and keyboard-only use.
Feedback and contact
If you find an accessibility problem, have trouble using the app, or have a suggestion, email tobias@forlaens.com.
Last updated: May 7, 2026.
Back to checker