Color Contrast Checker
Calculate WCAG 2.1 color contrast ratios and test Level AA and AAA accessibility compliance.
WCAG 2.1 Compliance Breakdown
Body text, paragraphs under 18pt or 14pt non-bold
Required: ≥ 4.5:1Enhanced contrast for long-form reading
Required: ≥ 7.0:1Headings 18pt (24px) or 14pt (18.6px) bold and larger
Required: ≥ 3.0:1High-contrast headings and prominent hero labels
Required: ≥ 4.5:1Form input borders, active toggles, graphical icons
Required: ≥ 3.0:1Accessible Web Typography
Good contrast ensures content is easily legible for readers with low vision, age-related optical loss, or anyone reading under bright direct sunlight.
WCAG 2.1 guidelines require at least 4.5:1 for regular text, and 3.0:1 for large text (18pt+ or 14pt+ bold) to achieve Level AA compliance.
How to use Color Contrast Checker
- 1Enter or pick your Foreground (Text) color using the color swatch or by typing a HEX, RGB, or HSL code.
- 2Enter or pick your Background color.
- 3Click the swap button anytime to test inverted color relationships (e.g., dark mode vs light mode).
- 4Inspect the calculated contrast ratio and check individual pass/fail results for WCAG AA and AAA thresholds.
- 5Review the live visual preview demonstrating headings, body paragraphs, and interactive UI buttons.
- 6Click 'Copy Audit Report' to export the compliance summary for your design documentation or QA review.
Key Features & Highlights
- •W3C Relative Luminance Engine: Adheres precisely to the WCAG 2.1 formula [ (L1 + 0.05) / (L2 + 0.05) ] without approximation shortcuts.
- •Comprehensive WCAG AA & AAA Scoring: Evaluates compliance across Normal Text (4.5:1 / 7.0:1), Large Text (3.0:1 / 4.5:1), and UI Components (3.0:1).
- •Multi-Format Color Input: Seamlessly parses standard HEX (#fff, #ffffff), functional RGB/RGBA, and HSL/HSLA color models.
- •Live Typography Simulation: Visual preview displays realistic body copy, 24px headings, and solid/outlined button elements.
- •Accessible Text Badges: Uses bold textual PASS and FAIL indicators alongside semantic colors, ensuring accessibility for colorblind designers.
- •100% Client-Side Privacy: All calculations happen locally inside your web browser without network requests.
The Importance of Web Accessibility & Color Contrast
Adequate color contrast is one of the most critical tenets of inclusive web and application design. Approximately 1 in 12 men and 1 in 200 women experience some form of color vision deficiency (color blindness), while millions of people experience low visual acuity or view mobile screens in high-glare outdoor environments.
The WCAG 2.1 Contrast Ratio Formula
The Web Content Accessibility Guidelines (WCAG 2.1) specify that contrast is calculated using the relative luminance of two colors:
Where L1 is the relative luminance of the lighter color, and L2 is the relative luminance of the darker color, normalized to an absolute scale from 0.0 (pure black) to 1.0 (pure white).
| WCAG Level | Content Type | Minimum Ratio | Target Audience / Use Case |
|---|---|---|---|
| AA (Standard) | Normal Text | 4.5:1 | Legally mandated threshold for government and enterprise digital services. |
| AA (Standard) | Large Text (18pt / 14pt bold) | 3.0:1 | Headings and prominent hero labels with thicker stroke weights. |
| AA (Standard) | UI Components & Icons | 3.0:1 | Form input borders, active checkboxes, focus rings, and navigation icons. |
| AAA (Enhanced) | Normal Text | 7.0:1 | High-accessibility healthcare, e-readers, and editorial publications. |
| AAA (Enhanced) | Large Text | 4.5:1 | Maximum legibility for large titles and critical warning banners. |
What Qualifies as Large Text?
Under WCAG definitions, large text is defined as 14 point (typically 18.66px) if bold, or 18 point (typically 24px) if regular weight. Because larger glyphs have wider strokes and are easier for human eyes to resolve against low-contrast backgrounds, they require a lower threshold of 3.0:1 rather than 4.5:1.
Frequently Asked Questions
What is WCAG color contrast?
WCAG color contrast refers to the ratio of luminance between foreground text or graphical elements and their background. The Web Content Accessibility Guidelines (WCAG) established these mathematical thresholds to ensure digital interfaces are readable for users with visual impairments.
How is contrast ratio calculated?
Contrast ratio is calculated using relative luminance: (L1 + 0.05) / (L2 + 0.05), where L1 is the luminance of the lighter color and L2 is the luminance of the darker color. The resulting ratio ranges from 1:1 (zero contrast, e.g. white on white) to 21:1 (maximum contrast, black on white).
What is the difference between WCAG AA and AAA compliance?
Level AA is the standard legal benchmark required by accessibility legislation worldwide (such as ADA and EU Section 508), requiring a minimum 4.5:1 ratio for normal text. Level AAA is a stricter tier requiring a 7.0:1 ratio for normal text, recommended for long-form reading, medical sites, and essential public utilities.
Does color contrast apply to buttons, icons, and input fields?
Yes. Under WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast), user interface components such as active button boundaries, form input borders, focus indicators, and standalone informational icons must maintain at least a 3.0:1 contrast ratio against adjacent colors.
Can I input colors in formats other than HEX?
Yes. Our checker supports standard HEX codes (#ffffff), CSS RGB notation (rgb(30, 41, 59)), and HSL notation (hsl(217, 33%, 17%)).
Related Free Tools
Explore complementary utilities to boost your workflow
CSS Gradient Generator
Create beautiful linear and radial CSS gradients with multi-color stops, presets, and live preview.
CSS Box Shadow Generator
Design multi-layer CSS box shadows with live interactive preview and ready-to-paste CSS code.
Image Color Picker
Upload an image and click anywhere to extract pixel colors in HEX, RGB, and HSL.
HTML Formatter & Minifier
Beautify, indent, format, and minify HTML markup with W3C void element handling, comment controls, and sandboxed live rendered preview.