Enter two hex colours — get instant WCAG 2.1 AA and AAA pass/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
Requirements from WCAG 2.1. Large text means at least 18pt (24px) regular or 14pt (18.67px) bold.
| Level | Min 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) |
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.
More free tools
JWT decoder, regex tester, JSON formatter — all free, all in your browser.
Browse all toolsFeatured
Word Counter
Live word count, character count, sentence count, paragraph count, and reading time estimate as you type. Useful for blog posts, tweets, essays, and any platform with a character limit.
QR Code GeneratorPassword GeneratorJSON Formatter & DiffImage CompressorColor Picker & PalettePomodoro TimerLorem Ipsum GeneratorPercentage CalculatorBase64 Encoder / DecoderSee AllWord Counter
Live word count, character count, sentence count, paragraph count, and reading time estimate as you type. Useful for blog posts, tweets, essays, and any platform with a character limit.
QR Code Generator
Generate QR codes for URLs, plain text, WiFi credentials, or vCard contact info. Set size, foreground/background color, and error correction level. Download as PNG or SVG.
Password Generator
Generate strong passwords with configurable length (8–128), and toggles for uppercase, lowercase, numbers, and symbols. Strength meter, one-click copy. Runs entirely in the browser.
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.
Image Compressor
Drag and drop JPG, PNG, or WebP images and compress them entirely in-browser using the Canvas API. Shows original vs compressed size and savings percentage. Nothing uploaded anywhere.
Color Picker & Palette
Full-featured color picker with HEX, RGB, HSL, and CMYK output. Upload an image to extract the 5 dominant colors as a palette. Copy any value with one click.
