Color Contrast Checker
WCAG 2.1 compliant contrast ratio measurement tool. Real-time calculation of text and background color contrast ratios with AA/AAA level compliance checking, color blindness simulation, and color suggestions.
for web accessibility compliance.
What is a Contrast Checker?
A contrast checker is an online tool that measures the contrast ratio between text and background colors and verifies compliance with WCAG (Web Content Accessibility Guidelines) standards in real-time. Ensuring sufficient color contrast so that everyone—including people with low vision and color vision deficiencies—can read web content is a core element of web accessibility.
This tool supports HEX and RGB color code input along with a visual color picker, instantly calculating the contrast ratio and displaying WCAG 2.1 AA and AAA level compliance. With features like color blindness simulation, suggested accessible colors, and saved color combinations, creating accessibility-compliant designs has never been easier.
When to Use This Tool
- Web Development – Verify that buttons, links, and body text colors meet WCAG standards before launching your site
- UI/UX Design – Confirm text readability when using brand colors in your designs
- Accessibility Audits – Find and fix color contrast issues on existing websites during accessibility improvement work
- Document Creation – Review text readability in PDFs, presentations, reports, and other digital documents
- App Development – Ensure iOS and Android app color combinations comply with accessibility guidelines
- Legal Compliance – Check content for government agencies, educational institutions, and organizations where WCAG compliance is legally required under ADA, Section 508, or similar regulations
- Color Vision Accessibility – Use simulation to verify that information is conveyed to users with color blindness
Key Features
- Real-time Contrast Calculation – The contrast ratio is calculated instantly as you input colors. Displays precise contrast ratios from 21:1 (maximum) to 1:1 (minimum).
- WCAG Compliance Checking – Shows pass/fail status for 4 criteria: AA/AAA levels for both normal and large text, with intuitive visual indicators.
- Multiple Color Input Methods – Supports direct HEX code entry, individual RGB value input, and a visual color picker for convenient color selection.
- Live Preview – See how your selected text/background color combination actually looks with both large text and normal text samples.
- Color Blindness Simulation – View your color combination through the eyes of users with Protanopia (red-blindness), Deuteranopia (green-blindness), Tritanopia (blue-blindness), and Achromatopsia (complete color blindness).
- Color Suggestions – When your current contrast ratio falls short, automatically suggests alternative colors that meet WCAG AA or AAA standards.
- Color Swap – Instantly exchange text and background colors to quickly check the contrast ratio of the reversed combination.
- CSS Code Copy – Copy your verified color combination as CSS code (
color: #000000; background-color: #FFFFFF;) for immediate use in your project. - History Storage – Save frequently used or verified color combinations locally for quick access later. Stores up to 12 combinations.
- Random Color Generation – Generate WCAG AA-compliant color combinations with one click. Selects randomly from various color palettes to suggest fresh combinations every time.
How to Use
- Select Text Color – In the left “Text Color” area, click the color picker or directly enter a HEX code (e.g., 333333) or RGB values.
- Select Background Color – In the right “Background Color” area, specify the background color using the same methods. Use the arrow button in the center to swap both colors.
- Check Results – Review the actual text appearance in the preview area at the top, then check the contrast ratio and WCAG compliance results below.
- Review Color Blindness Simulation – In the color blindness simulation section, see how your colors appear to users with different types of color vision deficiency.
- Save and Use – When you find a suitable color combination, click “Save” to store it in history, and “Copy CSS” to copy the code for use in your project.
WCAG Color Contrast Standards in Detail
What is Contrast Ratio?
Contrast ratio is calculated from the relative luminance of two colors. The contrast ratio between the brightest color (white) and darkest color (black) is 21:1, while identical colors have a ratio of 1:1. WCAG uses this contrast ratio to evaluate text readability.
WCAG 2.1 Level AA (Minimum Standard)
- Normal Text – Requires a contrast ratio of at least 4.5:1. Applies to text smaller than 18px or bold text smaller than 14px.
- Large Text – Requires a contrast ratio of at least 3:1. Applies to text 18px (24px CSS) or larger, or bold text 14px (19px CSS) or larger.
- UI Components – User interface elements like button borders, input fields, and icons require a contrast ratio of at least 3:1.
WCAG 2.1 Level AAA (Enhanced Standard)
- Normal Text – Requires a contrast ratio of at least 7:1. Provides the highest level of readability.
- Large Text – Requires a contrast ratio of at least 4.5:1. Same as the AA level requirement for normal text.
While most legal requirements mandate AA level compliance, aiming for AAA level is recommended for broader user accessibility.
Definition of Large Text
WCAG defines “large text” as:
- Regular weight: 18pt (24px) or larger
- Bold weight: 14pt (approximately 19px) or larger
Large text is easier to read at lower contrast ratios, which is why relaxed standards apply.
Legal Context in the United States
In the United States, web accessibility is governed by several laws including the Americans with Disabilities Act (ADA) and Section 508 of the Rehabilitation Act. Many courts have referenced WCAG 2.1 Level AA as the technical standard for digital accessibility compliance. Organizations that fail to meet these standards may face legal action and financial penalties.
Color Blindness and Web Accessibility
Types of Color Vision Deficiency
- Protanopia (Red-blindness) – Missing red cone cells, making it impossible to perceive red colors. Affects approximately 1% of males.
- Deuteranopia (Green-blindness) – Missing green cone cells, making it impossible to perceive green colors. The most common form of color blindness, affecting approximately 5% of males.
- Tritanopia (Blue-blindness) – Missing blue cone cells, making it impossible to perceive blue colors. Very rare, affecting approximately 0.01% of both males and females.
- Achromatopsia (Complete color blindness) – Perceives all colors in grayscale. Extremely rare, occurring in approximately 1 in 30,000 people.
Design Tips for Color Vision Accessibility
- Never use red and green color combinations alone to distinguish information. Combine with patterns, icons, and text labels.
- With sufficient brightness contrast, users with color vision deficiency can distinguish elements by lightness differences.
- Add underlines or other visual indicators to links so they’re identifiable beyond just color.
- In charts and graphs, use patterns, labels, and direct numerical values.
Practical Tips
- Brand Color Verification – When using corporate CI colors for text and backgrounds, always check the contrast ratio. Consider including accessibility verification results in your brand guidelines.
- Check All Button States – Verify contrast ratios for button default, hover, focus, and disabled states.
- Dark Mode Support – Check contrast ratios in both light and dark modes. The same text color may produce different results depending on the background.
- Semi-transparent Background Caution – Text on semi-transparent overlays may have varying readability depending on background images, so verify against worst-case scenarios.
- Real-world Testing – Passing contrast ratio checks doesn’t guarantee actual readability. Test on various devices and lighting conditions.
Frequently Asked Questions
Should I follow WCAG AA or AAA standards?
Legal requirements typically mandate AA level compliance. Most regulations including the US ADA, Section 508, and similar laws in other countries reference WCAG 2.1 AA as the standard. However, aiming for AAA level is recommended for better accessibility for users with low vision or elderly users. Body text especially should target the AAA standard (7:1) when possible.
Do logos and decorative text need to meet contrast ratio requirements?
No. WCAG exempts purely decorative text, text that is part of a logo or brand name, and text in disabled UI components from contrast ratio requirements. However, taglines or supplementary information next to logos must still meet the standards.
Can I use color alone to convey information?
No. According to WCAG 1.4.1 “Use of Color,” color should not be the sole means of conveying information. For example, instead of saying “Red items are required,” use an asterisk (*) mark along with a “Required” label. Error messages should be indicated with icons and text, not just red color.
Is higher contrast always better?
Not necessarily. The 21:1 contrast between pure white (#FFFFFF) and pure black (#000000) can actually cause eye strain. In dark mode especially, slightly gray text (around #E0E0E0) may be more comfortable. A high contrast ratio in the 7:1 to 15:1 range that isn’t extreme is generally recommended.
Where is my color data stored?
The history feature stores data in your browser’s localStorage and is never sent to a server. Saved color combinations can be retrieved when you return using the same browser. History is not preserved if you clear browser data or use incognito/private mode.
Do the same contrast ratio standards apply on mobile?
Yes, WCAG standards apply equally to mobile devices. In fact, mobile may require even higher contrast since screens are often viewed outdoors in sunlight. Both iOS and Android recommend WCAG contrast ratio standards in their respective accessibility guidelines.