How to Check Color Contrast for Accessibility — WCAG Guide
Your design looks clean, the colors feel right — but can everyone actually read it? A quick contrast check tells you in seconds.
You pick a nice medium gray for body text, pair it with a soft cream background, and everything looks elegant on your calibrated monitor. Then a client opens the site on a phone in direct sunlight and can't read a word. Or a user with low vision gives up after ten seconds. The problem isn't your taste — it's physics. Human eyes need a measurable difference in luminance between text and background to parse letterforms reliably, and WCAG puts a number on exactly how much.
Scanly's Contrast Checker lets you upload any screenshot, pick two colors with an eyedropper, and see the exact ratio with AA/AAA pass/fail results — free, no signup, everything in your browser. Try it free →
Check Contrast FreeThe Numbers Behind Readability
WCAG 2.1 defines four contrast thresholds. AA Normal requires 4.5:1 — this is the standard most accessibility audits check and most laws reference. AA Large drops to 3:1 for text at 18px bold or 24px regular, because bigger characters are easier to read even at lower contrast. AAA Normal is 7:1 — the enhanced standard recommended for body text on sites that serve older users, medical audiences, or anyone in challenging reading conditions. AAA Large is 4.5:1.
These aren't arbitrary numbers. They come from research on reading speed and error rates for people with approximately 20/40 vision — the threshold where you'd get a corrective lens prescription but could still legally drive in most places. Roughly 1 in 12 men and 1 in 200 women have some form of color vision deficiency on top of that. A ratio that passes AA means the text is readable for the vast majority of your audience under normal conditions.
The ratio itself is calculated from relative luminance — a weighted measure of how bright a color appears to the human eye. It accounts for the fact that we're far more sensitive to green light than red, and more sensitive to red than blue. Two colors can look different (blue vs. orange) but have nearly identical luminance, making them terrible for text/background pairing. The ratio strips away hue and saturation and asks one question: is there enough brightness difference for letterforms to be distinguishable?
Checking Contrast from a Design Screenshot
Open the Contrast Checker and upload a screenshot of your website, app, Figma export, or any design mockup. The image loads onto a canvas with a crosshair cursor.
Click once to pick the foreground (text) color. A zoom loupe at 8× magnification appears so you can target the exact pixel — important when anti-aliased text blends into the background at the edges. The tool reads the RGB value directly from the canvas and displays the hex code.
Click again to pick the background color. The contrast ratio updates instantly, and four pass/fail badges show you the AA Normal, AA Large, AAA Normal, and AAA Large results. A live text preview renders your foreground color on your background color at actual size, so you can judge the pairing visually alongside the numbers.
Already know your hex values? Type them directly into the input fields — no image upload needed. The Swap button reverses foreground and background, useful for checking how inverted text (light text on dark background) performs with the same pair.
When AA Is Enough and When You Need AAA
For most websites and apps, AA Normal (4.5:1) is the target. It's the level referenced by the ADA, the European Accessibility Act, and Section 508 in the US. If your site passes AA across all text elements, you're meeting the legal standard and serving the overwhelming majority of users well.
AAA (7:1) matters more in specific contexts. Medical sites where misreading dosage information has consequences. Government forms where elderly users are a primary audience. E-commerce checkout flows where friction from poor readability directly costs revenue. Long-form reading apps where users spend 20+ minutes with the text. In these cases, the jump from 4.5:1 to 7:1 measurably reduces reading fatigue and error rates.
One practical note: AAA is hard to achieve with colored backgrounds. A medium blue background with white text might hit 5:1 — solid AA but short of AAA. Pushing to 7:1 often means desaturating the background until it's nearly gray. That's a design tradeoff, not a failure. Target AAA for body text on your primary reading surfaces and accept AA for accent areas, buttons, and secondary text.
Common Contrast Mistakes in Real Projects
Placeholder text. Form input placeholders are notoriously low-contrast — light gray on white, often around 2:1. Designers argue that placeholders are hints, not content, but WCAG makes no exception. If a user needs to read it to use the form, it needs 4.5:1. Darken your placeholder color or use visible labels above the input instead.
Text on images. A white heading on a photograph works on the dark part of the image and vanishes on the light part. The contrast ratio changes pixel by pixel. Fix this with a semi-transparent overlay behind the text (a dark scrim) or a text shadow — then check the contrast against the overlay color, not the image.
Disabled states. Grayed-out buttons and inactive form elements are exempt from WCAG contrast requirements (they're not meant to be interacted with). But if users can't tell that something is disabled versus just poorly styled, you have a different usability problem. Make sure disabled elements are visually distinct through means beyond just low contrast — reduced opacity, strikethrough, or an icon.
Links that rely on color alone. A link styled in a slightly different shade of your body text color might technically pass contrast against the background — but WCAG 1.4.1 separately requires that links be distinguishable from surrounding text by something other than color alone (underline, bold, icon). Contrast ratio handles the text-vs-background relationship, not the text-vs-other-text relationship.
Dark mode afterthought. Light mode gets the design attention. Dark mode gets auto-inverted colors that nobody checks. A text color that works at 8:1 on white might drop to 2.5:1 on a dark gray background. Test both themes separately — screenshot each and run them through the Contrast Checker.
Fixing Failed Contrast Without Ruining Your Design
When a color pair fails, the instinct is to crank the text to black or the background to white. That works but throws away design intent. There are subtler moves.
Shift luminance, not hue. If your brand's teal text on white fails at 3.8:1, darken the teal until it passes. The hue stays recognizably teal, but the lightness value drops enough to cross 4.5:1. Most design tools let you adjust the L channel in HSL independently.
Increase font size or weight. If your color combination hits 3.5:1 — failing AA Normal but passing AA Large — bumping the text from 16px to 18px bold moves it into the large-text category where 3:1 is the threshold. This only works for headings and UI elements, not body copy.
Add a border or background fill. A low-contrast button label becomes legible if the button has a visible border. The text doesn't need to contrast with the page background — only with its immediate background surface. A pill-shaped tag with a light fill behind dark text can use a lighter text color than bare text on the same page.
Check how your revised colors look to color-blind users by running the same screenshot through the Color Blindness Simulator. A pair that passes contrast numerically might still be confusing for deuteranopia (red-green) if both colors shift to the same perceived hue. For a broader palette analysis, try the Color Palette Extractor to see all the dominant colors in your design at once.
Beyond Color Ratio — What Contrast Doesn't Catch
WCAG contrast ratio is one metric, not the whole picture. A 7:1 ratio with a terrible font at 11px is technically compliant and practically unreadable. A 4.5:1 ratio with generous line height and a well-hinted typeface at 16px reads easily.
Font rendering varies across platforms. The same color pair renders differently on macOS (subpixel antialiasing, heavier rendering) versus Windows (ClearType, thinner strokes). A ratio that looks comfortable on a Mac might feel thin on Windows. Test on both if your audience uses both — and if you're checking from a screenshot, remember the screenshot captures rendering as it appeared on that specific device.
Non-text elements have their own WCAG rule. Icons, chart lines, form borders, and focus indicators need a 3:1 ratio against adjacent colors (WCAG 1.4.11). The Contrast Checker works for these too — pick the icon color and its background, check the ratio. For a full tonal analysis of your image, the Histogram Analyzer breaks down the luminance distribution across all pixels.
If you're working with image-heavy pages, checking overall image quality alongside contrast ensures your visuals hold up across devices. And if your images contain text overlays, run them through the Image Filters tool to adjust brightness and contrast at the image level before compositing.
4.5:1 Is a Floor, Not a Ceiling
Accessibility standards exist because people quietly leave sites they can't read. They don't file complaints or send feedback — they just close the tab. A 30-second contrast check on a design screenshot catches problems that would otherwise reach production and silently cost you users.
The tool runs entirely in your browser, handles any image format, and gives you a clear pass or fail against every WCAG threshold. No signup, no upload, no excuses left for shipping low-contrast text.