Contrast Checker
Check WCAG contrast between two colors.
How to use Contrast Checker
Check WCAG AA / AAA contrast ratios between any two colors for accessible design.
Open Contrast Checker on toolpermarket and fill in the inputs the tool asks for.
In the Foreground color field, enter the text or icon color as hex, RGB or a name your browser understands. Paste the exact color used on the element you are testing, not a near guess.
In the Background color field, enter the surface the text sits on, such as white, a dark panel or a tint. Test the real background, including any translucent overlay, not just the base page color.
Press Check to compute the result. The output appears immediately below the form. Adjust the inputs and recalculate as many times as you need.
Read the result and use it as needed. If the number looks off, re-check your inputs and run it again — the math is deterministic, so the same entries always return the same answer.
Worked example. Checking #1c2430 text on #ffffff gives a contrast ratio near 13:1, far above the WCAG AA threshold of 4.5:1 for normal text.
Tips for accurate results.
Aim for at least 4.5:1 for body text and 3:1 for large text or UI components.
Re-test after theme changes — a tweak that looks fine can drop the ratio below AA.
Remember that low-vision and aging eyes benefit from margins well above the minimum.
When to use Contrast Checker. Designers proving a page meets WCAG AA before launch. Auditing an existing site for accessibility regressions. Choosing readable text colors over a colored banner or image.
When you actually reach for this
- You need to know if text is readable on its background for accessibility.
- A design review asks whether a color pair passes WCAG.
Where this tool stops being accurate
- It measures the contrast ratio of a text-and-background pair; it says nothing about color blindness or overall aesthetics.
- Ratios assume normal text rendering; very thin or decorative fonts read worse than the number implies.
Frequently asked questions
What contrast ratio do I need for WCAG AA?
WCAG 2.1 AA requires a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text or UI components. This checker reports the exact ratio so you can confirm a pair passes before shipping it to real users.
Does the checker read image backgrounds?
No. You supply the two solid colors, so for a photo or gradient background you should sample the darkest and lightest points and test both. A single ratio cannot represent a busy image, and the worst-case area is what matters for readability.
Is a higher ratio always better?
Within reason. Ratios of 7 to 1 and above (AAA) are excellent for body text, but going extremely high can feel harsh. The goal is a comfortable, clearly readable pair that meets at least AA, not the largest number possible.
What contrast ratio do I need?
WCAG asks for 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). Go higher for critical UI.