WCAG Color Contrast Checker - Check Color Accessibility Online
Check color contrast ratios for WCAG 2.1 AA and AAA compliance. Get instant pass/fail results for normal text, large text, and UI components — 100% client-side.
Frequently Asked Questions
What is a WCAG Color Contrast Checker?
A WCAG Color Contrast Checker is an online tool that calculates the contrast ratio between two colors (typically foreground text and background) and evaluates whether the combination meets the Web Content Accessibility Guidelines (WCAG) 2.1 accessibility standards. It checks compliance at two levels: AA (minimum, requiring 4.5:1 for normal text) and AAA (enhanced, requiring 7:1 for normal text), helping developers and designers ensure their content is readable for all users, including those with low vision.
How do I use this tool?
Enter a foreground (text) color using HEX, RGB, or HSL format, or use the color picker. Then enter a background color using the same methods. The contrast ratio is calculated and displayed instantly. Review the WCAG compliance table showing pass/fail status for AA and AAA levels across normal text, large text, and UI components. If the combination fails, check the suggested alternative colors. Use the swap button to reverse foreground and background colors.
Is my color data safe? Does it get sent to a server?
Your color data is 100% safe and never leaves your browser. The contrast ratio calculation uses a standard mathematical formula (relative luminance + ratio) that runs entirely in client-side JavaScript. No color values, results, or any other data is transmitted to any server. This makes the tool safe for working with proprietary brand colors, unreleased design systems, and confidential project assets.
What is the difference between WCAG AA and AAA?
WCAG AA is the minimum conformance level that most accessibility laws and regulations require. It demands a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG AAA is the enhanced conformance level that provides superior readability, requiring 7:1 for normal text and 4.5:1 for large text. While AAA is not always achievable for entire websites, it is recommended for body text and critical content where maximum readability is desired.
What counts as 'large text' in WCAG?
According to WCAG 2.1, large text is defined as text that is at least 18 point (24px) in regular weight, or at least 14 point (18.5px) in bold weight. Large text has lower contrast requirements (3:1 for AA, 4.5:1 for AAA) because larger characters are inherently easier to read.
What is the contrast ratio formula?
The WCAG 2.1 contrast ratio is calculated in three steps: (1) Convert each sRGB color channel to linear light using gamma correction, (2) Calculate relative luminance using the weighted formula L = 0.2126*R + 0.7152*G + 0.0722*B, (3) Compute the ratio as (L_lighter + 0.05) / (L_darker + 0.05). The result ranges from 1:1 (identical colors) to 21:1 (maximum contrast, black on white).
What does 'UI Components' or 'Non-text Contrast' mean?
WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast) requires a minimum 3:1 contrast ratio for visual elements that convey information, such as form field borders, button outlines, focus indicators, icons, and chart elements. This is separate from text contrast requirements and ensures that interactive components and meaningful graphics are distinguishable for users with low vision.
Code Examples
// WCAG Color Contrast Checker
function sRGBtoLinear(channel) {
const c = channel / 255;
return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
}
function getRelativeLuminance(r, g, b) {
return (
0.2126 * sRGBtoLinear(r) +
0.7152 * sRGBtoLinear(g) +
0.0722 * sRGBtoLinear(b)
);
}
function getContrastRatio(fg, bg) {
const l1 = getRelativeLuminance(...fg);
const l2 = getRelativeLuminance(...bg);
const lighter = Math.max(l1, l2);
const darker = Math.min(l1, l2);
return (lighter + 0.05) / (darker + 0.05);
}
function checkWCAG(ratio) {
return {
ratio: parseFloat(ratio.toFixed(2)),
aa: {
normalText: ratio >= 4.5,
largeText: ratio >= 3,
uiComponents: ratio >= 3,
},
aaa: {
normalText: ratio >= 7,
largeText: ratio >= 4.5,
},
};
}
// Usage
const fg = [26, 26, 26];
const bg = [255, 255, 255];
const ratio = getContrastRatio(fg, bg);
console.log(`Contrast Ratio: ${ratio.toFixed(2)}:1`);
const result = checkWCAG(ratio);
console.log('AA Normal Text:', result.aa.normalText ? 'Pass' : 'Fail');
console.log('AAA Normal Text:', result.aaa.normalText ? 'Pass' : 'Fail');