Color Contrast Checker (WCAG) 🎨
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
- 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
.vsix file
Requirements
- VS Code 1.85.0 or higher
- Node.js (only for packaging)
| |
