Developer Tools · Free browser tool
WCAG Color Contrast Checker
Check text-to-background color contrast ratios in real-time. Verify WCAG 2.1 AA and AAA compliance instantly for accessible web design.
Colors
Pick or type hex values for text and background.
Live preview
Sample heading
The quick brown fox jumps over the lazy dog. Body text should stay readable at this size for AA compliance (4.5:1).
Smaller supporting copy — check Normal Text AA/AAA below.
Contrast ratio
17.74:1
Range is 1:1 (identical) to 21:1 (black on white).
- Text luminance
- 0.0092
- rgb(17, 24, 39)
- Background luminance
- 1.0000
- rgb(255, 255, 255)
WCAG 2.1 compliance
Large text means at least 18pt (24px) regular or 14pt (18.66px) bold.
- Pass
Normal text · AA
Body copy under ~18pt / 14pt bold · ≥ 4.5:1
- Pass
Normal text · AAA
Enhanced contrast for body copy · ≥ 7:1
- Pass
Large text · AA
≥18pt regular or ≥14pt bold · ≥ 3:1
- Pass
Large text · AAA
Enhanced contrast for large text · ≥ 4.5:1
Frequently Asked Questions
What contrast ratios does WCAG 2.1 actually require?
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text at Level AA. Level AAA (1.4.6 Contrast Enhanced) raises those floors to 7:1 for normal text and 4.5:1 for large text. Ratios are computed from each color's relative luminance and range from 1:1 (identical colors) to 21:1 (pure black on pure white).
What's the practical difference between AA and AAA?
AA is the most common compliance target for public websites, government services, and commercial products — it balances readability with design flexibility. AAA is a stricter enhanced level used when you need maximum readability (for example, long-form reading experiences or audiences with significant low vision). Meeting AAA for every UI element is often impractical, so many teams aim for AA globally and AAA for critical body text.
What counts as "large text" under WCAG?
Large text is defined as at least 18 point (typically ~24px) regular weight, or at least 14 point (typically ~18.66px) bold. Headings and hero copy often qualify; body paragraphs usually do not. Large text gets a lower contrast threshold because bigger glyphs remain legible at weaker contrast — but you should still verify the actual rendered size in your CSS, not just the design file.
Why does color contrast matter so much for accessibility?
Low contrast is one of the most common accessibility failures. Users with low vision, older adults, people on dim or sun-washed screens, and many with color vision deficiency all rely on sufficient luminance difference — not just hue — to read text. Checking contrast early prevents shipping interfaces that look polished in ideal conditions but become unusable for a large share of real visitors.
Tools You Might Also Need
Explore other free browser-based utilities for sellers, creators, and professionals.
- Developer Tools
JSON Formatter & Validator
Format, beautify, validate, and minify your JSON data instantly with local syntax error highlighting.
Try Tool - Developer Tools
Base64 Encode/Decode
Encode text to Base64 format or decode Base64 strings back to text instantly with full UTF-8 support and zero data leakage.
Try Tool - Developer Tools
UUID/GUID Generator
Generate high-quality cryptographically secure UUID v4 tokens instantly with bulk options and zero server tracking.
Try Tool
Why Color Contrast Is Non-Negotiable for Accessible Interfaces
Barrier-free design is not a nice-to-have polish step — it is how people with low vision, color vision deficiency, or harsh outdoor glare still read your UI. WCAG 2.1 defines minimum contrast ratios between text and its background so that content remains legible for a much wider range of users. Failing those thresholds quietly excludes people from forms, docs, dashboards, and marketing pages that look fine to designers on calibrated monitors.
Government sites, enterprise products, and many global consumer apps are expected to meet at least WCAG AA. Checking contrast in the browser — with the same relative-luminance formula the specification uses — lets you validate palette decisions before they ship, without uploading brand colors to a third-party service. Swap text and background, preview large vs normal text, and share a palette link with your team when a combination passes.
AA requires 4.5:1 for normal text and 3:1 for large text; AAA raises those bars to 7:1 and 4.5:1. Large text generally means 18pt (about 24px) regular or 14pt (about 18.66px) bold. Use this tool as a fast gate in design reviews, then confirm the final UI in context — icons, gradients, and overlays can change effective contrast even when two flat hex values pass.
More developer utilities on this site: validate form patterns with the Regex Tester , inspect auth tokens in the JWT Decoder , tidy design tokens as JSON with the JSON Formatter & Validator , or encode assets via Base64 Encode/Decode . For marketplace product photos, the Product Photo Background Checker reuses the same luminance math against real imagery.