VS Code Contrast and WCAG checks as you write, with fixes you can apply

• VS Code 1.74 or newer.
• A project with CSS, SCSS, Less or markup to check.
• No account. The color and accessibility checks run on your machine.

1. 01

   Install Auric Color

   In VS Code, open Extensions with Ctrl + Shift + X, search for Auric Color and choose Install. From a terminal, the command below does the same.

   Terminal

   code --install-extension auric-artisan.auric-color

2. 02

   Set your contrast target

   The default is 4.5:1, WCAG AA for body text, reported as a warning. Use 7 for AAA, or 3 where only large text and interface parts are checked. Add the settings to your user or workspace settings.json.

   settings.json

   {
     "auricColor.contrast.threshold": 4.5,
     "auricColor.contrast.severity": "warning",
     "auricColor.contrast.standard": "wcag2"
   }

3. 03

   Open a stylesheet

   Open any CSS file in the project. A pair that misses the target is underlined, and the same message appears in the Problems panel.

   You should see: A wavy underline under the failing color, with the ratio, the target and the WCAG criterion in its message.

4. 04

   Add Auric Accessibility for markup

   Install it the same way, then run Scan Project for Accessibility from the Command Palette. It targets WCAG 2.2 unless you change the profile.

   Terminal

   code --install-extension auric-artisan.auric-a11y

   You should see: The Project Issues view, listing each finding with its success criterion and level.

.note {
  color: #8a8a8a;
  background: #ffffff;
}

.note {
  color: #767676;
  background: #ffffff;
}

1. Put the cursor on the underlined color and press Ctrl + ., or click the light bulb.
2. Choose the quick fix. It replaces the text color with the nearest one that reaches the target and keeps the background.
3. To fix every pair in the file at once, run Fix All Contrast Issues in File from the Command Palette; it shows each change before applying them as one undoable edit.

Keyboard shortcuts

• It checks the pairs it can read from the source: a color and a background in the same rule, inline styles, CSS-in-JS and the var() tokens it can resolve. Colors set by script at runtime are not checked.
• When a rule has no background of its own, it assumes the page background, says Possible low contrast and asks you to verify the real one.
• The quick fix moves the text color, keeping its hue. Check a brand color before you accept the change.
• The Auric extensions are on the Visual Studio Marketplace, not on Open VSX.

• Contrast and WCAG checks run locally, with no account.

• Auric Accessibility keeps its scan cache in a .auric-artisan folder in the workspace. Add it to .gitignore, or turn the folder off with auricA11y.data.enabled.

• Auric Color on the catalog
• Auric Accessibility on the catalog
• Packs, every install command and .vsix files
• Privacy for every Auric extension
• Check one pair in the contrast checker
• Accessible color and WCAG contrast, explained

Other integrations

• Browser extensionCheck and fix contrast on the page in front of you.
• REST APIConvert colors and check pairs from a server or a script.
• Design tokensExport one token system to Tailwind, CSS or Figma.
• Contrast embedPut a contrast checker on your own page.
• Tailwind themeStart a Tailwind v4 project with accessible components.
• React tokensTheme a React app from the token export.
• Figma variablesTurn Figma variables into CSS tokens.
• Contrast in CICheck your color pairs on every pull request.