Pick two colours, see the contrast ratio and whether it passes, and fix it in one click if it does not.
#777777
#ffffff
4.47:1
Passes for large text and UI only. Body text needs 4.5:1.
#7676764.54:1#0606064.52:1Suggestions keep the hue and saturation and move only the lightness, in whichever direction is the smaller change.
A heading at 32px
Large text, 24px. WCAG counts this as large, so the 3:1 threshold applies.
Bold 18.7px also counts as large text.
Body copy at 16px. This is the size most of a page is set in, and the one that has to clear 4.5:1 for AA. Read a whole paragraph of it: if your eye slides off the line, the number was telling you the truth. A link inside a sentence sits at the same size.
Small print at 13px - captions, footnotes, form hints. Still normal text as far as WCAG is concerned.
A button, colours swapped
A bordered control - the 3:1 non-text threshold covers this outline
How It Works
Use the swatches or type into the fields - hex, rgb(), hsl() and CSS colour names all work. Swap flips the text and background. If either colour is translucent, a third field appears for the page behind them.
The contrast ratio appears large, with a pass or fail for AA normal, AA large, AAA normal, AAA large and the 3:1 threshold for borders and icons. The preview below shows real text at those sizes, plus a button and a link.
When a pair falls short, the panel offers the nearest passing shade of each colour. One click applies it. Publish a share page to send the result to a client or a colleague on a live link.
About This Tool
It measures the WCAG contrast ratio between two colours, tells you which levels they pass, and works out the closest colour that would pass instead.
Search for a color contrast checker and you get a dozen tools that print a number and stop there. A number is only half an answer. This one gives you the colour contrast ratio, the pass or fail for all five WCAG thresholds, a live sample of real text in your colours, and - the part that actually saves time - the nearest shade that would clear the level you are aiming at, applied in one click.
Anyone choosing colours for something other people will read. A designer settling on a muted grey for captions, a founder picking brand colours for a landing page, a student whose assignment has an accessibility rubric, or someone who asked an AI for a page and now has to justify it. You do not need to know what WCAG stands for to use it: pick your two colours, read the badge, take the suggested fix if there is one.
The maths is the WCAG 2 formula, not an approximation. Each sRGB channel is linearised, weighted 0.2126 red, 0.7152 green and 0.0722 blue into a relative luminance, and the two luminances become a ratio of (lighter + 0.05) to (darker + 0.05). Black on white is 21:1 and any colour on itself is 1:1. The figure is shown to two decimals and always rounded down, so the number can never disagree with the badge beside it. Everything happens in your browser; no colour you type is sent anywhere.
Transparency gets handled properly, which is where most tools quietly go wrong. A contrast ratio is only defined between two opaque colours, so if either value carries alpha - an #rrggbbaa hex, an rgba(), a translucent overlay - a third field appears for the page background, the background is composited over it, the text is composited over that, and the panel says which colours it actually measured.
It checks one pair at a time, plus a palette matrix for comparing several at once. It cannot scan a live URL or an HTML file and find every failing pair on the page, it does not know whether your text sits over a photograph or a gradient, and it does not simulate colour blindness. It tells you whether a colour is legible, never whether it is right. If you are working on the CSS that carries these values, the CSS formatter will make them easier to find, and the responsive tester shows the same page at phone and desktop widths.
An accessibility contrast checker is most useful when the result reaches whoever picked the colour. The publish button puts a one-page record of the check - the pair, the ratio, the badges and a sample - on a free OxyPages subdomain with HTTPS, in seconds, with no account. That link lasts 30 minutes; claiming it is free and keeps it permanently with your own address, and paid plans add a custom domain. Instant publishing accepts pages up to 5 MB. See how it works or compare plans.
Questions
More Free Tools
Every tool here runs in your browser and ends the same way: one click and your HTML is on a live link.
Tidy minified or messy CSS with consistent indentation, one rule per line and sorted braces. Runs in your browser. Copy or download the result.
Generate title, description, Open Graph and Twitter card tags for your page and see how it will look on Google, Facebook, X and WhatsApp before you publish.
See how your HTML looks on phones, tablets and desktops side by side. Paste HTML or drop a file, pick real device widths, then publish it live in one click.
Try It Now
Still Here? Drop It In.
The whole pitch fits in one sentence: your HTML, on a link, in seconds.
Drag and drop your HTML file(s), folders, or ZIP file
or ·
No account needed. Your unclaimed website stays live for 30 minutes on a free subdomain. Claim it to your account to keep it permanently.