ContrastChecker
Ensure WCAG accessibility compliance with our live color contrast calculator.
Quick AnswerRead Full Explanation Show Less A contrast checker is a tool that measures the visual contrast between two colors to ensure text is accessible per WCAG guidelines.
Short Answer
A color contrast checker evaluates the luminance difference between text and background colors against WCAG guidelines. By inputting hex/RGB values, it outputs a ratio (1:1–21:1) and pass/fail for AA/AAA levels. This helps designers catch low-contrast issues early, improving accessibility for users with visual impairments.
Detailed Explanation
Comprehensive Overview
Color Setup
Contrast Ratio
Poor contrast. These colors fail WCAG guidelines and should not be used together for text.
WCAG AA Normal
4.5:1 minimum
WCAG AA Large
3.0:1 minimum
WCAG AAA Normal
7.0:1 minimum
WCAG AAA Large
4.5:1 minimum
Live UI Preview
The Quick Brown Fox Jumps Over The Lazy Dog
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
What Is Color Contrast?
Definition
In digital design, color contrast is the perceived difference in brightness (luminance) between a foreground element—like text, icons, or borders—and the background color it sits on. A high color contrast ensures that elements stand out clearly, making the content legible.
Why It Matters
For users with normal vision, poor contrast simply causes eye strain. But for individuals with low vision, color blindness, or age-related visual impairments, poor contrast can render a website entirely unusable. Good contrast is a core tenet of inclusive design.
Key Facts
- Improves readability for low-vision users
- Reduces eye strain and improves comprehension
- Increases user engagement and trust
- Helps meet legal accessibility standards (ADA)
WCAG Guidelines
| WCAG Level | Normal Text Contrast | Large Text Contrast | Non-text Elements |
|---|---|---|---|
| AA (Minimum) | 4.5:1 | 3:1 | 3:1 (UI elements) |
| AAA (Enhanced) | 7:1 | 4.5:1 | 3:1 (UI elements) |
Examples of Pass/Fail
| Color Pair | Contrast Ratio | Result |
|---|---|---|
| Black (#000000) on White (#FFFFFF) | 21:1 | Pass AAA |
| Dark Gray (#595959) on White | 4.5:1 | Pass AA |
| Orange (#FFA500) on White | 2.6:1 | Fail AA |
| Adjusted Orange (#E65C00) on White | 4.7:1 | Pass AA |
Common Mistakes to Avoid
Developer Code Examples
const a = [r, g, b].map(function (v) {
v /= 255;
return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
});
return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
}
const lighter = Math.max(l1, l2);
const darker = Math.min(l1, l2);
return (lighter + 0.05) / (darker + 0.05);
}
Calculation Formula
Where:
L1 is the relative luminance of the lighter color.
L2 is the relative luminance of the darker color.
Luminance values range from 0 (pure black) to 1 (pure white).
Best Practices
Common Use Cases
Browser Support
Troubleshooting
Glossary
Luminance
The relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white.
Contrast Ratio
A property of a display system, defined as the ratio of the luminance of the brightest color (white) to that of the darkest color (black) that the system is capable of producing.
WCAG
Web Content Accessibility Guidelines. A set of guidelines for making web content more accessible to people with disabilities.
ADA
Americans with Disabilities Act. A civil rights law that prohibits discrimination against individuals with disabilities.
HEX Color
A six-digit hexadecimal representation of an RGB color, commonly used in web design.
APCA
Advanced Perceptual Contrast Algorithm. A newer, perceptually uniform method for predicting text contrast readability.
Frequently Asked Questions
General
What is a color contrast ratio?
A color contrast ratio is the numerical difference in luminance between two colors, typically a text (foreground) and its background. It ranges from 1:1 (no contrast, same color) to 21:1 (maximum contrast, pure black on pure white).
What does WCAG stand for?
WCAG stands for Web Content Accessibility Guidelines. It is a set of globally recognized guidelines created by the W3C to ensure digital content is accessible to all users, including those with visual impairments.
What is the difference between WCAG AA and AAA contrast?
WCAG AA is the minimum standard for most websites, requiring a 4.5:1 ratio for normal text and 3:1 for large text. WCAG AAA is the strictest level, requiring a 7:1 ratio for normal text and 4.5:1 for large text.
What is considered large text in WCAG?
WCAG defines large text as text that is at least 18pt (typically 24px) or 14pt (typically 18.66px) and bold.
Usage
How do I use this contrast checker?
Simply paste or select your foreground and background colors in the tool. It instantly computes the contrast ratio and displays Pass/Fail badges for WCAG AA and AAA compliance.
How do I fix low contrast?
If your contrast ratio is too low (e.g., below 4.5:1), you should either darken the text color or lighten the background color (or vice versa in dark mode) until the ratio meets the required threshold.
Do I need to test dark mode colors?
Yes. Colors that pass contrast requirements in a light theme often fail when inverted for dark mode. You must explicitly test your dark mode color palettes to ensure they provide sufficient contrast.
Should I check contrast for hover or focus states?
Yes. Interactive elements like buttons and links change color on hover or focus. These state changes must also maintain a minimum 3:1 contrast ratio against the background and adjacent elements.
Developers
How is the contrast ratio calculated programmatically?
The contrast ratio is calculated using the formula (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. Luminance is calculated after converting sRGB values to linear RGB.
Is there an API for this contrast checker?
Currently, this tool operates entirely client-side for maximum speed and privacy, without requiring API calls. However, you can implement the luminance formula directly in your JavaScript or Python codebase for automated testing.
Accessibility
Why is contrast important for accessibility?
Adequate contrast is critical for users with low vision, color blindness, or age-related visual impairments. Insufficient contrast causes text to blur into the background, making content difficult or impossible to read.
What is non-text contrast?
According to WCAG 1.4.11, non-text contrast applies to UI components (like form inputs and buttons) and graphical objects (like icons). These elements must have a contrast ratio of at least 3:1 against adjacent colors.