The number you need, and the gradient you will paste

Checking a colour pair for contrast is a two-minute job that most online checkers make into a form-filling job: you pick your colours, and somewhere else on the page you upload the design, or the image, or the whole stylesheet, to get the answer.

The Colour Studio's Contrast & gradient tab does the arithmetic in the tab itself, and it hands you back two things you can use: the WCAG verdicts for your text/background pair, and a ready-to-paste linear-gradient() declaration for the background you were about to write by hand.

What the tab actually contains

The Colour Studio is the OnePassApps tab for colour work. It carries four tool tabs on one page: Picker, Contrast, Palettes, Image. The page sets the terms in one line: "Pick, convert, compare and sample colours on this device. Your values and selected images stay in this browser tab."

The Contrast tab is two panels:

  • 01 Text and background - "Text / foreground colour" and "Background colour". The labels on both are precise about transparency: "Alpha is blended over the background." for the foreground, and "Alpha is blended over white." for the background.
  • 02 CSS gradient - "Start colour" ("First stop"), "End colour" ("Last stop") and "Gradient angle (0–360°)". The angle note is the useful one: "0° runs bottom to top, 90° left to right."

Under the panels the page says "Nothing leaves this tab.", and there are two controls you will want: Swap colours in the panel, and Copy CSS next to the result.

Open it here: the Colour Studio

The result panel, read from a real run

The block that comes back is headed CONTRAST & GRADIENT. It starts by naming the pair it is scoring - "#7C3AED on #FFFFFF · Gradient 45°" in my run - so you can see at a glance that you are reading your own numbers and not a cached example.

Then it gives you the ratio, and the four verdicts that matter:

  • "AA normal text · 4.5:1" - Pass
  • "AA large text · 3:1" - Pass
  • "AAA normal text · 7:1" - Fail
  • "AAA large text · 4.5:1" - Pass

Above them, a summary line reads "Passes" next to AA and "Fails" next to AAA, and the headline is "5.69:1 contrast ratio".

There is also an "Accessible text preview" block that renders your colours as text on the background, with the rule it is judging against spelled out: "Body copy at 16px. Large text is at least 18 pt regular or 14 pt bold."

What I set, and what came back

The tab opens on the default pair, and I checked that first: foreground #1F2937 on background #FFFFFF, gradient #6458D6 to #38BDF8 at 90°. That came back as "14.67:1 contrast ratio", with Passes against both AA and AAA, and the summary line "14.67:1: passes every WCAG text level."

Then I changed the values to something deliberately borderline:

  • foreground #7C3AED
  • background #FFFFFF
  • gradient start #FF0000, end #0000FF, angle 45°

The result panel reported "5.69:1 contrast ratio", "Passes" for AA and "Fails" for AAA, and the four rows matched that reading exactly - AA normal text, AA large text and AAA large text all Pass, AAA normal text Fail.

Under the CSS GRADIENT heading the panel printed the declaration itself:

background: linear-gradient(45deg, #FF0000 0%, #0000FF 100%);

and, underneath it, a one-line verdict: "5.69:1: passes AA for all text, AAA for large text only."

That is the whole loop: type the two colours, read the ratio, copy the gradient.

Why the gradient half is worth having

A contrast check answers a yes/no question. A gradient background makes that question harder, because the background under the text is not one colour - it changes across the element, and the text sits on top of some part of it.

The tab gives you the two ends of the gradient and an angle, and hands back the linear-gradient() line with the stops and the angle already in it. You are not writing "which way does 45 degrees point" from memory in every file you touch; you set it once in the panel and copy the declaration out.

Two practical notes, from what the panel shows rather than from theory:

  • The gradient stops are the two ends of the ramp. The start colour is the "First stop" and the end colour is the "Last stop", so if you care about the text at the top of the element, you want to check the first stop's colour against your text colour, not the last one.
  • The alpha note applies here too. The foreground's alpha is blended over the background and the background's alpha over white, so a translucent text colour is scored against what actually shows behind it rather than against a transparent black.

Where the work happens

OnePassApps is one option here, and I work on OnePassApps - full disclosure, as it should be. The Colour Studio is where this lives, and it runs inside the tab: the colours you type, the gradient you build and the swatches you save stay in that browser tab, and the page says so plainly with "Nothing leaves this tab." The Studio page also states "Processing stays in the current browser tab" and "No account is required for browser-local processing."

The Standard plan is currently free during a promotional period: $0 / month, 100,000 credits every 30 days, no end date set and no card required, with no automatic paid subscription.

The short version

Type the foreground and the background, read the ratio against the four WCAG thresholds, and copy the linear-gradient() declaration for the background you were going to write by hand. All of it happens in the tab, and nothing about your colours is uploaded to get there.

Disclosure: I work on OnePassApps. The behaviour above is what I can verify today, read off the live studio page and from a contrast run I made myself. Limits may change. How the browser-local tools work in general is written up in the app's own guides: app.onepassapps.com/guides.