How do I check color contrast for WCAG 2.2 accessibility?
Drop two hex colors into Ratia and you get a WCAG 2.2 contrast ratio, AA and AAA pass/fail badges for normal, large, and UI sizes, and an APCA Lc score, all in under a second. No account, no setup, no paywall. If the pair fails, Ratia suggests the nearest passing color with your hue and saturation kept intact, and you can copy a permalink that opens the exact same result on anyone else's screen.
That's the short version. The longer version is that most contrast checkers answer the WCAG question and stop there. That made sense in 2015. It makes less sense now that the European Accessibility Act is live and clients are routinely asking for an APCA number on the same page as the WCAG ratio. Ratia was built to answer both questions at once and then help you fix what's broken instead of leaving you to guess.
What is APCA contrast and why does Ratia show it next to the WCAG ratio?
APCA stands for Advanced Perceptual Contrast Algorithm. It's the candidate contrast method for WCAG 3.0, and it reports a signed Lc value instead of a ratio. The short read: APCA accounts for how the human eye actually perceives lightness against different backgrounds, where WCAG 2.x uses a simpler luminance formula that can mislabel certain text as passing when it's hard to read, or failing when it's perfectly legible.
Ratia shows both numbers because the industry is mid-transition. Your compliance report probably still needs WCAG 2.2 AA. Your designer instinct probably trusts APCA for body copy on a tinted surface. Showing them together lets you make the call without flipping between two tools. The APCA score comes from the apca-w3 library pinned to a known version and carries a "draft" label so you always know which standard is which.
How do I find a passing color that's close to my brand color?
This is the part every other free tool skips. When a color pair fails WCAG AA, Ratia computes the nearest lightness-adjusted foreground color and the nearest lightness-adjusted background color that clear 4.5:1, keeps your original hue and saturation, and shows both options side by side with a one-click Apply button. The ratio recalculates, the pass badges flip to green, and the permalink in your address bar already reflects the new pair.
This was the problem one of the designers we talked to kept hitting. She'd pick a brand red, drop it on a warm cream background, and watch WebAIM tell her the pair failed 4.5:1 by a hair. Then she'd spend five or ten minutes in the color picker nudging the hex code, checking, nudging again. Auto-fix collapses that loop into one keystroke. You still own the design decision. The tool just stops hiding the passing color from you.
What contrast ratio do I need for WCAG 2.2 AA?
For normal body text, WCAG 2.2 AA requires a contrast ratio of at least 4.5:1 against the background. Large text (18pt regular or 14pt bold, roughly 24px or 18.66px in web terms) only needs 3:1. UI components and graphical objects, like icon strokes or focus rings, need 3:1 as well. AAA raises the bars to 7:1 for normal text and 4.5:1 for large text.
Ratia displays all five badges on every color pair so you don't have to memorize the thresholds. The contrast ratio itself is rounded to two decimal places and matches WebAIM's output on every test vector in the WCAG reference suite, so an audit result from Ratia holds up against the reference tool auditors cite most. That accuracy was the first thing we tested, because the whole product is worthless if the math is wrong.
Can I share a color contrast result with a client or teammate?
Every contrast pair in Ratia has a permalink. When you change either color, the URL updates in the address bar through history.replaceState, so the link in your clipboard always points at the pair you're actually looking at. Copy Link, paste into Slack, done. No screenshot, no "can you try #E63946 on #F7F5F0 and tell me what you see," no back-and-forth where everyone is looking at slightly different hex values.
Anyone who opens the permalink lands on the tool with the same colors preloaded and the same ratio, APCA score, and auto-fix suggestion waiting for them. It's the part of the workflow screenshots have been quietly blocking for years, and it's why Ratia's URL scheme is dead simple: ?fg=XXXXXX&bg=YYYYYY. You can build that URL by hand if you want. You can also check it against a semi-transparent foreground, because the alpha slider composites the blended color before running the math, so the reported ratio reflects what a user's eye actually receives.
Does Ratia work with semi-transparent (alpha) colors?
Yes. Bring the foreground alpha below 1.0 and Ratia composites it over the background to produce the effective hex value, then runs WCAG and APCA on the blended result. The blended hex is displayed next to the original so you can see what the user's eye is really receiving. Black text at 50% opacity on a white background, for example, blends to roughly #808080 and calculates against that value instead of #000000, which is the behavior designers expect and a handful of older checkers get subtly wrong.
Is Ratia free? Do I need an account?
Ratia is free and will stay free. No account, no pro tier, no email capture. The tool is ad-supported and the ads sit in standard banner slots that don't interrupt the work. The whole thing runs client-side as a static page, which is why it loads fast and why it costs us almost nothing to keep online. That last part matters because it means the free tier can stay genuinely free instead of slowly fencing features behind a paywall the way some competitors have started to.
Open Ratia at appcrib.com/ratia, paste a color pair, and find out whether it passes. If it doesn't, the fix is already on the screen.