WCAG rating

--jib-wcag-rating() takes two colors and returns their WCAG 2.x rating as a string: "AAA", "AA", "AA Large" or "Fail".

It is the odd one out in this package. Every other function returns a color; this one returns a string, which means content is the property it exists for, and it means there can be no utility form. A class can set a color. A class cannot compute a word.

Chromium only

This one is Chromium-only for a deeper reason than the rest. Turning a color into a string needs if(style()), and no other engine has it. There is no stable fallback to drop back to, so unlike the color transforms this capability is genuinely absent elsewhere rather than merely differently implemented.

Its partner text-contrast-* is stable and works everywhere. An element carrying both gets an accessible color in every browser and a printed rating only in Chromium.

Quick reference

Call	Returns
--jib-wcag-rating(<bg>, <fg>)	"AAA", "AA", "AA Large" or "Fail" for that pair

Argument order does not change the answer. Contrast is symmetric, and the function tests the pair rather than assuming which one is the text.

Printing a rating

The natural home is a pseudo-element, where the string becomes visible content.

solved for aaa

plain white

<div
  class="bg-teal-500 text-white
         after:content-[--jib-wcag-rating(var(--color-teal-500),white)]"
>
  plain white
</div>

The two tiles carry the same background. The left one takes its text color from --jib-auto-contrast() and the badge confirms the level it asked for; the right one uses plain white and the badge reports what that actually scores. Nothing is hard-coded in either label.

Grading a set of pairs

Because the rating is computed rather than written down, a grid like this stays honest when the colors change.

teal-950

teal-700

teal-500

teal-300

White text over the teal ramp, each tile reporting its own score. The pass boundary is somewhere in the middle of the ramp and the labels find it without being told where it is.

Where the boundary sits

WCAG asks for a ratio of at least the threshold, so a pair landing exactly on 4.5:1 is AA. A bare step function would return "Fail" at exactly zero margin, so the thresholds carry a small epsilon, about 5 × 10⁻⁴ in ratio terms, and an exact tie resolves in favour of passing.

That tolerance is not cosmetic. --jib-auto-contrast() hits its ratio exactly, which produces ties by design. Without the epsilon this function would contradict the solve sitting next to it on the same element.

The packaged form

Wiring content onto a pseudo-element by hand is fine once. For the common case of "put a live rating on this element", the wcag-badge utility does it for you: it reads the element's own background and text color, calls this function, and positions the result.

Reach for the raw function when you want the string somewhere a badge does not go, or when you want to grade a pair neither of which is on the element.

Import

--jib-wcag-rating() ships in the functions module. The badge utility is a separate module and can be taken on its own.

@import 'tw-jib-css';
@import 'tw-jib-css-experimental/functions';

Baseline status

What these utilities are built on, live from the Web Platform Dashboard.