[{"data":1,"prerenderedAt":318},["ShallowReactive",2],{"journal-vantra-tools-overview":3},{"id":4,"title":5,"author":6,"body":9,"dateModified":305,"datePublished":306,"description":307,"extension":308,"lede":309,"meta":312,"navigation":313,"path":314,"seo":315,"stem":316,"__hash__":317},"journal\u002Fjournal\u002Fvantra-tools-overview.md","Vantra tools: eleven free utilities and the Contrast Checker up close",{"name":7,"role":8},"Kai Kauper","Design systems lead",{"type":10,"value":11,"toc":296},"minimark",[12,17,21,159,163,182,190,194,197,200,203,207,210,277,280,283,287,293],[13,14,16],"h2",{"id":15},"what-tools-does-vantra-include","What tools does Vantra include?",[18,19,20],"p",{},"All eleven utilities run in the browser, require no account, and compute everything locally. Nothing is uploaded. The set covers the arithmetic underneath a design system: the contrast ratios, type scales, spacing grids, and motion curves that are boring to calculate by hand and easy to get wrong by eye.",[22,23,24,40],"table",{},[25,26,27],"thead",{},[28,29,30,34,37],"tr",{},[31,32,33],"th",{},"Tool",[31,35,36],{},"Discipline",[31,38,39],{},"What it does",[41,42,43,55,66,77,87,97,107,118,129,139,149],"tbody",{},[28,44,45,49,52],{},[46,47,48],"td",{},"Contrast Checker",[46,50,51],{},"Colour",[46,53,54],{},"WCAG contrast between two colours, with the Vantra palette as presets.",[28,56,57,60,63],{},[46,58,59],{},"Aspect Ratio Calculator",[46,61,62],{},"Layout",[46,64,65],{},"Ratio to dimension, dimension to ratio, and proportional resize.",[28,67,68,71,74],{},[46,69,70],{},"Font Pairing Studio",[46,72,73],{},"Type",[46,75,76],{},"Curated typeface combinations, previewed as real editorial spreads.",[28,78,79,82,84],{},[46,80,81],{},"Modular Type Scale",[46,83,73],{},[46,85,86],{},"A fluid or static typographic scale, as a specimen page. Emits clamp() per step.",[28,88,89,92,94],{},[46,90,91],{},"Spacing Scale Generator",[46,93,62],{},[46,95,96],{},"Ten spacing tokens on a 4pt or 8pt grid, fluid or static, drawn to proportion.",[28,98,99,102,104],{},[46,100,101],{},"Shade & Tint Generator",[46,103,51],{},[46,105,106],{},"A ten-step colour ramp from one hex value, contrast-checked at every step.",[28,108,109,112,115],{},[46,110,111],{},"Easing Curve Visualizer",[46,113,114],{},"Motion",[46,116,117],{},"A cubic-bezier editor with a live preview and a keyboard-driven curve.",[28,119,120,123,126],{},[46,121,122],{},"Unit Converter",[46,124,125],{},"Units",[46,127,128],{},"px, rem, em and pt, converted live against an adjustable root font size.",[28,130,131,134,136],{},[46,132,133],{},"Radius & Shadow Playground",[46,135,62],{},[46,137,138],{},"Layered box-shadow and border-radius, previewed on a real content card.",[28,140,141,144,146],{},[46,142,143],{},"CSS clamp() Calculator",[46,145,125],{},[46,147,148],{},"One fluid value for a one-off size, with a viewport simulator to prove it.",[28,150,151,154,156],{},[46,152,153],{},"Grid & Flex Builder",[46,155,62],{},[46,157,158],{},"A visual grid and flex builder with subgrid, emitting plain CSS or Tailwind v4 classes.",[13,160,162],{"id":161},"what-about-the-larger-products","What about the larger products?",[18,164,165,166,171,172,176,177,181],{},"Beyond the utilities, Vantra includes five products that work at a longer timescale. The ",[167,168,170],"a",{"href":169},"\u002Fwork\u002Faccessibility-auto-fixer","Accessibility Auto-Fixer"," finds contrast and ARIA failures on a rendered page and proposes fixes as diffs. The AI Design Reviewer compares a component against the design system it claims to belong to. The ",[167,173,175],{"href":174},"\u002Fwork\u002Fdeprecation-lifecycle-orchestrator","Deprecation Lifecycle Orchestrator"," tracks a removal from announcement to the last consumer. The ",[167,178,180],{"href":179},"\u002Fwork\u002Fdesign-system-maturity-check","Design System Maturity Check"," scores documentation, versioning, governance and adoption across 24 questions and returns next steps.",[18,183,184,185,189],{},"These are different from the utilities in one important way: they are not quick-answer tools. They watch a system, or assess it, or track a change through its lifecycle. Most of them read your repository through ",[167,186,188],{"href":187},"\u002Fhow-it-works","Vantra Core",", which is why their findings cite your specific tokens and components rather than checking against a generic set of rules.",[13,191,193],{"id":192},"the-contrast-checker-what-it-calculates","The Contrast Checker: what it calculates",[18,195,196],{},"The Contrast Checker takes two colours, computes the WCAG 2.2 contrast ratio, and reports whether the combination passes AA, AAA, or neither — at both normal and large text sizes. It is the first tool on the shelf and in some ways the simplest, but contrast checking is where design decisions and accessibility requirements meet most directly.",[18,198,199],{},"Under the hood, each colour's hex value is converted to relative luminance: the RGB channels are linearised and weighted — 0.2126 red, 0.7152 green, 0.0722 blue — reflecting human sensitivity to green light. The ratio is then (lighter + 0.05) \u002F (darker + 0.05), producing a value between 1:1 and 21:1.",[18,201,202],{},"The Vantra palette is built in as presets, so checking your own tokens against each other is a selection rather than a copy-paste exercise. The output includes the exact ratio, the pass\u002Ffail verdict at each WCAG level, and a copy-ready CSS comment documenting the result — useful for embedding the accessibility decision directly in the stylesheet where the colour is declared.",[13,204,206],{"id":205},"why-does-contrast-checking-matter","Why does contrast checking matter?",[18,208,209],{},"WCAG 2.2 success criterion 1.4.3 requires body text to meet a minimum contrast ratio of 4.5:1 against its background at AA conformance. Large text — 24px and above, or 19px bold — needs 3:1. Non-text elements such as input borders and focus indicators need 3:1 under criterion 1.4.11.",[22,211,212,225],{},[25,213,214],{},[28,215,216,219,222],{},[31,217,218],{},"Content",[31,220,221],{},"AA minimum",[31,223,224],{},"AAA minimum",[41,226,227,238,248,258,268],{},[28,228,229,232,235],{},[46,230,231],{},"Body text (under 24px)",[46,233,234],{},"4.5:1",[46,236,237],{},"7:1",[28,239,240,243,246],{},[46,241,242],{},"Large text (24px+, or 19px bold)",[46,244,245],{},"3:1",[46,247,234],{},[28,249,250,253,255],{},[46,251,252],{},"UI components and graphics",[46,254,245],{},[46,256,257],{},"No higher requirement",[28,259,260,263,266],{},[46,261,262],{},"Disabled controls",[46,264,265],{},"Exempt",[46,267,265],{},[28,269,270,273,275],{},[46,271,272],{},"Logotypes",[46,274,265],{},[46,276,265],{},[18,278,279],{},"These are not aspirational targets. In the EU (European Accessibility Act), the US (Section 508), and the UK (Equality Act), WCAG conformance carries legal weight. A contrast failure is both an accessibility barrier for real people and, increasingly, a compliance risk for the organisation shipping it.",[18,281,282],{},"The practical problem is not that teams do not care about contrast. It is that checking happens too late: after the design tokens are set, after the theme is implemented, after the component is reused eleven times. A contrast checker available during the design decision — while the colour is still being chosen — prevents the failure instead of reporting it.",[13,284,286],{"id":285},"from-the-contrast-checker-to-the-auto-fixer","From the Contrast Checker to the Auto-Fixer",[18,288,289,290,292],{},"The Contrast Checker answers a question about two colours you already know. The ",[167,291,170],{"href":169}," answers the same question about every colour pair on a rendered page, including the ones you did not know were there — inherited opacity, cascaded backgrounds, theme overrides that resolve differently at runtime.",[18,294,295],{},"They are two views of the same problem at different scales. The utility is for the moment of choosing a colour. The product is for the moment of checking whether all the choices still hold after the page is assembled. Together they cover the contrast lifecycle from decision to verification — and because both use the same WCAG formula, their verdicts agree.",{"title":297,"searchDepth":298,"depth":298,"links":299},"",2,[300,301,302,303,304],{"id":15,"depth":298,"text":16},{"id":161,"depth":298,"text":162},{"id":192,"depth":298,"text":193},{"id":205,"depth":298,"text":206},{"id":285,"depth":298,"text":286},null,"2026-08-14","All eleven free Vantra browser tools in one list, plus a deep dive on the Contrast Checker — what it calculates and why contrast matters.","md",[310,311],"Vantra currently includes [eleven free browser tools](\u002Ftools) for colour, type, layout, motion and unit work, plus five products that watch design systems over time. This article covers both: a scannable overview of every tool and what it does, followed by a closer look at the [Contrast Checker](\u002Ftools\u002Fcontrast-checker).","The Contrast Checker was chosen for the deep dive because it connects directly to Vantra's core mission — accessibility — and because it illustrates the relationship between the quick-answer utilities and the longer-running products like the [Accessibility Auto-Fixer](\u002Fwork\u002Faccessibility-auto-fixer).",{},true,"\u002Fjournal\u002Fvantra-tools-overview",{"title":5,"description":307},"journal\u002Fvantra-tools-overview","p9FDrgKS-Tt_cHTZ2BzcaEikgo0G3TT9VTdG2Ep5gQ8",1786959446782]