Loading…
Check foreground/background contrast against WCAG 2.2 AA/AAA with ratio and pass/fail. Use for accessibility audits; for format conversion use color-converter, for picking use color-picker. Input: two colors. Returns ratio + grade. 100% client-side.
Contrast Checker is loading — interactive editor will appear here. Use examples below to try instantly once loaded.
Press ? for keyboard shortcuts
Checks the contrast ratio between a foreground text color and a background color, then reports whether the pair passes WCAG 2.2 AA or AAA requirements for normal text, large text, and UI components. Includes relative luminance calculation, a live preview panel, and a palette of common color pairs.
Low-contrast text is one of the most common accessibility failures on the web and a leading cause of WCAG violations. Designers and developers need a fast, accurate way to verify that color choices meet the contrast thresholds required by WCAG 2.2 and other accessibility standards.
This tool is part of the DevStackIO platform — a collection of free online developer tools from DevStackIO. Browse more free developer resources on DevStackIO.
UI and UX designers validating color systems, front-end developers building accessible interfaces, accessibility specialists auditing sites, and content teams ensuring readable text on any background.
Pick a foreground text color using the color inputs or HEX text boxes
Pick a background color the same way
Read the computed contrast ratio and the AA/AAA pass status
Use the live preview to see how the colors look together
Toggle the preview for normal text, large text, and UI components
Use the palette list to check multiple common color pairs at once
#ffffff on #000000 → ratio 21.00:1 → AAA Pass for all text sizes#767676 on #ffffff → ratio 4.54:1 → AA Pass for normal text, AAA Fail#ff6600 on #ffffff → ratio 2.85:1 → AA Fail for normal text, AA Pass for large text#1a73e8 on #ffffff → ratio 4.56:1 → AA Pass for normal textWhat contrast ratio does WCAG 2.2 require?
4.5:1 for normal text, 3:1 for large text (18pt or 14pt bold), and 3:1 for UI components.
What is relative luminance?
A normalized measure of a color's brightness, defined by the WCAG formula using linearized RGB channels.
Does this tool store my colors?
No, all calculation happens locally in your browser. Nothing is uploaded.
Why does my colored text fail even though it looks readable?
Perceptual readability and the WCAG mathematical ratio are different; the ratio is the standard that auditors check.
What is the difference between AA and AAA?
AAA requires a higher ratio (7:1 for normal text, 4.5:1 for large text) than AA.
Authoritative specifications, standards, and in-depth reading for Contrast Checker.
Aa Sample text preview
The quick brown fox jumps over the lazy dog.
Contrast ratio
17.74:1
Ratios follow the WCAG 2.2 relative luminance formula. All computation happens locally in your browser.
Pick colors from uploaded images. Use when sampling images; for conversion use color-converter, for palette use color-picker. Input: image ≤10MB. Returns HEX/RGB. 100% client-side, files never leave browser.
Crop images with aspect presets and free select. Use when trimming; for scaling use image-resizer. Input: image ≤10MB. Returns cropped PNG/JPEG. 100% client-side, files never leave browser.
Pick colors and copy HEX/RGB/HSL. Use for palette building; for image sampling use color-eyedropper. Input: color selection. Returns color codes. 100% client-side, files never leave browser.
Compress JPEG, PNG, and WebP images in your browser. Reduce file size without visible quality loss.
Resize images by width/height or percent. Use when dimensions must change; for smaller files use image-compressor. Input: image ≤10MB. Returns resized PNG/JPEG/WebP. 100% client-side, files never leave browser.
Generate favicons (16/32/180 PNG + ICO) from one image. Use for site icons; for compression use image-compressor. Input: image ≤10MB. Returns favicon set + HTML. 100% client-side, files never leave browser.
Minify SVG by stripping metadata and whitespace. Use for smaller vectors; for raster use image-compressor. Input: SVG ≤10MB. Returns optimized SVG. 100% client-side, files never leave browser.
Generate placeholder images by size and text. Use for mockups; for editing photos use image-resizer. Input: dimensions + options. Returns PNG download. 100% client-side, files never leave browser.