WCAG 2.1 color contrast ratio calculator and accessibility compliance checker for Node.js and browsers.
- Calculate contrast ratios between two colors
- Check WCAG 2.1 AA and AAA compliance
- Support for normal and large text sizes
- Lightweight with zero dependencies
- Works in Node.js and browsers
- Full test coverage
npm install color-contrast-checkerconst { getContrastRatio, checkWCAG, checkAllLevels } = require('color-contrast-checker');
// Get contrast ratio
const ratio = getContrastRatio('#000000', '#FFFFFF');
console.log(ratio); // 21
// Check WCAG compliance
const result = checkWCAG('#767676', '#FFFFFF', 'AA', 'normal');
console.log(result);
// { ratio: 4.54, pass: true, level: 'AA', size: 'normal', threshold: 4.5 }
// Check all WCAG levels at once
const all = checkAllLevels('#767676', '#FFFFFF');
console.log(all.AA.normal.pass); // true
console.log(all.AAA.normal.pass); // falseCalculate the contrast ratio between two colors.
- color1 (string): Hex color code (e.g., '#000000')
- color2 (string): Hex color code (e.g., '#FFFFFF')
- Returns: Number - Contrast ratio (1-21)
Check if color combination meets WCAG standards.
- color1 (string): Foreground hex color
- color2 (string): Background hex color
- level (string): 'AA' or 'AAA'
- size (string): 'normal' or 'large'
- Returns: Object with ratio, pass status, and threshold
Check all WCAG levels (AA/AAA, normal/large) at once.
- color1 (string): Foreground hex color
- color2 (string): Background hex color
- Returns: Object with results for all combinations
| Level | Normal Text | Large Text |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Large text is defined as 18pt+ or 14pt+ bold.
// Check if text is readable
const readable = checkWCAG('#595959', '#FFFFFF', 'AAA', 'normal');
if (readable.pass) {
console.log('Text is highly readable!');
}
// Find contrast ratio
const ratio = getContrastRatio('#FF0000', '#00FF00');
console.log(`Contrast ratio: ${ratio.toFixed(2)}:1`);
// Validate design system colors
const colors = [
{ fg: '#333333', bg: '#FFFFFF' },
{ fg: '#FFFFFF', bg: '#0066CC' }
];
colors.forEach(({ fg, bg }) => {
const result = checkWCAG(fg, bg, 'AA', 'normal');
console.log(`${fg} on ${bg}: ${result.pass ? 'PASS' : 'FAIL'}`);
});npm test<script src="color-contrast-checker.js"></script>
<script>
const ratio = colorContrast.getContrastRatio('#000', '#FFF');
console.log(ratio);
</script>Contributions welcome! Please open an issue or PR.
CC0 1.0 Universal - Public Domain