Color Contrast Checker.
Enter two hex colours for instant WCAG 2.1 AA and AAA pass or fail results.
The quick brown fox
jumps over the lazy dog — 0123456789
SMALL TEXT SAMPLE · BODY COPY SAMPLE
Foreground
Background
Contrast Ratio
16.08:1
WCAG contrast requirements.
Requirements from WCAG 2.1. Large text means at least 18pt (24px) regular or 14pt (18.67px) bold.
| Level | Minimum ratio | Applies to |
|---|---|---|
| AA — Normal text | ≥ 4.5:1 | Body copy, labels, input text (under 18pt / 14pt bold) |
| AA — Large text | ≥ 3:1 | Headings (18pt+ or 14pt+ bold), decorative text |
| AAA — Normal text | ≥ 7:1 | Enhanced accessibility for critical or extended reading |
| AAA — Large text | ≥ 4.5:1 | Enhanced large text — highest contrast requirement |
| UI components | ≥ 3:1 | Active UI elements, input borders, focus indicators (WCAG 1.4.11) |
Capabilities
What You Get
The exact WCAG ratio and a real pass or fail per level — the check that keeps an interface legible and compliant.
Exact Ratio
The computed contrast ratio, not a vague good or bad verdict.
AA And AAA
Pass or fail evaluated separately for each conformance level.
Text Size Aware
Normal and large text thresholds are checked independently.
Live Preview
See the pairing rendered as real text before you ship it.
UI Components
Covers the 3:1 requirement for borders, icons, and controls.
Instant Feedback
Adjust either colour and every verdict updates immediately.
Related tools.
More free browser-based utilities, connected by category and use case.
JSON Formatter & Diff
Paste raw or minified JSON to format, validate, and syntax-highlight it. Switch to diff mode to compare two JSON blobs side by side and see exactly what changed.
JWT Decoder
Paste any JSON Web Token and instantly see the decoded header, payload, expiry, and issued-at date in a clean readable layout. Runs entirely in the browser — nothing sent anywhere.
Regex Tester
Write a regex pattern and test it against live input with real-time match highlighting, capture group labeling, and a match count. Includes a replace mode with substitution preview.
FAQ
Color Contrast Checker FAQ.
What is WCAG?
WCAG (Web Content Accessibility Guidelines) is an international standard developed by the W3C that defines how to make web content more accessible to people with disabilities, including those with visual impairments. The contrast ratio requirements are found in WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) and 1.4.6 (Contrast Enhanced).
What contrast ratio do I need to pass WCAG AA?
For AA compliance: normal text (under 18pt or 14pt bold) needs a minimum 4.5:1 ratio. Large text (18pt or 14pt bold) needs at least 3:1. Most websites aim for AA compliance at minimum.
What is WCAG AAA?
AAA is the highest WCAG conformance level, requiring 7:1 for normal text and 4.5:1 for large text. AAA is recommended for text that users need to read for extended periods, but the W3C notes it may not be possible to achieve for all content.
How is contrast ratio calculated?
Contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 the darker. Luminance is calculated by converting sRGB values to linear light values. A ratio of 1:1 means identical colours; 21:1 is black on white (the maximum).
Does the contrast checker work for dark mode?
Yes. Enter your dark mode background as the background colour and your dark mode text as the foreground colour. The WCAG ratio requirements are the same regardless of whether the design is light or dark.
Why do I sometimes see colours that look fine but fail WCAG?
Human perception of contrast is subjective and context-dependent. WCAG uses a mathematical formula that doesn't perfectly match perceived contrast in all cases. Some colours that seem fine to those with normal vision may be difficult for people with colour vision deficiencies or low contrast sensitivity.
