BUY WEBSITES
BUY DOMAINS
LOGIN
SIGNUP
Color Contrast Checker (WCAG)
A color contrast checker measures the ratio between a text colour and the background behind it, then tests that ratio against the WCAG accessibility thresholds that decide whether the text is legible. Low contrast is one of the most common accessibility failures on the web, and it quietly hurts SEO too: Google rewards pages that are usable for everyone, and unreadable copy raises bounce rate on the very visitors a page was built to keep.
This tool is free and runs entirely in the browser. Type a hex value or use the native colour pickers, and it computes the relative luminance of each colour, returns the contrast ratio, and flags AA and AAA pass or fail for both normal and large text in real time, with a live preview swatch so the result can be judged by eye as well as by number.
Large heading text
Normal body text sets the readability baseline for most of a page.
🔒 Private: everything runs in your browser. Nothing you paste is uploaded.
How to use the WCAG color contrast checker
Set a text colour and a background colour using the hex fields or the swatch pickers. The contrast ratio and the four conformance badges update on every change, and the preview panel shows the two colours together exactly as a reader would see them.
Read the contrast ratio against the right WCAG level
WCAG expresses contrast as a ratio from 1:1 (identical colours) up to 21:1 (pure black on pure white). The level that matters depends on the text. Normal body copy must reach 4.5:1 for AA and 7:1 for the stricter AAA. Large text, defined as roughly 24px regular or 18.66px bold and above, only needs 3:1 for AA and 4.5:1 for AAA because bigger shapes stay readable at lower contrast. The tool reports all four targets at once, so the same pair of colours can pass for a heading yet fail for the paragraph beneath it.
Why pixel-perfect contrast is computed, not guessed
Contrast cannot be eyeballed reliably because perceived brightness is not linear. Each colour channel is first linearised with the WCAG gamma formula, then weighted by how sensitive human vision is to it: green counts for about 72 percent of luminance, red for 21, and blue for just 7. That weighted luminance feeds the ratio, which is why a yellow and a blue of equal lightness on screen can sit far apart on the scale. The checker runs that exact maths in the browser, so the number it shows matches what an automated accessibility audit will report.
Fix a failing pair without losing the brand colour
When a colour pair fails, small moves usually fix it. Darkening the text or lightening the background a few steps often clears the threshold while keeping the design recognisable. For brand colours that must stay fixed, change the colour they sit against instead, add a solid backing behind text over a busy image, or increase the font size and weight so the large-text threshold applies. Use the swap button to test the same two colours in reverse, since a tint that fails as text can pass as a background, then re-check until the badge you need turns green.
Color contrast checker frequently asked questions
Q1What is a good WCAG contrast ratio?
For normal body text, aim for at least 4.5:1 to meet WCAG AA and 7:1 to meet the stricter AAA level. Large text, around 24px regular or 18.66px bold and up, only needs 3:1 for AA and 4.5:1 for AAA. Higher is always safer, so when a pair clears the target with room to spare it stays readable across more screens and lighting conditions.
Q2What is the difference between AA and AAA?
AA is the standard most organisations target and the level commonly referenced in accessibility law and procurement. AAA is the enhanced level, with higher ratios that suit text-heavy reading or audiences with low vision. AAA is hard to hit across an entire design, so many teams meet AA everywhere and reach for AAA on body copy and critical content where the extra legibility matters most.
Q3Does this contrast checker send my colours anywhere?
No. Every calculation runs in the browser with client-side JavaScript, and the hex values you enter are never uploaded, logged, or stored. The tool keeps working offline once the page has loaded, which makes it safe for unreleased brand palettes and confidential design work that should not leave your machine.
Q4Why does contrast matter for SEO?
Search engines favour pages that deliver a good experience to every visitor, and readability is part of that. Text users cannot comfortably read drives them away, which raises bounce rate and shortens time on page, both signals that correlate with weaker rankings. Accessible contrast also widens the audience that can engage with the content, so the page earns value from more of the traffic it attracts.
Q5Does contrast only apply to text?
No. WCAG also sets a 3:1 minimum for non-text elements that convey meaning, such as icons, form field borders, focus outlines, and the active states of buttons and links. A page can pass on body copy yet fail because a thin grey input border or a faint placeholder is invisible to some users, so it helps to check the interface controls as well as the prose.
