What do you want to check?
Choose two colors, or check an image.
Check two colors
Choose a foreground color and a background color to see whether they have enough contrast.
Use a hex value or a recognized CSS color.
What counts as normal and large text?
Large text is at least 24 px, or 18.5 px when bold. Smaller text counts as normal text.
Check contrast in an image
Choose an image to find where a color may be hard to see. PNG, JPG, GIF, or SVG. It stays in your browser.
Drop an image here, or paste one from your clipboard.
Use an image URL
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.
Advanced: compare colors in the image
Main colors in this image
Choose a swatch as the test color, or review the 15 unique pairs from lowest contrast to highest.
Accessibility statement
This statement explains the accessibility target for the Color 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 Color 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