VS Code extension to verify and improve color contrast accessibility according to WCAG 2.1 guidelines.
Features
- ✅ Contrast ratio calculation according to official WCAG 2.1 formula
- 🏆 AA and AAA levels for normal text and large text
- 🎯 Real-time preview of how your color combination will look
- 💡 Automatic suggestions for accessible colors when the combination fails
- 📋 One-click copy the suggested color to clipboard
- 🖱️ Detect HEX colors from selected code in the editor
How to use
Sidebar panel
- Click on the 🎨 icon in the activity bar
- Enter background and text colors (format
#RRGGBB) - Click Analyze Contrast
- If not accessible, click on a suggestion to copy it
From the editor
- Select text containing HEX colors in your code
- Right-click → "Color Contrast: Analyze selected colors"
- The panel will open automatically with the detected colors
Keyboard shortcut
Ctrl+Shift+K(Windows/Linux) /Cmd+Shift+K(Mac) — Open the panel
WCAG 2.1 Levels
| Level | Normal text | Large text (18pt+ / bold) |
|---|---|---|
| AA | ≥ 4.5:1 | ≥ 3:1 |
| AAA | ≥ 7:1 | ≥ 4.5:1 |
Installation from source
# 1. Clone/download the project
# 2. Install dependencies
npm install
# 3. Package the extension
npm run package
# 4. Install the generated .vsix in VS Code:
# Extensions → ··· → Install from VSIX
Manual .vsix installation
In VS Code:
- Open the command palette (
Ctrl+Shift+P) - Search for "Extensions: Install from VSIX..."
- Select the generated
.vsixfile
Requirements
- VS Code 1.85.0 or higher
- Node.js (only for packaging)